Search code examples
amchartsamcharts4

amCharts 4: Is it possible to sort categories of stacked column chart by totals


Is it possible to sort the categories of a category column chart with multiple stacked series by their totals?

I know that CategoryAxis has the property sortBySeries but this allows only sorting by one specific series. Is there any equivalent for all series or a workaround like creating a not visible total series?

(Presorting data is not the best choice for me, since I would like to use chart.invalidateRawData later on and sorting must also done then.)


Solution

  • The current solution I ended up with is to programmatically add a _calcTotal attribute to each object in chart.data. The value of this attribute is calculated by adding all values of all value-dataattributes.
    e.g. when a single data item looks like this:

    {
      country: 'Germany',
      femaleVisitors: 2550,
      maleVisitors: 6029
    }
    

    and two stacked series for maleVisitors and femaleVisitors are created then the updated data item would look like this:

    {
      country: 'Germany',
      femaleVisitors: 2550,
      maleVisitors: 6029,
      _calcTotal: 8579
    }
    

    This calculations can be done for example when the beforedatavalidated event kicks in and every time you update the data. Then we create a new column-series with _calcTotal as value-datafield and set hidden attribute on this series to true.

    This series can now be used for sorting by using categoryAxis.sortBySeries property.

    However amcharts doesn't sort the categories initially when the referenced sorting-series is hidden and a lot of different categories are used (> ~15). A workaround is to call invalidateRawData when the chart fires the ready event. This leads to a dirty initial sorting animation, but hey, better than nothing.

    JSFiddle: https://jsfiddle.net/0nr3g6es/1/