I have created stack column chart with filter when i click stack column.
But when i click selected, color is change to default color (blue)
Here my vue app
https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue
I've expected color selected same of color in stack column.
How is it done using Vue-google-charts?
Thanks an best regards, Dede
You can see this codesandbox which is exactly what you want. First add color for each series in chartOptions:
series: {
0: { color: "#3366cc" },
1: { color: "#dc3912" },
2: { color: "#ff9900" },
3: { color: "#109618" },
4: { color: "#990099" },
5: { color: "#0099c6" },
6: { color: "#333" },
},
In addition, you should define another object to store default colors in 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 you filter data, you can change the color of first series:
this.chartOptions.series[0].color = this.defaultColors[idx].color;
Updated @Nima Ebrazeh answer (solved small bug and showing 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/vue-google-charts@0.3.2/dist/vue-google-charts.browser.js"></script>
<div id="demo">
<div id="app">
<GChart type="ColumnChart" :data="newData" :options="chartOptions" :events="chartEvents" />
</div>
</div>