How can I update the overall value of a chart in callbackback legendItemClick?

Question

The title says almost everything. Here is an image explaining what I want.

This is part of the Highcharts configuration that I use so far, but it does not calculate the amount correctly, because the stackTotal property contains the total, even hidden elements.

plotOptions: { series: { events: { legendItemClick: function(event) { // if visible, sum == 0, because this series will be hidden // if hidden, sum == total, because this series will be shown var sum = (this.visible ? this.data[0].stackTotal : 0), index = this.index; $.each(this.chart.series, function(){ if (this.visible && this.index != index) { sum += this.data[0].stackTotal; } }); $('.chart_total', '#doc_chart').text(sum); } } } }, 

How can I make it show the correct amount for the chart?

Answer 1

See if this jsfiddle sample does what you are looking for.

When the legendItem button is legendItem handler starts with chartTotal = 0 , then it scrolls through each series in the chart.

If the current series in the loop is not the one that clicked (marked with series.index ), then it calculates seriesTotal and adds it to chartTotal only if it is visible .

Otherwise, if the current series is the one that clicked , adds its seriesTotal to chartTotal only if it is visible .

Finally, it updates the display with the value chartTotal .