title: Highcharts - How to sort data by name?
body: <p>I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories <code>Low, Medium Low, Medium, Medium High and High</code> I would like to sort the data being returned from the graph by category name by descending order having <code>Low</code> be the starting point. For example, all <code>Low</code> data appears first in the graph, all <code>Medium Low</code>, all <code>Medium</code> appears next and so on. </p>
  
  <p>I've done some research and it appears that the code below is what I need</p>
  
  <pre><code>              dataSorting: {
                  enabled: true,
                  matchByName: true
              },
  </code></pre>
  
  <p>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?</p>
  
  <p>Here is a <a href="https://jsfiddle.net/52pwy1tk/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>My code: </p>
  
  <pre><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]]
    }]
  });
  </code></pre>
  
  <hr>
  
  <p>Current look: </p>
  
  <p><a href="https://i.stack.imgur.com/vR3oP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vR3oP.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>Desired look: </p>
  
  <p><a href="https://i.stack.imgur.com/Plf3h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Plf3h.png" alt="enter image description here"></a></p>