'How do I customize y-axis labels on a Chart.js line chart?
I have the following chart and would like to manually set the Y axis labels.
Instead of using 1,2,3,4,5, I want One, Two, Three, Four, Five.
Is there a way to do this?
Here's my options structure:
options = {
scales: {
yAxes: [{
scaleLabel: { labelString: ["One", "Two", "Three", "Four", "Five"] },
ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
gridLines: {display: false}
}]
},
};
Solution 1:[1]
In the ticks
object you can pass a callback
that will be given the label it is about to show. From here you just return a string you wish to display in place of the label.
chart.js-V2.X fiddle exampe chart.js-V3.X fiddle exampe
ticks: {
min: 0,
max: 5,
stepSize: 1,
suggestedMin: 0.5,
suggestedMax: 5.5,
callback: function(label, index, labels) {
switch (label) {
case 0:
return 'ZERO';
case 1:
return 'ONE';
case 2:
return 'TWO';
case 3:
return 'THREE';
case 4:
return 'FOUR';
case 5:
return 'FIVE';
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |