Highcharts : How to perform an action on Pie chart's legend click ?

0
votes

Guys I have a pie chart in my application which I got from my UI department. Now upon clicking the legend I want to change the value displayed in the "title" of the pie chart.

Here is the chart code given to me :

$('#performancePieChart').highcharts({
    chart: {
        backgroundColor: '#f5f7f7', style: { fontFamily: 'Roboto, Sans-serif', color: '#aeafb1' }
    },
    title: {
        style: { color: '#838589' }, text: '<b>' + myDepartmentWiseSeriesCount + '</b><br>Issues', align: 'center', verticalAlign: 'middle', y: 0, x: -185
    },
    tooltip: {
        headerFormat: '{point.y:,.1f}<br/>', pointFormat: $('#performancePieChart').data('tooltip')
    },
    legend: {
        itemStyle: { color: '#838589' }, symbolWidth: 10, symbolHeight: 5, itemWidth: 170, symbolRadius: 0,
        itemMarginBottom: 10, backgroundColor: '#f5f7f7', align: 'right', borderWidth: 0, width: 340, height: 250, x: 0, y: 80
    },
    plotOptions: {
        pie: {
            allowPointSelect: false, cursor: 'pointer', dataLabels: { enabled: false, }, 
            colors: ['#cc6ae5', '#6c51d4', '#318fe0', '#31cee0', '#80d343', '#856aed', '#5272e6', '#31b0e0', '#31e0b1',
            '#d3cb43'], showInLegend: true, center: ['50%', '50%']
        },
    },
    series: [{
        type: 'pie', name: 'Department Issues', innerSize: '70%',
        data: myDepartmentWiseSeries
    }]
});

Here myDepartmentWiseIssueCount & myDepartmentWiseSeries are dynamic variables having "count of issues" and "department names" respectively.

Now upon clicking the legend button, I want to update the value in myDepartmentWiseSeriesCount

Here is the picture for reference of my chart : enter image description here

Now the Administration and Application Development departments have a value of "1" and Administrative Process has a value of "2" and the total "4" is shown at the center of pie chart.

Also when I click any legend, that pie portion disappears automatically but the value "4" doesn't change. I want to update the center value as well. For example, if I turn off the Administrative Process (having value 2), the value at the center of pie chart should change to remaining value (4-2 = 2).

How would I do that ? Is there a particular event of legend that I could call and then update the value ?

3
jquerychartshighcharts

3 Answers

1
votes

None of the above answers worked. This is what I did to solve my problem : 

   plotOptions: {
        pie: {
            allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false, },
            colors: ['#cc6ae5', '#6c51d4', '#318fe0', '#31cee0', '#80d343', '#856aed', '#5272e6', '#31b0e0', '#31e0b1',
            '#d3cb43'], showInLegend: true, center: ['50%', '50%'], point: {
                events: {
                    legendItemClick: function () {
                      ..code here...
                    } } },  }, }
0
votes

Take a look at plotOptions.series.events.legendItemClick. This will give you access to the items being clicked and let you run other code.

0
votes

Hope that this example work as you need. 

title:{
        useHTML:true,
        text: '<div id="title">default title</div>'
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    console.log(this);
                    $('#title').html(this.name);
                }
            }
        }
    },