Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<div id="container" style="height: 400px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>

JavaScript

function resort() {

  function sort(dataL, dataS) {
    return (dataS.y < dataL.y ? -1 : dataS.y > dataL.y ? 1 : 0);
  }

  function label() {
    return (this.point.high - this.point.low).toString();
  }

  function tooltip() {
    return this.key + ': ' + (this.point.high - this.point.low);
  }


  var allSeries = this.options.series,
    colors = this.options.colors,
    firstSeries = allSeries[0],
    stackingMatrix = [];

  Highcharts.each(allSeries, function(series, sIndex) {
    Highcharts.each(series.data, function(point, pIndex) {
      if (sIndex == 0) {
        stackingMatrix[pIndex] = [{
          series: sIndex,
          y: point
        }];
      } else {
        stackingMatrix[pIndex].push({
          series: sIndex,
          y: point
        });
      }
    });
  });


  var stackData = [];

  Highcharts.each(stackingMatrix, function(stack, index) {
    var stackY = 0;
    stack = stackingMatrix[index].sort(sort);
    Highcharts.each(stack, function(point) {
      stackData.push({
        color: colors[point.series],
        dataLabels: {
          align: 'center',
          enabled: true,
          formatter: label,
          inside: true,
          verticalAlign: 'middle'
        },
        low: stackY,
        high: (stackY + point.y),
        name: allSeries[point.series].name,
        x: index
      });
      stackY = (stackY + point.y);
    });
  });

  this.update({
    tooltip: {
      formatter: tooltip
    },
    series: [{
      type: 'columnrange',
      data: stackData
    }, {
      data: []
    }, {
      data: []
    }]
  });

}

Highcharts.chart('container', {
  chart: {
    type: 'column',
    stacking: 'normal',
    events: {
      load: resort
    }

  },

  title: {
    text: ''
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['data', 'Emails', 'Duplicates', 'Support'],
    lineWidth: 1,
    gridLineWidth: 0
  },

  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
       ...