[Chartjs]-Display all labels in Chart.js

by

24👍

✅

Add the following under options:

options: {
  scaleShowValues: true,
  scales: {
    xAxes: [{
      ticks: {
        autoSkip: false
      }
    }]
  }
}

8👍

Some of the properties will be useful.

options: {
  scales: {
    xAxes: [{
      ticks: {
        maxRotation: 50,
        minRotation: 30,
        padding: 10,
        autoSkip: false,
        fontSize: 10
      }
    }]
  }
}
  1. autoSkip: To show all labels
  2. maxRotation: Rotation for tick labels (Only applicable to horizontal scale)
  3. minRotation: Rotation for tick labels (Only applicable to horizontal scale)
  4. padding: Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
  5. fontSize: font size

Hope this help!

In order to a large number of record needs to plot on fixed-sized view, I would recommend to use Logarithmic Scale.

2👍

Updating @fiveelements’ answer for Chart.js v3.7.1+:

options: {
    scales: {
        x: {
            ticks: {
                autoSkip: false
            }
        }
    }
}

Leave a comment