highcharts - How to sort xAxis category by total?

Question

Is there a way to order this highchart chart by total?

https://jsfiddle.net/bsvLnnxv/3/

The final result expected in this case should be:

Name 1 -> 19

Answer 1

I found the solution!

Highcharts doesn't have a property to sort the data automatically, so you must fill all series data previously sorted.

Another point of attention: if you don't have a value you will need to set the value as 0 to make sure that all categories have the same quantity of elements.

https://jsfiddle.net/bsvLnnxv/4/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Highchart test'
            },
            stackLabels: {
              enabled: true,
              style: {
              	fontWeight: 'bold'
            	}
           }
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'AAA',
            data: [{
                name: 'Name 1',
                y: 5,
                drilldown: 'Name1AAA'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 2
            }, {
                name: 'Name 2',
                y: 2
            }]
        }, {
            name: 'BBB',
            data: [{
                name: 'Name 1',
                y: 10,
                drilldown: 'Name1BBB'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 0
            }, {
                name: 'Name 2',
                y: 5
            }]
        }, {
            name: 'CCC',
            data: [{
                name: 'Name 1',
                y: 4,
                drilldown: 'Name1CCC'
            }, {
                name: 'Name 4',
                y: 12
            }, {
                name: 'Name 3',
                y: 8
            }, {
                name: 'Name 2',
                y: 1
            }]
        }],
        
        drilldown: {
            series: [{
                name: 'Name 1 - AAA',
                id: 'Name1AAA',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - BBB',
                id: 'Name1BBB',
                data: [
                    ['Name 1/1', 7],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - CCC',
                id: 'Name1CCC',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 3],
                    ['Name 1/3', 4],
                ]
            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

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