Chartjs how to show scale label horizontally - chart.js

Question

Due to very poor documentation (https://www.chartjs.org/docs/latest/) I decided to ask Chart.js community this question.
How can I change the angle of the scale label?
This is my actual view
I would like to make those labels horizontal (see red labels how it should be).
The config is:
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: [this.label, this.valueUnit],
fontSize: 14,
},
afterFit: function(scaleInstance) {
scaleInstance.width = 120;
}
}]

Answer 1

You can define a second y-axis that is responsible for drawing the scale label horizontally.
The single yAxis.ticks label can be left aligned by defining mirror: true together with some padding.
ticks: {
mirror: true,
padding: 60,
...
To make the tick label visible on the chart area, the same padding needs to be defined left of the chart layout.
layout: {
padding: {
left: 60
}
},
Please take a look on the runnable code below and see hot it works.
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
fill: false
}]
},
options: {
layout: {
padding: {
left: 60
}
},
legend: {
display: false
},
scales: {
yAxes: [{
},
{
ticks: {
stepSize: 0.5,
mirror: true,
padding: 60,
fontColor: 'red',
callback: v => v == 0.5 ? ['Horizontal', 'Label'] : undefined
},
gridLines: {
display: false
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>

Answer 2

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the scale label yourself directly on the canvas using CanvasRenderingContext2D.fillText().
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales['y-axis-0'];
let y = yAxis.bottom / 2;
ctx.textAlign = 'left';
ctx.font = "14px Arial";
ctx.fillStyle = "gray";
ctx.fillText('Horizontal', 0, y - 8);
ctx.fillText('Label', 0, y + 8);
ctx.restore();
}
You'll also have to define some extra padding at the left of the chart to make sure, the scale label does not overlap the chart area.
options: {
layout: {
padding: {
left: 70
}
},
Please take a look at the following runnable code and see how it works.
new Chart(document.getElementById('myChart'), {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales['y-axis-0'];
let y = yAxis.bottom / 2;
ctx.textAlign = 'left';
ctx.font = "14px Arial";
ctx.fillStyle = "gray";
ctx.fillText('Horizontal', 0, y - 8);
ctx.fillText('Label', 0, y + 8);
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
fill: false
}]
},
options: {
layout: {
padding: {
left: 70
}
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>

Answer 3

There is no build in way to do this. If you want to achieve this behaviour you will have to draw it on the canvas yourself with an custom plugin