Drilldown and title update in Highcharts pie

Question

I'm working on an Highchart pie. When I click on a slice I'd like to have a drilldown and to update my chart's title.

My drilldown is working fine. So is my method to update the title.

However when I try to update and to drilldown on the same click it doesn't work because the drilldown seems to occur before I can catch my clicked point value.

Here is a JSFiddle to illustrate my point.

Here's is my js code:

$(function () {
        status_ = [['Ouverts', 896],['En cours',8],['Résolus - Clôs',0],['Ouverts', 3],['En cours',65],['Résolus - Clôs',0],['Ouverts', 427],['En cours',193],['Résolus - Clôs',0],['Ouverts', 48],['En cours',41],['Résolus - Clôs',0],['Ouverts', 2],['En cours',0],['Résolus - Clôs',0],['Ouverts', 38],['En cours',42],['Résolus - Clôs',0],['Ouverts', 244],['En cours',123],['Résolus - Clôs',0],['Ouverts', 5],['En cours',222],['Résolus - Clôs',0],['Ouverts', 441],['En cours',0],['Résolus - Clôs',0],['Ouverts', 259],['En cours',2],['Résolus - Clôs',0],['Ouverts', 16],['En cours',2],['Résolus - Clôs',0],['Ouverts', 6],['En cours',0],['Résolus - Clôs',0]];
        var browserData = [];
        var drillDownSerie = [];

        for (var i = 0; i <18 ; i++) {

            // add browser data
            browserData.push({
                name: i,
                y: i
                //if you uncomment here the drilldown works but not the title update
                //,drilldown: i
            });

            drillDownSerie.push({
                id: i,
                data: [status_[3 * i],
                status_[3 * i + 1],
                status_[3 * i + 2]
            ]
            });
            }

            $('#summary').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Répartition des 3000 derniers tickets'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y}'
                        },
                    point:{
                        events:{
                            click: function(){
                                UpdateTitle(this.y);
                            }
                        }
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
            }, 
            credits : {enabled : false},
            series: [{
                name: 'Département',
                colorByPoint: true,                                     
                data: browserData
            }],
            drilldown: {
                series: drillDownSerie
            }
        });
        var chart =  $('#summary').highcharts();


        function UpdateTitle(argument1) {
           chart.setTitle({
        text: argument1
        })
        }


    })

Answer 1

Why to use click event? Use drilldown and drillup, see:

• drilldown: docs
• drillup: docs