[Chartjs]-Chart.js 2.x: labels displaying over eachother

by

1👍

✅

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.

In this specific case I used the time.unit property to display the scale in units of ‘days’. Here is the relevant config:

scales: {
  xAxes: [{
    gridLines: {
      display: false,
    },
    type: "time",
    time: {
      unit: 'day',
    }
  }],
  yAxes: [{
    ticks:{
      stepSize: 10000
    }
  }]
}

Here is a codepen to demonstrate what I mean.

0👍

Try scales.xAxes[0].time.round = 'day'
This fixed it for me.

before:
before

after:
enter image description here

e.g.,

             scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: "MM/DD/YYYY",
                        round: 'day',
                        tooltipFormat: 'll'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }],
             }

Leave a comment