Question

I have a highchart and I simply want to remove a bar from it. Sounds simple, but the remove() method works differently depending on which data point I access.

Something like…

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

…works nicely. Removes the bar and the category associated with the bar. Now a small change:

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

and while the bar is removed the category is not. Trying to modify the categories and use setCategory does not alleviate the issue.

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

What kind of magic do I need to cast to so that pressing “Remove Point 2” properly cleans up the categories array and leaves the correct number of tics on the y-axis?

Answer 1

This appears to be the only solution I could come up with from my searching. Storing your categories and data into arrays, and depending on the index you want to remove splice the data/category out of the arrays and re-set the category/data to the chart causing it to redraw with the new data.

Fiddle Demo: 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);
    }
});