Детализация и обновление заголовка в круговой диаграмме Highcharts

Я работаю над пирогом Highchart. Когда я нажимаю на фрагмент, я хочу получить детализацию и обновить заголовок диаграммы.

Моя развертка работает нормально. Таков мой способ обновить заголовок.

Однако, когда я пытаюсь обновить и развернуть по одному и тому же клику, это не сработает, потому что развертка, кажется, происходит до того, как я смогу уловить значение точки, на которую нажали.

Вот JSFiddle, иллюстрирующий мою точку зрения.

Вот мой js-код:

$(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
        })
        }


    })