How can I sort data from highest to lowest in chart.js

Question

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

My 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
  }
}
}
});

My Output

My Expected Output

Base on the picture I want my total just like that and have a value of {{$array_non_200_pages[0] }} 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

score 15 · Accepted Answer · answered Oct 12 '18 at 19:35

15

Here is how you can merge and sort data and labels together. first sort them then assign newArrayData to data property and newArrayLabel to labels property of your config object.

arrayLabel = ["Total", "301 Redirect", "Broken Pages (4xx Errors)", "Uncategorised HTTP Response Codes", "5xx Errors", "Unauthorised Pages", "Non-301 Redirects"]

arrayData = [16, 1, 14, 0, 0, 0, 1];

arrayOfObj = arrayLabel.map(function(d, i) {
  return {
    label: d,
    data: arrayData[i] || 0
  };
});

sortedArrayOfObj = arrayOfObj.sort(function(a, b) {
  return b.data>a.data;
});

newArrayLabel = [];
newArrayData = [];
sortedArrayOfObj.forEach(function(d){
  newArrayLabel.push(d.label);
  newArrayData.push(d.data);
});

console.log(newArrayLabel);
console.log(newArrayData);

answered Oct 12 '18 at 19:35

Aagam Jain

1,546
1
10
18

1

Sorry for late response. Thank you so much – Christian Gallarmin Oct 15 '18 at 15:09
4

Hello, this script works in Firefox but does not work in Google Chrome. – Gabriel I. Jan 30 '19 at 20:40
8

The reason why it works on Firefox but not Chrome is sort method. Please use standard way to sort. `return b.data - a.data;` instead of `return b.data>a.data;` – Qingfei Yuan Nov 01 '19 at 20:42
return b.data - a.data; dont work for me. @QingfeiYuan – user3770797 Aug 18 '21 at 11:13
I used this thread about sorting two arrays given values for one https://stackoverflow.com/questions/11499268/sort-two-arrays-the-same-way. – Llama D'Attore Aug 18 '23 at 00:31

How can I sort data from highest to lowest in chart.js

1 Answers1

Linked