Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    events: {
      render: function() {
        var chart = this,
          legend = chart.legend;

        var lines = [],
          itemY = null,
          index = 0,
          legendWidth = legend.legendWidth;

        legend.allItems.forEach(function(item) {
          if (item._legendItemPos[1] === itemY) {
            lines[index].items.push(item);
            lines[index].width += item.itemWidth;
          } else {
            itemY = item._legendItemPos[1];
            index = lines.push({
              items: [item],
              y: itemY,
              width: item.itemWidth
            }) - 1;
          }

        });
        lines.forEach(function(line) {
          var offset = (legendWidth - line.width) / 2;
          line.items.forEach(function(item) {
            item.legendGroup.attr({
              translateX: offset + item._legendItemPos[0]
            });
          });
        });
      }
    }
  },

  legend: {
    borderWidth: 1,
    alignColumns: false
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [1, 2],
    name: 'Series 1'
  }, {
    data: [11, 22],
    name: 'Series long name'
  }, {
    data: [1, 2],
    name: 'Series even longer name'
  }, {
    data: [11, 22],
    name: 'Series 2'
  }, {
    data: [1, 2],
    name: 'Series 3'
  }, {
    data: [11, 22],
    name: 'Series 4'
  }, {
    data: [11, 22],
    name: 'Series 4'
  }, {
    data: [11, 22],
    name: 'Series 4'
  }]
});