create legends based on the value of points for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

create legends based on the value of points for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/* ww  w.j a v  a2s  . c  o m*/
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
const data = [10, 20, -30];
const colors = Highcharts.getOptions().colors;
const options = {
  chart: {
    type: 'waterfall'
  },
  series: [{
    // Single series simulating 2 series
    data: data.map(v => v < 0 ? {
      y: v,
      color: colors[0]
    } : {
      y: v,
      color: colors[3]
    }),
    stacking: 'normal',
    showInLegend: false
  }, {
    color: colors[3],
    data: [10, 20, 0],
    visible: false,
    stacking: 'normal',
    showInLegend: false
  }, {

    color: colors[0],
    data: [0, 0, -30],
    visible: false,
    stacking: 'normal',
    showInLegend: false
  }, {
    name: 'Series 1',
    color: colors[3],
    stacking: 'normal',
    events: {
      legendItemClick: function(e) {
        const series = this.chart.series;
        const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length;
        if (this.visible) {
          if (invisibleCount === 1) {
            series[0].hide();
            series[1].hide();
            series[2].hide();
          } else {
            series[0].hide();
            series[2].show();
          }
        } else if (invisibleCount === 2) {
          series[0].hide();
          series[1].show();
        } else {
          series[0].show();
          series[2].hide();
        }
      }
    }
  }, {
    // Empty serie for legend item
    name: 'Series 2',
    color: colors[0],
    stacking: 'normal',
    events: {
      legendItemClick: function(e) {
        const series = this.chart.series;
        const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length;
        if (this.visible) {
          if (invisibleCount === 1) {
            // hide all
            series[0].hide();
            series[1].hide();
            series[2].hide();
            return;
          }
          series[0].hide();
          series[1].show();
        } else {
          if (invisibleCount === 2) {
            series[0].hide();
            series[2].show();
            return;
          }
          series[0].show();
          series[1].hide();
        }
      }
    }
  }]
}
const chart = Highcharts.chart('container', options);
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials