Chartjs-Datas put one on each other on chart.js

by

0👍

✅

Since you did not provide your chart config, I am assuming you are using a time scale based on the posted image.

Unfortunately chart.js has trouble sometimes auto-fitting a time scale x-axis because of all the format variations and possibilities. You can do one of two things to solve this. Either expand the size of the chart container (so that there is more room to render the chart) or configure the time scale manually to optimize how it looks.

As an example, you could use the time.unit property to display the scale in units of ‘second’. Here is the relevant config:

scales: {
  xAxes: [{
    gridLines: {
      display: false,
    },
    type: "time",
    time: {
      unit: 'second',
    }
  }]
}

Here is a codepen to demonstrate what I mean.

One thing to keep in mind though is that your configured unit needs to make sense with the data in your graph. For example, if you try to use a time unit of seconds but you data spans multiple hours or day, then it will probably crash the page (because in that case chart.js tries to draw thousands of gridlines/ticks…one for each second)

Leave a comment