Stacked Column Chart Order

author(s):

by Rajesh Danabal

HTML

<div id="selection-container">
  Select Sorting : <select id="sortOrder" onChange="reDraw();">
  <option value="asc">Asc</option>
  <option value="desc" selected="selected">Desc</option>
</select>
</div>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

JavaScript

function sortColumns() {
  var chart = this,
    pointsByCat = {},
    zeroPixels,
    bottomYPositive,
    bottomYNegative,
    shapeArgs;
  const sortOrderElement = document.getElementById("sortOrder");
  const sortOrder = sortOrderElement.value;

  chart.series.forEach(function(serie) {
    serie.points.forEach(function(point, index) {

      if (pointsByCat[point.category] === undefined) {
        pointsByCat[point.category] = [];
      }

      pointsByCat[point.category].push(point);
    });
  });

  Highcharts.objectEach(pointsByCat, function(points, key) {
    zeroPixels = chart.yAxis[0].toPixels(0) - chart.plotTop;
    bottomYPositive = bottomYNegative = zeroPixels;

    points.sort(function(a, b) {
      return sortOrder === "desc" ? b.y - a.y : a.y - b.y;
    });

    points.forEach(function(point) {
      if (point.series.visible) {
        if (point.shapeArgs.y < zeroPixels) {

          // Positive values
          point.graphic.attr({
            y: bottomYPositive - point.shapeArgs.height
          });

          point.dataLabel.attr({
            y: bottomYPositive - point.shapeArgs.height / 2 - point.dataLabel.height / 2
          });

          point.tooltipPos[1] = bottomYPositive - point.shapeArgs.height;
          bottomYPositive = bottomYPositive - point.shapeArgs.height;
        } else {

          // Negative values
          point.graphic.attr({
            y: bottomYNegative
          });

          point.dataLabel.attr({
            y: bottomYNegative + point.shapeArgs.height / 2 - point.dataLabel.height / 2
          });

          point.tooltipPos[1] = bottomYNegative;
          bottomYNegative = bottomYNegative + point.shapeArgs.height;
        }
      }
    });
  });
}

const chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    animation: {
      duration: 0
    },
    events: {
      load: sortColumns,
      redraw: sortColumns
    }
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
   ...