title: How to display all the days of a particular time period in react-chartjs-2 X-axes
body: <p>I have a graph that needs to show data within a particular month. As an example, X-axes should end with today. And it should start with a month ago. and all the dates in that time period should be displayed. Right now, It's starting from the 1st of that month.</p>
  
  <p>Expected result.
  Ending date - today (May 05)
  Starting date - a month ago (April 4)
  But It's starting from April 1.</p>
  
  <pre><code>//code
  import React, { Component } from 'react';
  import moment from 'moment';
  import { Line } from 'react-chartjs-2';
  
  export default class LineChart extends Component {
    state = {
      starting: moment().subtract(1, 'month').format('MMM DD'),
      ending: moment().format('MMM DD'),
      data: [
        {
          x: new Date(),
          y: 1,
        },
        {
          t: new Date(),
          y: 10,
        },
      ],
    };
    render() {
      var startDate = moment().subtract(1, 'months').format('MMM DD');
      var endDate = moment().format('MMM DD');
      const data = {
        labels: [startDate, endDate],
        datasets: [
          {
            label: 'NPS Score',
            fill: false,
            lineTension: 0.2,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderDash: [],
            borderDashOffset: 0.0,
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: this.state.data,
          },
        ],
      };
  
      const lineOptions = {
        scales: {
          xAxes: [
            {
              type: 'time',
              time: {
                unit: 'day',
                tooltipFormat: 'lll',
              },
              ticks: {
                maxTicksLimit: 12,
              },
            },
          ],
          yAxes: [
            {
              stacked: true,
              gridLines: {
                display: false,
              },
              ticks: {
                suggestedMin: 100,
                suggestedMax: 0,
              },
            },
          ],
        },
        legend: {
          display: false,
        },
        tooltips: {
          enabled: true,
        },
      };
      return &lt;Line data={data} options={lineOptions} height={120} /&gt;;
    }
  }
  </code></pre>
  
  <p>Here is my code in the stack blitz - <a href="https://stackblitz.com/edit/line-chart-with-time-on-xaxes" rel="nofollow noreferrer">https://stackblitz.com/edit/line-chart-with-time-on-xaxes</a>
  Can anyone help me with this? Thanks in advance.</p>