chart.js order data code example

Example 1: chartjs line and bar order

var mixedChart = new Chart(ctx, {
   type: 'bar',
   data: {
       datasets: [{
           label: 'Bar Dataset',
           data: [10, 20, 30, 40],
           // this dataset is drawn below
           order: 2
       }, {
           label: 'Line Dataset',
           data: [10, 10, 10, 10],
           type: 'line',
           // this dataset is drawn on top
           order: 1
       }],
       labels: ['January', 'February', 'March', 'April']
   },
   options: options
});

Example 2: chart js line and bar

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 20, 30, 40],
            // this dataset is drawn below
            order: 1
        }, {
            label: 'Line Dataset',
            data: [10, 10, 10, 10],
            type: 'line',
            // this dataset is drawn on top
            order: 2
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

Example 3: how to sort by data in chart js

const arrayOfObj = chartLabels.map(function (d, i) {
    return {
      label: d,
      data: chartValues[i] || 0,
    }
  })

  const sortedArrayOfObj = arrayOfObj.sort(function (a, b) {
    return b.data - a.data
  })

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