Display all labels in Chart.js

Question

I have a problem with the graphics of CHART.JS. When I put the time interval of 2 years, some labels of the months overlap. I want all the labels to appear, the time interval doesn't matter.

var g = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsHeader,
        datasets: listData,
    },
    options:{
        maintainAspectRatio: false,
    }
});

Answer 1

Add the following under options:

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

Answer 2

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.

Answer 3

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

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