Chart.js Not Resorting Rows Based On Plugin After Using Update Function

I'm displaying a stacked bar chart on my page. When I initialize the table, I sort the data so that it is displayed in descending order by total in each dataset. To do this, I'm us

Solution 1:

The sorting is quite complexe because you can't simply change the data, you need to know the order for the labels as well. You find my code in the JSBin. I hope this is what you want.

Complete code:

let chartOptions = {
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      stacked: true
    }]
  }
}

let chartData = {
  labels: ["FirstValue", "SecondValue", "ThirdValue", "FourthValue"],
  datasets: [{
    label: 'FirstDataset',
    data: [12, 55, 33, 85],
    backgroundColor: 'red'
  },{
    label: 'SecondDataset',
    data: [95, 15, 73, 5],
    backgroundColor: 'blue'
  },{
    label: 'ThirdDataset',
    data: [38, 17, 73, 45],
    backgroundColor: 'green'
  },{
    label: 'FourthDataset',
    data: [49, 89, 33, 85],
    backgroundColor: 'orange'
  }]
}

let sortedData = sortData(chartData)

let ctx = document.getElementById("myChart");
let stackedBar = newChart(ctx, {
  type: 'bar',
  data: sortedData,
  options: chartOptions
});

functionsortData(chartData) {
  console.log('#############')
  console.log('beforeSort', chartData)
  let arraySum = []
  let sortedData = {}
  sortedData.labels = []
  sortedData.datasets = []

  // Calculate the total sum of all datasets for each labelfor (let i = 0; i < chartData.labels.length; i++) {
    let dataSum = 0
    chartData.datasets.map(obj => {
      dataSum += obj.data[i]
    })
    arraySum.push(dataSum)
  }
  //console.log("Data sum", arraySum)// Get a lookup-table with the order of the labelslet arrayLookupTable = []
  for (let i = 0; i < chartData.labels.length; i++) {
    let index = arraySum.indexOf(Math.max.apply(null,arraySum))
    arrayLookupTable.push(index)
    arraySum[index] = -1
  }
  //console.log("arrayLookupTable", arrayLookupTable)// Assign the sorted labelsfor (let i = 0; i < chartData.labels.length; i++) {    
    sortedData.labels.push(chartData.labels[arrayLookupTable[i]])
  }

  // Assign the sorted datasetsfor (let i = 0; i < chartData.datasets.length; i++) {
    sortedData.datasets.push(chartData.datasets[i])
    //previous line copies complete dataset with old data which gets sorted in the next line
    sortedData.datasets[i].data = changeDataOrder(sortedData.datasets[i].data, arrayLookupTable)
  }

  console.log("afterSort", sortedData)
  return sortedData
}

functionchangeDataOrder(previousDataArray, arrayLookupTable) {
  //console.log('changeDataOrder', previousDataArray, arrayLookupTable)let newDataArray = []
  for (let i = 0; i < arrayLookupTable.length; i++) {
    newDataArray.push(previousDataArray[arrayLookupTable[i]])
  }
  return newDataArray
}

functionupdateChart() {
  chartData.datasets.forEach(function(element) {
    element.data = r(chartData.labels.length);
  });

  let updatedChart = sortData(chartData)
  stackedBar.config.data.labels = updatedChart.labels; //labels have to be updated separately
  stackedBar.update();
}

functionr(length) {
  let values = [];
  for (i = 0; i < length; i++) { 
    values.push(Math.floor(Math.random() * 100));
  }
  return values;
}