Make x label horizontal in ChartJS

Question

Line chart drawing with ChartJS 1.0.1 as above. As you can see, the label along the x axis is not horizontal, although there is enough space. How can I make it horizontal?

The side question that noticed the y label is cut 1-2px. How to fix it?

Answer 1

If you use chart.js 2.x, just set maxRotation: 0 and minRotation: 0 in the tick settings. If you want them to be vertical, set maxRotation: 90 and minRotation: 90 . And if you want all x-tags, you can 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 0 degree

90 degree example

Answer 2

try to fix the calculateXLabelRotation function in chart.js

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