How change X step on chart (chart js)?

Viewed 16

I have chart with X axis - it is time. But chart creating a lot of dates on X axis, when I received data by month. How to change step for X axis? If I change dimension of window - step for X axis plot by month. But when window is big - chart plot step for every day.

enter image description here enter image description here

This is my function for creating chart:

draw() {
  if (this.mychart) {
    this.mychart.destroy();
  }
  const ctx = this.$refs.mainChart;
  this.mychart = new Chart(ctx,
    {
      type: 'line',
      data: {
        labels: this.labels,
        datasets: this.datacollection
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
        },
        responsive: true,
        elements: {
        },
        scales: {
          xAxes: [{
            type: "time",
            display: true,
            scaleLabel: {
              display: false,
            },
            ticks: {
              major: {
                fontStyle: "bold",
                fontColor: "#FF0000"
              },
            }
          }],

          yAxes: [
            {
              id: 'y1',
              type: 'linear',
              position: 'left',
              display: false
            },
            {
              id: 'y2',
              type: 'linear',
              position: 'right',
              display: false
            },
            {
              id: 'y3',
              type: 'linear',
              position: 'left',
              display: false
            },
            {
              id: 'y4',
              type: 'linear',
              position: 'right',
              display: false
            },
            {
              id: 'y5',
              type: 'linear',
              position: 'left',
              display: false
            },

            {
              display: false,
              gridLines: {
                display: false
              },
              scaleLabel: {
                display: true,
                labelString: this.labelY
              },
              ticks: {
                min: 0,
                beginAtZero: true,
                stepSize: 100
              }
            }]
        }
      }

    });
},
1 Answers

I found option for set stepsize:

scales: {
              xAxes: [{

                type: "time",
                time: {
                  unit: 'month',
                                   },
Related