Highcharts bars are half missing after drillup

Question

I am loading a bar chart with dynamic data. On clicking any bar it drills down to line chart made from dynamic data. Problem is when I click on Back button, bars are not showing properly. They cutting in half as shown in image. But when chart is scrolled a little, all bars appears nicely.charts image shows four charts in step by step order.

1. When I clicks a bar, it drills down to line chart.
2. On clicking Back button, bar chart appears with incomplete bars.
3. On scrolling little bars appear correctly.

Following is the code sample:

Highcharts.chart(div_id, {
    chart: {
        type: type,
        height: height,
        width: 800,
        inverted:true,
        events: {
            drilldown: function (e) {
                if (drill=="yes"){
                    if (!e.seriesOptions) {
                        var chart = this;
                        chart.inverted = false;
                        chart.showLoading('Loading ...');
                        var node=e.point.name.toLowerCase();
                        drill_ajax(x,y,z).done(function(r){
                            temp=r["dropdowns"];
                            dropdownlines=r["drilldownsLines"];
                            selected_valforpatdata=e.point.name.toLowerCase();
                            var seriesLine = dropdownlines[e.point.name];
                            var max_len=seriesLine.data.length;
                            var points = []
                                seriesLine.data.forEach(function (theData) {
                                    points.push(theData[1]);
                                });
                            chart.legend.update({enabled:true});
                            chart.xAxis[0].update({max:(max_len > 7) ? 7 : max_len-1});
                            chart.yAxis[0].update({
                                max: Math.max.apply(Math, points)
                            });
                            chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
                            chart.applyDrilldown();
                            chart.hideLoading();
                        });

                    }
                }
            },
            drillup: function(e,x){
                var chart = this;
                chart.inverted = true;
                chart.legend.update({enabled:false});
                chart.xAxis[0].update({max:(data['category'].length > 7 ) ? 7 : (data['category'].length - 1)});
                var points = []
                this.series.forEach(function (entry) {
                    entry.data.forEach(function (theData) {
                        points.push(theData.y);
                    });
                });
                this.yAxis[0].update({
                    max: Math.max.apply(Math, points)
                });
            },
            load: function () {
                var points = []
                this.series.forEach(function (entry) {
                    entry.data.forEach(function (theData) {
                        points.push(theData.y);
                    });
                });
                this.yAxis[0].update({
                    max: Math.max.apply(Math, points)
                });
            }
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        type: "category",
        allowDecimals: false,
        scrollbar: {
            enabled: true,
        },
        labels:{
            formatter: function () {
              var text = this.value,
                formatted = text.length > 20 ? text.substring(0, 20) + '...' : text;
                return '<div class="js-ellipse" title="' + text + '">' + formatted + '</div>';
            },
        },
        max:(data['category'].length > 7 ) ? 7 : (data['category'].length - 1), 
        min:0
    },
    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: y_text
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],
    },
    tooltip: {
        footerFormat: '',
        shared: true,
        useHTML: true,
        backgroundColor: 'rgba(247,247,247,1)',
    },
    legend:{
        enabled:false
    },
    credits:{
        enabled:false
    },
    plotOptions: {
        color: "#53c68c",
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            name:titleCase(chart_for),
            stacking: 'normal',
            pointWidth: 20,
            color: barColor,
        },
    },
    series: [{
        title: title,
        data: data['data']
    }],

    drilldown: {
        series: []
    }
});

Answer 1

Problem can be resolved by setting column animation to false under plotOptions:

plotOptions: { column: { animation:false } }