I have a barchart with 3 levels (2 drilldown levels), which works perfectly. Now I want to add a linechart to the third level, which I’m doing by using the drilldown event. So I have a counter (“betriebskostendrill”) and when that counter is on 2, which means that I’m on the last level of my data I use the addSeries() function to add the new series to my chart. Unfortunately this does not work. I can see all the debug logs in the console, which means the addseries function gets called, but I still don’t see it in my chart.

The strange thing is, that if I call the addSeries() function on the first or second level it works perfectly fine.

The data for the chart is a series, which has a drilldown series, and that drilldown series has another series, which gives my 3 levels of barcharts and that works. Only the linechart won’t show on the third level.

Do you guys have any ideas what the problem could be?

var betriesbkostenData = JSON.parse(args.betriebskosten);

    Highcharts.chart('betriebskostendiv', {
        chart: {
            type: 'pie',
            backgroundColor: '#EFF7FF',
            events: {
                drilldown: function(e) {
                        this.setTitle({text: 'Betriebskostenquote'});
                        betriebskostendrill++;

                        if(betriebskostendrill === 2) {
                            var chart = $('#betriebskostendiv').highcharts();
                            chart.addSeries({
                                name: 'Added',
                                data: [1, 2, 3],
                                type: 'line'
                            });
                            console.log('drilldown called...');
                            /*var b = document.getElementById("button");
                            b.click();*/
                        }
                        console.log(betriebskostendrill);
                },
                drillup: function(e){
                    betriebskostendrill--;
                    console.log(betriebskostendrill);
                    if (betriebskostendrill===1){
                        this.setTitle({text: 'Betriebskostenquote'});
                        removelinedata('#betriebskostendiv');
                    }
                }
            }
        },
        title: {
            text: 'Betriebskostenquote'
        },
        xAxis: {
            type: 'category',
            lineWidth: 0    //for drillup bug
        },
        yAxis: {
            title: {
                text: ""
            }
        },
        plotOptions:{
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (event) {
                            if (this.name != null) {
                                if (this.options.url!=null){
                                    window.open(this.options.url);
                                }
                            }
                        }
                    }
                },
                minPointLength: 3
            },
            pie: {
                dataLabels: {
                    style: {
                        fontSize: '15px'
                    }
                }
            }
        },
        tooltip: {
            shared: true,
            useHTML: true,
            formatter: function () {
                switch (betriebskostendrill){
                    case 0: {
                        //return '<span style="color:{'+this.point.color+'}">'+this.point.name+'</span>: <b>'+this.point.y+'</b><br/>';
                    }
                    case 1:
                    case 2:{
                        /*var quote = this.points[0].y;
                        var umsatz = this.points[0].total;
                        var betriebskosten = this.points[0].percentage;
                        var tooltipMarkup = "";
                        tooltipMarkup += 'Betriebskostenquote: <b>'+Highcharts.numberFormat(quote, 2)+'%</b></br>';
                        tooltipMarkup += 'Betriebskosten: <b>€ '+Highcharts.numberFormat(betriebskosten, 0)+'</b></br>';
                        tooltipMarkup += 'Umsatz: <b>€ '+Highcharts.numberFormat(umsatz, 0)+'</b></br>';
                        return tooltipMarkup;*/
                    }
                }
            }
        },
        series: betriesbkostenData.series,
        drilldown: betriesbkostenData.drilldown,
        credits: {
            enabled: false
        },
        exporting:{
            url:'https://export.highcharts.com/'
        }
    });```