Highcharts - Removing All Series Data

Properly remove all data from the chart

by Scott Engemann

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" class="chart"></div>

<button class="addSeries">Add Series</button>
<button class="remove" disabled>Remove All Series</button>

CSS

.chart {
    height: 325px;
    margin-top: 20px;
}

JavaScript

$(function() {
    var randomData = function() {
        var len = 6;
        var dataArray = [];
        for(var i = 0; i < len; i++) {
            // Push a random integer between 0 and 10 into the array
            dataArray.push(Math.floor(Math.random() * (10 - 0 + 1)) + 0);
        }
        return dataArray;
    };
    
	$('#container').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            formatter: function() {
                var s = '<b>' + this.x + '</b>';
                $.each(this.points, function(i, point) {
                    s += "<br /><b>" + point.series.name + ':</b> ' + point.y;
                });
                return s;
            }
        },
        yAxis: {
            max: 10
        },
	    series: [{
	        data: randomData()
	    }]
	});
    
    $('.addSeries').click(function() {
        
        var chart = $('#container').highcharts();
        chart.addSeries({
            type: 'column',
            data: randomData()
        });
        $('.remove').removeAttr('disabled');
    });
    
	$('.remove').click(function() {
		var chart = $('#container').highcharts();
        var seriesLength = chart.series.length;
        for(var i = seriesLength -1; i > -1; i--) {
            chart.series[i].remove();
        }
		this.disabled = true;
	});
});