X Axis label not displayed when the string is long

[non-javascripter]

Expected Behavior

The expected behaviour is to display properly the X axis labels

Current Behavior

The second label is missing

Possible Solution

When the labels are shortened they work correctly, but for longer string they fail

Steps to Reproduce (for bugs)

https://codepen.io/dstoyanov22/live/mQZoEG

Environment

• Chart.js version: 2.7.3
• Browser name and version: Firefox Quantum 63.0 (64-bit)
• Link to your project: https://codepen.io/dstoyanov22/live/mQZoEG

[kurkle]

You can disable autoSkip:

      scales: {
        xAxes: [{
          ticks: {
            autoSkip: false,
          }
        }]
      }

https://www.chartjs.org/docs/latest/axes/cartesian/

[non-javascripter]

Hi Jukka, This really does the work! Thanks very much! Regards, Deyan

[simonbrunel]

This is a bug, I guess with the way we collide rotated labels. autoSkip: false is just a workaround which will not work in many cases. As you can see, the auto skipper should not discard the tick label because it doesn't overlap: