How can I get inner slice when clicking on an outer slice in a HighChart donut chart?

Question

Is it possible to get the parent slice (inner slice) when I click on a child slice (outer slice)?

When you click on 8.0 for MSIE, I get a popup saying 8.0. What I would like to get is the parent slice data, in this case, MSIE. Notice, Chrome also has a version 8.0, so when i click that I should get Chrome.

Is this possible?

My goal is when a user clicks on a version, information for that slice is displayed in a table below the donut chart. When a user clicks on a browser slice, information for all versions of the browser is displayed.

Here is a JSFiddle I setup.

 series: [{
     ...,
     point:{
        events:{
            click: function (event) {
                alert(this.name); // Get access to parent slice here.
            }
        }
    }
}]
http://jsfiddle.net/CodeWzrd/Sre9G/2/

Thanks.

Answer 1

You should modify drilldown structure and add id for each "interior" serie, and parentID for "outer" serie. Then use get function (http://api.highcharts.com/highcharts#Chart.get()) to display "parent" name.

It is simple example which display name for MSIE, but if you add all parameter for other series, then it will work for each of them.

http://jsfiddle.net/Sre9G/4/

 point: {
            events: {
                click: function (event) {
                    var parentSerie = this.options.parentId;
                   alert(this.series.chart.get(parentSerie).name); 

                }
            }
        }