How can I modify the color in vue-google-chart when a filter option is selected?

I created a stack column chart with a filter that changes the color to blue when selected.

Here is my Vue app:

https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue

I expected the selected color to match the color in the stack column.

Could someone please advise on how to achieve this using Vue-google-charts?

Thank you and best regards, Dede

javascriptvue.jschartsvuejs2gchart

Answer №1

If you're looking for a solution that meets your requirements, check out this codesandbox example. Start by assigning colors to each series in the chartOptions:

series: {
          0: { color: "#3366cc" },
          1: { color: "#dc3912" },
          2: { color: "#ff9900" },
          3: { color: "#109618" },
          4: { color: "#990099" },
          5: { color: "#0099c6" },
          6: { color: "#333" },
},

Moreover, create another object to hold default colors under the data property:

defaultColors: {
        0: { color: "#3366cc" },
        1: { color: "#dc3912" },
        2: { color: "#ff9900" },
        3: { color: "#109618" },
        4: { color: "#990099" },
        5: { color: "#0099c6" },
        6: { color: "#333" },
},

Then, when filtering data, update the color of the first series like so:

this.chartOptions.series[0].color = this.defaultColors[idx].color;

Answer №2

Check out the latest update to Nima Ebrazeh's answer (fixed a minor bug and added graph title):

