title: How can I sort data from highest to lowest in chart.js
body: <p>I'm having some sort of problems regarding on how to sort your data highest to lowest using chart.js? I was using laravel and I used chart.js to display my data, However I don't have any idea how to make an operation to sort my highest value to lowest value (data) in chart.js</p>
  
  <p><strong>My code</strong></p>
  
  <pre><code>var ctx_1 = document.getElementById('non_200_pages').getContext('2d');
  var myChart_1 = new Chart(ctx_1, {
  type: 'horizontalBar',
  data: {
      labels: ["Total","301 Redirect","Broken Pages (4xx Errors)","Uncategorised HTTP Response Codes","5xx Errors","Unauthorised Pages","Non-301 Redirects"],
      datasets: [{
  
          data: [ {{ $array_non_200_pages[0] }}, {{ $array_non_200_pages[1] }}, {{ $array_non_200_pages[2] }}, {{ $array_non_200_pages[3] }}, {{ $array_non_200_pages[4] }}, {{ $array_non_200_pages[5] }}, {{ $array_non_200_pages[6]}} ],
          backgroundColor: [ 
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)',
              'rgba(237, 56, 98, 1.0)'
          ]
  
      }]
  },
  options: {
      showAllTooltips: true,
      tooltips: {
            enabled: true,
            displayColors: false,
            yPadding: 20,
            xPadding: 30,
            caretSize: 10,
            backgroundColor: 'rgba(240, 240, 240, 1)',
            bodyFontSize: 16,
            bodyFontColor: 'rgb(50, 50, 50)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 1,
            cornerRadius: 0,
            yAlign: 'bottom',
            xAlign: 'center',
            position: 'custom',
            custom: function(tooltip) {
              if (!tooltip) return;
              // disable displaying the color box;
              tooltip.displayColors = false;
            },
            callbacks: {
              // use label callback to return the desired label
              label: function(tooltipItem, data) {
                return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
              },
              // remove title
              title: function(tooltipItem, data) {
                return;
              }
          }
      },
      responsive: false,
      legend: { display: false },
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero: true,
              },
              gridLines: {
                  display: false
              },
          }],
          xAxes: [{
              ticks: {
                  stepSize:5,
                  display: false
              },
              gridLines: {
                  drawBorder: false,
              }
          }],
      },
      plugins: {
          datalabels: {
      align: 'end',
      anchor: 'end',        
      backgroundColor: function(context) {
        return context.dataset.backgroundColor;
      },
      borderRadius: 4,
      color: 'white',
      formatter: Math.round
    }
  }
  }
  });
  </code></pre>
  
  <p><strong>My Output</strong>
  <a href="https://i.stack.imgur.com/zUBzq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zUBzq.png" alt="My work"></a></p>
  
  <p><strong>My Expected Output</strong>
  <a href="https://i.stack.imgur.com/lX8Ny.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lX8Ny.png" alt="Expected work"></a></p>
  
  <p>Base on the picture I want my total just like that and have a value of <code>{{$array_non_200_pages[0] }}</code>  Now the problem is I need to sort the following data to make it highest to lowest. How can I do that? Is there someone can help me or guide me the best way to resolve my problem? Sorry for my bad English. Thank you so much</p>