Highcharts Demo

author(s): Torstein Hønsi

by Bernat Comerma

HTML

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

<div id="container1"></div>
<div id="container2"></div>

JavaScript

Highcharts.setOptions({
  series: [{
            name: "line1",
            composition: {
                "data1": [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
            },
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: "line2",
            composition: {
                "data1": [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            },
            data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
        }],
        tooltip: {
            shared: false,
            formatter: function() {
                var serie = this.series;
                //NOTE: may cause efficiency issue when we got lots of points, data in series
                //should be change from [x, y] to {"x": x, "y": y, "index": index}
                var index = this.series.data.indexOf(this.point);
                var s = '<b>' + this.x + '</b><br>';
                s += '<span style="color:' + serie.color + '">' + serie.options.name + '</span>: <b>' + this.y + '</b><br/>';
                $.each(serie.options.composition, function(name, value) {
                    s += '<b>' + name + ':</b> ' + value[index] + '<br>';
                });
                return s;
            }
        }
});

Highcharts.chart('container1', {
  chart: {
    type: 'line'
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});