Vue.component("gchart", VueGoogleCharts.GChart);
new Vue({  
  el: "#demo",
  data() {
    return {
      chartData: [
        [
          "Month",
          "New",
          "Verified",
          "Regitered ID",
          "On Playing",
          "Finished",
          "Active",
          "Inactive",
        ],
        ["January", 7, 4, 18, 15, 9, 10, 0],
        ["February", 16, 22, 23, 30, 16, 9, 8],
        ["March", 10, 2, 20, 13, 14, 21, 18],
      ],
      chartOptions: {
        chart: {
          title: "Player Performance",
        },
        legend: { position: "bottom", maxLines: 5 },
        bar: { groupWidth: "75%" },
        isStacked: true,
        title: "Player Performance (please chose category to filter)",
        series: {
          0: { color: "#3366cc" },
          1: { color: "#dc3912" },
          2: { color: "#ff9900" },
          3: { color: "#109618" },
          4: { color: "#990099" },
          5: { color: "#0099c6" },
          6: { color: "#333" },
        },
      },
      chartEvents: {
        click: (e) => {
          let idx = e.targetID.match(/\d+/g);
          if (idx && idx.length < 3) {
            idx = Number(idx[0])
            this.isFiltered ? this.allData() : this.filterChart(idx);
          }
        },
      },
      newData: [],
      isFiltered: false,
      defaultColors: {
        0: { color: "#3366cc" },
        1: { color: "#dc3912" },
        2: { color: "#ff9900" },
        3: { color: "#109618" },
        4: { color: "#990099" },
        5: { color: "#0099c6" },
        6: { color: "#333" },
      },
    };
  },
  methods: {
    filterChart(idx) {
      this.allData();
      for (let i = 0; i < this.newData.length; i++) {
        this.newData[i] = [this.newData[i][0], this.newData[i][idx + 1]];
      }
      this.chartOptions.series[0].color = this.defaultColors[idx].color;
      this.isFiltered = true;
    },
    allData() {
      this.newData = [...this.chartData];
      this.chartOptions.series[0].color = this.defaultColors[0].color;
      this.isFiltered = false;
    },
  },
  mounted() {
    this.allData();
  },
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8b8898d09a92929a9198d09e959c8f898ebdcdd3ced3cf">[email protected]</a>/dist/vue-google-charts.browser.js"></script>
<div id="demo">
  <div id="app">
    <GChart type="ColumnChart" :data="newData" :options="chartOptions" :events="chartEvents" />
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...

javascripthtmlcssapachenginx

Retrieve the URL of the image from an XML document

Figuring out how to extract the image URL from XML files in Android Studio can be challenging. After analyzing 30 RSS Feed XMLs, I discovered that 95% of them contain ".jpg" images with links starting with "http," not "www." Therefore, I am working on a co ...

javascriptxmlandroid-studiorssfeed

Ways to combine X and Y velocities into a single velocity

Is there a way to combine the X and Y Velocity into a single Velocity without considering the angle? var velocityX = some value; var velocityY = some value; // Need to convert both X and Y velocities into one combined velocity ...

javascriptmathvector

Utilizing setColumns() function within Google Charts for JSON data tables

Is there a feature in the Google Charts API that functions similar to setColumns() for working with JSON data? I'm aiming to reduce PHP calls by consolidating my data into a single array and then specifying which columns Google Charts should utilize. ...

javascriptphpjsongoogle-visualization

Can the values in all fields of a JSON be combined or subtracted with those of another object containing the same fields?

I am currently working with a Mongoose.js schema that is structured as follows: { "City": String, "Year": String, "Population": Number, "Blah": Number, "Nested": { "Something": Number, "More stuff": Number } } Is there an efficient w ...

javascriptjsonnode.js

Guide to utilizing an Ajax response object

Here is the code I am using to display data based on values selected from dropdowns: $("#botao-filtrar").click(function(){ $(".mask-loading").fadeToggle(1000); $.ajax({ url: 'datacenter/functions/filtraDashboardGeral.php', as ...

javascriptphpjqueryjsonajax

Is it possible to use Node.js without resorting to template engines

Recently, I embarked on a journey to explore the world of backend development, focusing my attention on Node.js. As I delved into Express.js and familiarized myself with routing, a curious thought crossed my mind. Is there a method to transmit data direc ...

javascriptnode.jstemplate-engine

What is the significance of using the "why" in the href property within the

I need help understanding why the plus "+" is used before and after myUrl in the function .not. Even though it works fine with or without the +, I am curious about why it was included in the code snippet. <script type="text/javascript"> $(documen ...

javascriptjquery

What is the correct way to utilize href in CSS content property?

Below is the content of a box I have: When the above box is hovered over, it flips to this: This block's HTML code is as follows: <div class='tiles'> <div class='col'> <a href=""></a> <a href ...

javascriptjqueryhtmlcsshref

Tips for organizing your JSON Structure within ReactJs

In the given example, I have a JSON structure with information about different airlines. The Airline Name is dynamic and we need to separate the JSON into an expected array format. const arr = [ { Airline: "Goair", Departure: "01:50" ...

javascriptarraysreactjs

What is preventing Bootstrap properties from being applied to HTML elements appended to the DOM through JavaScript?

Currently, I am immersed in a project that utilizes Bootstrap to generate various nested components styled in accordance with Bootstrap's class system. I triumphantly crafted a card component using Bootstrap, but encountered a challenge when attemptin ...

javascripthtmldebuggingdombootstrap-5

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

My jquery button click method is functioning correctly in views outside of modals, but the uploadbtn button click method does not work when a partial view is loaded in the modals. <script src="~/lib/jquery/dist/jquery.min.js"></script> ...

javascriptjqueryasp.net-core.net-core

Developing a placeholder directive with AngularJS

Are you looking to create a unique element in AngularJS to facilitate nested ng-repeats? Take a look at the example below: data.test = [{h:1, d:[11,12]}, {h:2, d:[21,22]}]; ---------------------- <custom ng-repeat="a in data.test"> <h3>{{a ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

NodeJS Express throwing error as HTML on Angular frontend

I am currently facing an issue with my nodejs server that uses the next() function to catch errors. The problem is that the thrown error is being returned to the frontend in HTML format instead of JSON. I need help in changing it to JSON. Here is a snippe ...

javascriptnode.jsangularexpresserror-handling

Troubleshooting Images in a React Application Integrated with WordPress API

I am struggling to understand why this GET request is consistently returning a 404 error. I have thoroughly tested the URL using Postman and everything seems to be in working order for the title and excerpt, but the images are causing some issues. Does a ...

javascriptreactjswordpresswordpress-rest-api

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...

javascriptjqueryajax

Using Angular JS, apply multiple column filters within a table to refine the displayed data

I'm currently working on implementing a filter for multiple columns in a table that is being populated by the ng-repeat directive. <tr ng-repeat="descriptiveField in vm.descriptiveFieldList|filter:{name:vm.searchText}" ng-class-even="'even-bg ...

javascriptangularjsfilter

Numerous checkboxes have been chosen alongside a submission button

I recently completed a small project involving multiple checkboxes using ajax. You can view the demo here. However, I am now looking to implement a submit button for filtering options. After selecting multiple checkboxes and clicking the submit button, onl ...

javascriptphpajaxbuttoncheckbox

Extracting user login details from a Java script-based web browser for a RASA chatbot

Our website integrates a web bot using Javascript. When users log in, they can access the chatbot icon. Currently, the chatbot starts without collecting user data. However, having user data is important as we plan to trigger actions based on user ID. If ...

javascriptpythonangularjschatbotrasa

Creating a modal form with jQuery in ASP.NET

I'm fairly new to ASP.NET development and have been able to work on simple tasks so far. However, I now have a more complex requirement that I'm struggling with. My goal is to create a modal form that pops up when a button is clicked in order to ...

javascriptjqueryasp.nethtml