I am currently working with HighCharts variable Pie chart. I wanted to add more functionality to the legend click, so I added a separate legendItemClick event to perform two things: it should behave like the default (which it doesn't), but also correct the text value inside the donut, which also does not work.
Here is some code to work with:
this._chart = Highcharts.chart(this.$.chartsContainer, {
title: {
text: '<div style="font-size: 30px; font-weight:600;">' + ySum + '</div><div>Total demands</div>',
align: 'center',
verticalAlign: 'middle',
useHTML: true,
style: {
'font-size': '16px',
'font-weight': 'normal',
'text-align': 'center',
'text-transform': 'inherit'
},
x: -2,
y: -27,
},
colors: ['#315674', '#006281', '#006D81', '#00BFE2', '#53A1B4', '#4FB4B5', '#00E8D2', '#FFC35F', '#9ECBD6'],
plotOptions: {
series: {
dataLabels: {
enabled: false },
showInLegend: true,
style: {'border-radius': '15px', 'font-weight': 'normal'},
},
variablepie: {
name: '',
borderWidth: 5, borderColor: 'white', minPointSize: 16,
color: 'white', innerSize: '60%',
point: {
events: {
legendItemClick: function(event) {
console.log(event);
if (this.visible) {
this.series.visible = false;
ySum = ySum - event.target.options.y;
} else {
ySum = ySum + event.target.options.y;
}
}
}
}
},
},
tooltip: {
useHTML: true,
headerFormat: '<small>{point.y}</small><table>',
pointFormat: '',
footerFormat: ''
},
series: [{
type: 'variablepie',
data: ySerie,
},
]
});
this.reflowChart();
I tried hiding the clicked series data via its visible attribute, but that does not work properly, because it hides the clicked data, but does not redraw the chart to form a full circle again ( if you know what I am talking about ).
The second problem is the text title. I want it to show the new corrected value ( it is the ySum variable up inside the title: { text: block ). I tried setting the new value but it does not update the chart's data for some reason. For example, we have 3 slices of value 10 each. It shows "30 total". When 1 legend item is clicked and hidden, it should update ySum to now show " 20 total".
So in short, I need help with 1) How to properly hide and show clicked legend series data 2) Make the text attribute ySum update its value accordingly
Thank you for your help!
------------------- UPDATE -----------------
I figured out the first problem by myself ( I will leave the problem nonetheless if anyone else faces it ): legendItemClick event is a function that can return a boolean value: You can manipulate its behavior by setting true = standard behavior -> it will hide the data series AND redraw the chart false = it will do nothing -> similar as event.preventDefault()
To change chart title you can use setTitle method:
legendItemClick: function(event) {
var chart = this.series.chart
if (this.visible) {
// this.series.visible = false;
ySum = ySum - event.target.options.y;
} else {
ySum = ySum + event.target.options.y;
}
chart.setTitle({
text: ySum
}, false, false);
return true
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
Live demo: https://jsfiddle.net/BlackLabel/sdh1y0tw/