Highcharts Stock Demo

author(s): Paweł Fus

by Sascha

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

JavaScript

// Create the chart
Highcharts.stockChart('container', {

    chart: {
        type: 'column'
    },

    rangeSelector: {
        selected: 2
    },

    title: {
        text: 'AAPL Stock Price'
    },

    subtitle: {
        text: 'Use navigator to compare column groupings'
    },

    yAxis: [{
        height: '50%'
    }, {
        top: '50%',
        height: '50%'
    }],

    plotOptions: {
        series: {
            tooltip: {
                valueDecimals: 2
            },
            dataGrouping: {
                enabled: true,
                forced: true,
                units: [
                    ['month', [1, 2, 6, 8]]
                ]
            }
        }
    },

    series: [{
        name: 'AAPL',
        data: ADBE,
        cropShoulder: 1,
        dataGrouping: {
            groupAll: true
        }
    }, {
        name: 'AAPL',
        data: ADBE,
        yAxis: 1,
        dataGrouping: {
            // Default:
            // groupAll: false
        }
    }]
});