Highcharts - How to sort data by name?

Question

I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.

I've done some research and it appears that the code below is what I need

              dataSorting: {
                enabled: true,
                matchByName: true
            },

but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?

Here is a jsfiddle

My code:

let data = [10, 31, 13, 19, 21, 50, 10]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
    formatter: function() {
      return this.value + "%";
    },
    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Low',
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }, {
    name: 'Medium-Low',
    color: '#0B7070',
    data: [data[2]]
  }, {
    name: 'Medium',
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Low',
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, 
  {
    name: 'Medium-High',
    color: '#DD5F0C',
    data: [data[4]]
  }, {
    name: 'High',
    color: '#C50710',
    data: [data[5]]
  }]
});

---

Current look:

---

Desired look:

Answer 1

You can use the index feature to define the affecting the order of rendering.

Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/

  series: [{
    name: 'Low',
    index: 4,
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }, {
    name: 'Medium-Low',
    index: 3,
    color: '#0B7070',
    data: [data[2]]
  }, {
    name: 'Medium',
    index: 2,
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Low',
    index: 5,
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, 
  {
    name: 'Medium-High',
    index: 1,
    color: '#DD5F0C',
    data: [data[4]]
  }, {
    name: 'High',
    index: 0,
    color: '#C50710',
    data: [data[5]]
  }]

API: https://api.highcharts.com/highcharts/series.line.index

Answer 2

You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.

Following this

    let data = [10, 31, 13, 19, 21, 50, 10]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
    formatter: function() {
      return this.value + "%";
    },
    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'sorted'
    }
  },
  series: [{
    name: 'High',
    color: '#C50710',
    data: [data[5]]

  }, {
    name: 'Medium-High',
    color: '#DD5F0C',
    data: [data[4]]

  }, {
    name: 'Medium',
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Medium-Low',
    color: '#0B7070',
    data: [data[2]]

  }, 
  {
    name: 'Low',
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, {
    name: 'Low',
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }]
});

I got this result: