use points or series for the legend item depending on legendType - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

use points or series for the legend item depending on legendType

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) {//from   w ww.  j av a2 s .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;
        
        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.leftLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.legendLeft, {
      legendID: 0
    }));
    chart.rightLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.legendRight, {
      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', {
  legend: {
    verticalAlign: 'top'
  },
  legendLeft: {
    align: 'left'
  },
  legendRight: {
    align: 'right'
  },
  series: [{
    data: [5, 6, 7],
    legendID: 0,
  }, {
    data: [1, 8, 2],
    legendID: 1,
  }]
});

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

Related Tutorials