Highcharts Demo

author(s): Torstein Hønsi

by Saurabh Khemka

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Weather Data for Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        
    }],
    
    tooltip: {
        formatter: function() {
        console.log(this)
        		return this.series.userOptions.stack + '<br />' + this.series.name + ':' + this.y + 'bp hike'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 55,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
                name: 'Market Implied',
                data: [1, 2, 3, 4, 5],
                stack: 'US',
                color: '#090533'
            },
            {
                name: 'Market Implied',
                linkedTo: ':previous',
                data: [5, 5, 6, 7, 8],
                stack: 'USA',
                color: '#852369'
            },
            {
                name: 'MS Forecast',
                data: [null, null, null, null, 5, 8, 9, 10, 11],
                stack: 'US',
                color: '#090533',
                dashStyle: 'shortdot'
            },
            {
                name: 'MS Forecast',
                linkedTo: ':previous',
                data: [null, null, null, null, 8, 12, 13, 15, 18],
                stack: 'USA',
                color: '#852369',
                dashStyle: 'shortdot'
            },
            {
                name: 'Historical',
                data: [null, null, null, null, null, 8, 9, 10, 15, 16],
                stack: 'US',
                dashStyle: 'shortdash',
                color: '#090533'
            },
            {
                name: 'Historical',
     ...