Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

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

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

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
    series: [{data: [24916, 24064, 29742, 29851, 32490]}, {
   		data: [11744, 17722, 16005, 29851, 20185]}, {
   		data: [null, null, 6988, 29851, 32490]}, {
   		data: [12908, 7948, 8405, 11248, 32490]}],
    plotOptions: {
        series: {
            marker: {enabled: false},
            lineWidth: 1,
            states: {hover: {lineWidth: 4}}
        }
    },
    tooltip: {
        formatter: function() {
            var series = this.series.chart.series,
                resultStr = '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.y + '</b><br/>';

            series.forEach(function(s) {
                if (s !== this.series) {
                    resultStr += '<span style="color:' + s.points[this.point.index].color + '">\u25CF</span><span style="color: #c6c6c6"> ' + s.name + ': ' + s.points[this.point.index].y + '</span><br/>';
                }
            }, this);

            return resultStr;
        }
    }
});