Highcharts --- Change sliced color on drilldown pie chart

3
votes

I am trying to change the sliced point colour on pie chart. When it is drilled down, the colour couldn't be changed using the select function on the slice. The colour is always changed back to the colour of its parent slice.

For example, when a green slice is clicked on the parent chart to drill down, whatever slice clicked on the child chart will change to green, even though I tried to change it to yellow in the select event which is set in plotOptions. But unselecting it will change the colour to yellow, by clicking another slice.

It seems like a bug to me. 

       $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Browser market shares. November, 2013.'
            },
            subtitle: {
                text: 'Click the slices to view versions. Source: netmarketshare.com.'
            },
            plotOptions: {
                series: {
                    allowPointSelect: true,
                    point: {
                        events: {
                          select: function() {
                            this.update({color: 'yellow'});
                          }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            },

            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: brandsData
            }],
            drilldown: {
                series: drilldownSeries
            }
        });

Here is the fiddle.

2
highchartspie-chartdrilldown

2 Answers

1
votes

In the current version of the Highcharts (Highcharts Basic v7.2.1) everything is working properly.

0
votes

I'm a bit late on this one, but this is a known issue of Highcharts. Instead of using the select event, use the selected and unselected events. There is a subtle difference here, as using select will often not fire directly after a click. These two events however are more reliable.

https://api.highcharts.com/highcharts/plotOptions.pie.point.events.select https://api.highcharts.com/highcharts/plotOptions.pie.point.events.unselect