Sort a Chart from Lowest to Highest Value in Chart JS

user_17210003 0
Viewed 344

I have this starting code and I'm tryng to figure out how I can sort this data from the highest to the lowest. The code can sort correctly the values but the labels in the yAxis are wrong.

I've tried myself but this code is advanced for me to understand.

Here's the snippet

//after the data is sorted
  let meta = chart.getDatasetMeta(0);
  let newMeta = [];
  let labels = chart.data.labels;
  let newLabels = [];
  

  meta.data.forEach((a, i) => {
    newMeta[dataIndexes[i]] = a;
    newLabels[dataIndexes[i]] = chart.data.labels[i];
  });

  meta.data = newMeta;
  chart.data.datasets[0].data = dataArray;
  chart.data.labels = newLabels;
    }
  }

The full code is here: https://jsfiddle.net/3seduh9k/

yaxis chart.js csv sorting javascript
1 Answers

Here is the update:

if (chart.options.sort) {
      let labels = chart.data.labels;
      let dataArray = chart.data.datasets[0].data.slice();
      let mapValueLabel = {};
      dataArray.forEach((value, index) => {
        mapValueLabel[value] = labels[index];
      });
      // sort data array as well
      dataArray.sort((a, b) => b - a);
      let meta = chart.getDatasetMeta(0);
      let newLabels = [];
      dataArray.forEach((a, i) => {
        newLabels[i] = mapValueLabel[a];
      });
      chart.data.datasets[0].data = dataArray;
      chart.data.labels = newLabels;
        }
      }

Demo: https://jsfiddle.net/woL9ynpv/

My change is simple. I create the map to save value and label:

map{value:label}

After sorting value, we iterate the new list data array and assign label base on the value key.

user_14395600
Related