Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 320px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

$("#container").highcharts({
    chart: {
        type: 'area',
        events: {
            load: function() {
                var series = this.series[1],
                    lastPoint = series.data[series.data.length - 1];

                series.addPoint({
                    x: lastPoint.x + 100,
                    y: lastPoint.y
                }, false);
                this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
            }
        }
    },

    plotOptions: {
        area: {
            stacking: 'normal',
            step: 'left',
            threshold: -2.5
        }
    },
    series: [{
        name: "Example 1",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
    }, {
        name: "Example 2",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
    }]
});