How to show label for second y-axis in charts.js? - chart.js

Question

I have two y-axis in my charts.js scatter chart, and all my data is displayed correctly.
However, whilst the label for the first y-axis is showing, the label for the second y-axis is not.
Here's my code:
window.laChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: allDatasets
},
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: X_AXIS_LABEL
},
ticks: {
min: 0,
max: 18,
stepSize: 1,
// Format the x-axis values
callback: function(value, index, values) {
return value;// + ".000";
}
},
gridLines: {
display: false
}
}],
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
max: 100
},
position: "left",
id: "y-axis-1",
type: "linear"
},
{
ticks: {
beginAtZero: true,
min: 0,
suggestedMax: 10
},
position: "right",
id: "y-axis-2",
type: "linear"
},
{
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
callback: function(value, index) {
if (index === 1) { // This is the middle tick.
return Y1_AXIS_LABEL;
}
else {
return '';
}
}
}
}]
}
}
And here's a screenshot with the second y-axis label missing:
How do I make the label for the second y-axis appear?
SOLUTION
LeeLenalee's answer worked, but it left me with rotated labelStrings. I adapted his answer to solve this issue with this final code:
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
max: 100
},
scaleLabel: {
display: false,
labelString: Y1_AXIS_LABEL
},
position: "left",
id: "y-axis-1",
type: "linear"
},
{
ticks: {
beginAtZero: true,
min: 0
},
scaleLabel: {
display: false,
labelString: Y2_AXIS_LABEL
},
position: "right",
id: "y-axis-2",
type: "linear"
},
// Change the orientation of the first y-axis label.
{
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
callback: function(value, index) {
if (index === 1) { // This is the middle tick.
return Y1_AXIS_LABEL;
}
else {
return '';
}
}
},
position: "left"
},
// Change the orientation of the second y-axis label.
{
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
callback: function(value, index) {
if (index === 1) { // This is the middle tick.
return Y2_AXIS_LABEL;
}
else {
return '';
}
}
},
position: "right"
}
]
Final screenshot:

Answer 1

What you did is implement a new scale as replacement for the scale label, this is not the way you should do it because the scale will only be on the left. You have to use the scalelabel as you did with the X axis for both yAxes like this:
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
max: 100
},
scaleLabel: {
display: true,
labelString: Y1_AXIS_LABEL
},
position: "left",
id: "y-axis-1",
type: "linear"
},
{
ticks: {
beginAtZero: true,
min: 0,
suggestedMax: 10
},
scaleLabel: {
display: true,
labelString: Y2_AXIS_LABEL
},
position: "right",
id: "y-axis-2",
type: "linear"
}]