'ChartJS - Scale x axis labels from single days to multiple months

I want to create a line chart which has multiple single days as labels on the x axis. This actually works just fine. I am passing it this javascript array for the x_axis(example):

['2019-01-02', '2019-01-03', '2019-01-04', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-14', '2019-01-15', '2019-01-16']

The problem is, the chart can have 50 different x axis points and so it doesn't make sense to display all those at the same time because it over populates the x axis.

I would like to instead scale that so that it only uses the months on the x axis. I have been reading that I have to set up the xAxis with a scale, but I have tried various things and it doesn't seem to be working.

This is an example attempt I made that fails:

  options: {
      scales: {
        xAxis: [{
          type: 'time',
          position: 'bottom',
          time: {
            parser: 'YYYY-MM-DD',
            displayFormats: {'day': 'MM/YY'},
            tooltipFormat: 'DD/MM/YY',
            unit: 'month',
          }
        }]
      },  

Can anyone please give a pointer on how to do that? Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source