Display all labels in Chart.js

问题

I have a problem with the graphics of CHART.JS, and when I put the time interval of 2 years, some labels of the months overlap. And 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,
    }
});

the graphic

回答1:

Add the following under options:

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

回答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.

来源：https://stackoverflow.com/questions/57178499/display-all-labels-in-chart-js