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/
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.