Question

I’m having an issue with updating a highcharts chart when the new data has fewer columns (categories) than it had previously.

Fiddle: http://jsfiddle.net/ggoforth/bZAF7/

Consider I have a chart like:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        categories: ['pizza', 'french fries']  
    },
    series: [{
        data: [55, 32]   
    }]
});

This will render a column chart with two columns. Then, via some button I do:

chart.series[0].setData([55, 32, 17], false);
chart.xAxis[0].setCategories(['pizza', 'french fries', 'nachos'], false);
chart.redraw();

This will then update the chart to have three columns. This all works just fine. However, if at a later time, I then refresh the chart with 2 columns again:

chart.series[0].setData([55, 32], false);
chart.xAxis[0].setCategories(['pizza', 'french fries'], false);
chart.redraw();

I get the error “options is undefined”. This is reproducible, and there is a fiddle demonstrating the issue here: http://jsfiddle.net/ggoforth/bZAF7/

Is there some kind of “reset” I need to do on the chart first before setting the new data? Like I said, it works when going from 2 columns -> 3 columns, but not vice versa.

Thanks for any help!

Answer 1

You can remove the following line:

chart.xAxis[0].setCategories(['pizza', 'french fries'], false);

Demo

So as you can see, the problem is that your new data can’t have less than your categories number, so you have to update your categories first than your serie. Like the following example.
http://jsfiddle.net/bZAF7/6/

So, to solve this problem you have to reverse the following lines.

chart.series[0].setData([55, 32], false);
chart.xAxis[0].setCategories(['pizza', 'french fries'], false);

Update: As Greg said on the comments, it’s a bug from Highcharts https://github.com/highslide-software/highcharts.com/issues/970 probably it’s fixed on the newest Highcharts release.