Highcharts Demo

author(s): Torstein Hønsi

by Vijay Kadam

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: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
         marginTop: 50
    },
    title: {
        text: null
    },
    xAxis: {
    type: 'category'
        //categories: [
        //    'Jan',
        //    'Feb',
        //    'Mar',
        //    'Apr',
        //    'May',
        //    'Jun',
        //    'Jul',
        //    'Aug',
        //    'Sep',
        //    'Oct'
       // ]
        //crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        formatter: function() {
            console.log(this);
            let percentageTotal = 0;
            let tooltipElement = [];
            this.points.forEach(function(point){
            percentageTotal = percentageTotal + point.y;
            });
            tooltipElement.push('<span>'+this.points[0].point.name+'</span><br>');
            this.points.forEach(function(point){
            tooltipElement.push('<span style="color:'+ point.color +'">'+point.series.name+'</span>: <b>'+point.y+'</b> ('+(point.y / percentageTotal * 100).toFixed(2)+'%)<br>');
            });
            return tooltipElement;
          },
        shared: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [{name:'Jan',y:49.9}, {name:'Feb',y:71.5}, {name:'Mar',y:106.4}, {name:'Apr',y:129.2}, {name:'May',y:144.0}, {name:'Jun',y:176.0}, {name:'Jul',y:135.6}, {name:'Aug',y:148.5}, {name:'Sep',y:216.4}, {name:'Oct',y:194.1}]

    }, {
        name: 'New York',
        data: [{name:'Jan',y:83.6}, {name:'Feb',y:78.8}, {name:'Mar',y:98.5}, {name:'Apr',y:93.4}, {name:'May',y:106.0}, {name:'Jun',y:84.5}, {name:'Jul',y:105.0}, {name:'Aug',y:104.3}, {name:'Sep',y:91.2}, {name:'Oct',y:83.5}]

    }, {
        name: 'London',
        data: [{name:'Jan',y:48.9}, {name:'Feb',y:38.8}, {name:'Mar',y:39.3},...