Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

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

JavaScript

Highcharts.chart('container', {
    xAxis: [{
        id: 'x-axis-1',
        categories: ['Jan', 'Feb', 'Mar']
    }, {
        id: 'x-axis-2',
        categories: ['Apr', 'May', 'Jun']
    }],
    yAxis: [{
        title: {
            text: 'Primary Axis'
        }
    }, {
        title: {
            text: 'Secondary Axis'
        },
        opposite: true
    }],
    series: [{
        name: 'Series 1 - ref',
        xAxis: 'x-axis-1',
        data: [1, 3, 2]
    }, {
        name: 'Series 2 - ref',
        xAxis: 'x-axis-1',
        data: [4, 2, 5]
    }, {
        name: 'Series 3',
        xAxis: 'x-axis-2',
        data: [6, 5, 4],
        yAxis: 1
    }, {
        name: 'Series 4',
        xAxis: 'x-axis-2',
        data: [7, 3, 6],
        yAxis: 1
    }],
    tooltip: {
        shared: true,
        formatter: function () {
            let tooltipText = '<b>' + this.x + '</b>';
            this.points.forEach(point => {
                tooltipText += '<br/>' + point.series.name + ': ' + point.y;
            });
            return tooltipText;
        }
    }
});