ChartJS - How to increase the maximum degree of label rotation on x-axis?

Question

I have a line chart, and at first, all the labels on x-axis are fully horizontal. Something like this:

Now if add more data, the labels start to rotate:

Until comes a point where it seems to have reached the maximum degree to which it can rotate:

By the looks of it, I think the maximum degree is 45. So now, if I add a little more data, instead of rotating the labels more, it removes every one in two labels, and becomes like this:

How can I increase this degree to 90, so that the labels rotate as much as becoming fully vertical?

Here's the code I used for the chart:

new Chart(chart, {
  type: 'line',
  data: chart_data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      position: 'top',
      labels: {
        boxWidth: 5,
        usePointStyle: true
      }
    },
    events: ['click', 'mousemove'],
    onClick: clicked,
    pan: {
      enabled: true,
      mode: 'x',
      onPanComplete: function(event) {
        console.log(event)
      }
    },

    zoom: {
      enabled: true,
      mode: 'x'
    }
  }
});

Answer 1

You can configure this using the maxRotation property of the common tick configuration object .

Your code needs to be modified like so:

options: {
  scales: {
    xAxes: [{
      ticks: {
        maxRotation: 90
      }
    }],
    yAxes: [{
      ...

Answer 2

The keyword of the issue is not rotation i think, it is Tick on xAxes. I think this link can help you:

https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration

also

Chart.js: evenly distribute ticks when using maxTicksLimit

xAxes: [{
    ticks: {
        autoSkip: false, // Skip or not?
        maxTicksLimit: 30 // How much?
    }
}]

and rotation just can help as @timclutton said here: https://stackoverflow.com/a/58275468/7514010