Make x label horizontal in ChartJS

Question

Drawing a line chart with ChartJS 1.0.1 as above. As it shows, the label in the x-axis is not horizontal although there are enough space. How can I make it horizontal?

A side question, noticed the y label, there are 1-2px clipped. How to fix that?

Answer 1

If you are using chart.js 2.x, just set maxRotation: 0 and minRotation: 0 in ticks options. If you want them vertical, set maxRotation: 90 and minRotation: 90 instead. And if you want to all x-labels, you may want to set autoSkip: false. The following is an example.

var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 0,
          minRotation: 0
        }
      }]
    }
  }
});

example of 0 degree

example of 90 degree

Answer 2

try fix the function calculateXLabelRotation in chart.js

calculateXLabelRotation : function(){
    ...
        //↓↓↓
        this.xLabelRotation = 0;
        //↑↑↑
        if (this.xLabelRotation > 0){
            this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;
        }
    ...
},