I'm facing an issue with displaying all the labels on my chart. I have 4 series plotted and decided to add two y-axes on each side of the graph, but the labels for the last series named "Stuff Data" are not showing up correctly. Instead, it seems to be using the Voltage data's y-axis.
For reference, please check out: https://jsfiddle.net/Lprm4ofw/51/
I've attempted rearranging the series and yAxis order, but the last label still remains missing. I also adjusted the margins in case it was hidden, but that didn't solve the problem either. Can anyone suggest a solution? Here is the code snippet:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
type: 'spline'
},
title: {
text: 'Whatever'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Voltage',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} V',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'Current',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
},
{ // Third yAxis
gridLineWidth: 0,
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
},
{ // Fourth yAxis
title: {
text: 'stuff',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: 'WHEREAMI',
style: {
color: Highcharts.getOptions().colors[4]
}
},
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yaxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3 , 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6 , 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yaxis: 3,
}]
});