Add line break to legend - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Add line break to legend

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Graph 3</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
(function(H) {//w  w w . jav  a  2s.c o m
  var merge = H.merge;
  H.wrap(H.Legend.prototype, 'getAllItems', function() {
    var allItems = [],
      chart = this.chart,
      options = this.options,
      legendID = options.legendID;
    H.each(chart.series, function(series) {
      if (series) {
        var seriesOptions = series.options;
        // use points or series for the legend item depending on legendType
        if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) {
          allItems = allItems.concat(
            series.legendItems ||
            (seriesOptions.legendType === 'point' ?
              series.data :
              series)
          );
        }
      }
    });
    return allItems;
  });
  H.wrap(H.Chart.prototype, 'render', function(p) {
    var chart = this,
      chartOptions = chart.options;
    chart.topLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.topLegend, {
      legendID: 0
    }));
    chart.bottomLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.bottomLegend, {
      legendID: 1
    }));
    p.call(this);
  });
  H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) {
    var chart = this;
    p.call(chart, r, a);
    chart.leftLegend.render();
    chart.rightLegend.render();
  });
  H.wrap(H.Legend.prototype, 'positionItem', function(p, item) {
    p.call(this, item);
  });
})(Highcharts);
Highcharts.chart('container', {
   chart: {
     marginBottom: 100
  },
  legend: {
    align: 'left',
    x: 300
  },
  topLegend: {
  },
  bottomLegend: {
    //align: 'right'
    y: -20
  },
  series: [{
    data: [5, 6, 7],
    legendID: 1,
  }, {
    data: [1, 8, 2],
    legendID: 0,
  }, {
    data: [8, 2],
    legendID: 0,
  }, {
     data: [1, 2, 1],
    legendID: 0
  }]
});

      </script>  
   </body>
</html>

Related Tutorials