Menu
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?
212
The last thing we need to prepare before we can start visualizing our data is to define an area in our HTML where we want to draw the graph. For Chart. js you do this by adding a canvas element, and setting width and height to define the proportions of your graph.
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do: let chart = new Chart(ctx, { type: 'line', data: data, options: { layout: { padding: { left: 50 } } } }); Copied!
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
64
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;
}
...
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
