Chart.js Show Data In Chronological Order

I have a chart using Chart.js but regardless of what order I put the input data it is outputted out of order, here is a fiddle: As you can see it shows 01/20 and then 12/19 when i

Solution 1:

You can use moment.js to parse and help sorting the dates.

const labels = Array.from(newSet(response.map(c => c.mmyy))).sort((d1, d2) =>moment(d1, 'MM/YY').diff(moment(d2, 'MM/YY')));

This results in the following runnable code snippet.

const response = [ 
   { 
      "mmyy":"12/19",
      "promocode":"promo1",
      "amount":"2776"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo1",
      "amount":"1245"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo2",
      "amount":"179"
   }
];

var chartColors = window.chartColors;
var color = Chart.helpers.color;

const colors = [color(chartColors.red).alpha(0.5).rgbString(),
            color(chartColors.orange).alpha(0.5).rgbString(),
            color(chartColors.yellow).alpha(0.5).rgbString(),
            color(chartColors.green).alpha(0.5).rgbString(),
            color(chartColors.blue).alpha(0.5).rgbString()]; 
const labels = Array.from(newSet(response.map(c => c.mmyy))).sort((d1, d2) =>moment(d1, 'MM/YY').diff(moment(d2, 'MM/YY')));
const promocodes = Array.from(newSet(response.map(c => c.promocode))).sort();
let i = 0; 
const datasets = promocodes.map(pc => ({
  label: pc,
  data: [],
  backgroundColor: colors[i++]
}));
labels.forEach(l => {
  for (let pc of promocodes) {
    let city = response.find(c => c.mmyy == l && c.promocode == pc);
    datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
  }
});

var ctx = document.getElementById('promorChart').getContext('2d');

var chartColors = window.chartColors;
var color = Chart.helpers.color;

var promorChart = newChart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: datasets
    },

    options: {
     
        scales: {
            xAxes: [{
              stacked: false
            }],
            yAxes: [{
              stacked: false,
                ticks: {
                    // Include a dollar sign in the tickscallback: function(value, index, values) {
                        return'$' + value;
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return"$" + tooltipItems.yLabel.toString();
                }
            }
        },
        responsive: true,
        elements: {
        }
    }
});

<canvasid="promorChart"></canvas><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><scriptsrc="https://www.chartjs.org/samples/latest/utils.js"></script>

Solution 2:

You can use reverse for this

...
scales: {
  xAxes: [{
    stacked: false,
    reverse: true// ADD THIS LINE
  }],
  yAxes: [{
    stacked: false,
    ticks: {
      // Include a dollar sign in the tickscallback: function(value, index, values) {
        return'$' + value;
      }
    }
  }]
},
...