Highcharts remove () Inconsistencies

Question

I have a highchart and I just want to remove the panel from it. It sounds simple, but the remove () method works differently depending on which data point I am accessing.

Sort of...

chart.series[0].data[0].remove(); 

... works beautifully. Deletes the strip and category associated with the bar. Now a little change:

 chart.series[0].data[1].remove(); 

while the panel is removed, the category is missing. Trying to change categories and use setCategory does not alleviate the problem.

Please see: http://jsfiddle.net/FxY63/2/

What magic do I need to throw in order to click "Delete point 2", correctly clears the array of categories and leaves the correct number of ticks along the y axis?

Answer 1

This seems to be the only solution I could find in my search. By storing your categories and data in arrays and depending on the index, you want to remove data / category splicing from arrays and reinstall the category / data in the chart, forcing it to redraw with new data.

Demo Screenshot: http://jsfiddle.net/3dcbY/

 var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]; // button handler $('#button1').click(function() { var series = chart.series[0]; if (series.data.length) { categories.splice(0,1); data.splice(0,1); series.setData(data); chart.xAxis[0].setCategories(categories); } }); // button handler $('#button2').click(function() { var series = chart.series[0]; if (series.data.length) { categories.splice(1,1); data.splice(1,1); series.setData(data); chart.xAxis[0].setCategories(categories); } });