Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var series = [{
  name: 'John',
  color: 'red',
  data: [{
    x: 0,
    y: 5
  }, {
    x: 1,
    y: 5
  }],
  stack: 'male'
}, {
  name: 'Joe',
  color: 'blue',
  data: [{
    x: 0,
    y: 3
  }, {
    x: 1,
    y: 4
  }],
  stack: 'male'
}, {
  name: 'Pete',
  color: 'orange',
  data: [{
    x: 0,
    y: 2
  }, {
    x: 1,
    y: 7
  }],
  stack: 'male'
}];

function prepareSeries(series) {
  var newSeriesArr = [];
  series.forEach(function(series) {
    // create new series for every point
    series.data.forEach(function(point) {
      var newSeries = {};
      for (prop in series) {
        if (prop !== 'data') {
          newSeries[prop] = series[prop]; // copy properties to a new series
        }
      }
      newSeries.data = [point];

      // eliminate duplicates in the legend
      newSeries.showInLegend = typeof newSeriesArr.find((s) => s.name === newSeries.name) === 'object';

      newSeriesArr.push(newSeries);
    });
  });
  newSeriesArr.sort(function(s1, s2) {
    return s2.data[0].y - s1.data[0].y;
  });
  return newSeriesArr;
}


var chart = Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  xAxis: {
    tickInterval: 1
  },

  yAxis: {
    allowDecimals: false,
    min: 1,
    title: {
      text: 'Number of fruits'
    },
    type: 'logarithmic'
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      events: {
        legendItemClick: function() {
          var chart = this.chart,
            series = this,
            hide = !this.visible;

          chart.series.forEach(function(s) {
            if (series.name === s.name) {
              s.update({
                visible: hide
              }, false);
            }
          });

          chart.redraw();
          return false;
        }
      }
    }
  },

  series:...