Overlapping labels on x axis

[listefano]

Expected Behavior

Labels should be skipped or rotate so they are not overlapping.

Current Behavior

If the browser gets resized the labels on the x axis could get overlapped.

Steps to Reproduce (for bugs)

1. Create a line chart with a x axis of type "time" and no data.
2. Resize the browser so the chart gets smaller/bigger.

Here is a sample of the problem:
https://codesandbox.io/s/1vm83xknoj?fontsize=14

Context

I get the data from an custom private API and want to visualize the data with chart.js.

Environment

• Chart.js version: 2.7.3
• Browser name and version: Google Chrome v72.0.3626.119 | CefSharp V69

[benmccann]

Set autoSkip to true: https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip

The default is false for the time scale: https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.time.js#L445

[kurkle]

Seems like a bug to me. The fewer the labels, the more they overlap before rotated or skipped. So could be a +-1 thing.

[listefano]

It seems that the setting of autoSkip to true already fixes my problem. Maybe a note in the docs for the autoSkip setting for the time scale would be helpful.

Thanks for the quick reply

[benmccann]

@kurkle raised a good point though that there is a bug here because this shouldn't happen even without autoSkip enabled

[mrleblanc101]

How do I prevent this ?
I tried the autoSkip option, but it would skip over the "June" month label instead of "May"

[ntbosscher]

The overlap still seems to be an issue on time series with v4.4.4
@simonbrunel can we reopen or should I file a new issue?

Config

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        type: "time",
        time: {
          displayFormats: {
            hour: "dd-M-yyyy HH:mm:ss a",
          },
          unit: "hour"
        },
        border: {
          color: 'red'
        },
        ticks: {
           maxRotation: 0,
           autoSkip: true,
           align: "inner",
         }
      }
    }
  }
};

Setup

const labels = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => Date.now() + 60 * 60 * 1000 * i);
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 1,
    data: [10, 20, 30, 40, 50, 0, 5],
  }]
};