Currently, I have implemented vue-chart-js along with the labels plugin for a donut chart. Everything is working well so far - when I click on a section of the donut chart, the background color changes as expected. However, I now want to also change the font color of the label specific to the donut section I clicked on.
The following code snippet demonstrates how I am currently changing the label color for the donut chart options:
return {
options: {
events: ['click'],
plugins: {
labels: {
render: 'label',
fontColor: ['black', 'black', 'black'],
},
},
onClick: (evt, item) => {
// Changing the font color for the section to red, which updates the fontColor item in the array above and triggers reactivity for the options prop in the donut chart component
this.$set(this.doughnutChart.options.plugins.labels.fontColor, 0, 'red');
},
},
chartData: {
labels: ['A', 'B', 'C'],
datasets: [
{
hoverBackgroundColor: 'red',
data: this.chartData,
},
],
},
I make use of the recommended destroy() and re-render methods provided by the Vue-Chartjs documentation to update the chart component accordingly.
export default {
extends: Doughnut,
mixins: [mixins.reactiveProp],
props: {
chartData: {
type: Object,
default: null,
},
options: {
type: Object,
default: null,
},
},
watch: {
options: {
handler() {
this._data._chart.destroy();
this.renderChart(this.chartData, this.options);
},
deep: true,
},
},
mounted() {
this.renderChart(this.chartData, this.options);
},
};
Although clicking on a chart section successfully turns the label text red, the issue arises when the chart re-renders and the red section background color that was toggled on click resets. When attempting to use the update() method instead of destroying or re-rendering the chart, no changes occur.
Is there a way to achieve both clicking on the chart to change the section background color and its label text without needing to re-render the entire chart or losing the section's background color change upon clicking?