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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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.