[Chartjs]-Chart.js – Shift/Stagger labels horizontally (for x axis) instead of rotating

by

0👍

Try using autoSkip option on x axes ticks.

xAxes: [{
        display: true,
        position: 'bottom',
        ticks: {
          autoSkip: true
        }
}]}

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

A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.

If that doesn’t resolve your problem try use maxRotation, minRotation.

xAxes: [{
        display: true,
        position: 'bottom',
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 90
        }
}]}

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

Leave a comment