HighCharts - 2nd yAxis graphs not scaling correctly - highcharts

Question

i'm having a problem with my second yAxis using HighCharts. The spline graph scales correctly, however the bar graph (second yAxis) does not. Note that the bar graph has two sections - the irrelevant section is invisible.
http://jsfiddle.net/warricksmith/jqvxf30z/1/
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
backgroundColor: null,
spacingBottom: 6,
spacingLeft: 2,
spacingRight: 2,
spacingTop: 2
},
credits: {
enabled: false
},
global: {
useUTC: false
},
legend: {
align: "center",
enabled: true,
layout: "horizontal",
verticalAlign: "bottom",
y: 5
},
navigator: {
enabled: false,
height: 40,
series: {
color: "#21B567"
}
},
plotoptions: {
column: {
borderwidth: 0
},
line: {
lineWidth: 1,
marker: {
enabled: false
}
},
series: {
pointInterval: null,
pointStart: null
},
spline: {
lineWidth: 2,
marker: {
enabled: true
}
}
},
rangeselector: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'Peak Demand',
stacking: null,
title: 'kVA',
type: 'spline',
color: "#FF6F34",
data: [821,
794,
737,
748,
778,
794,
889,
831,
819,
821,
821,
877],
tooltip: {
valueSuffix: 'kVA'
}
}, {
name: "Power at peak",
stacking: null,
title: "kVA",
tooltip: {
valueSuffix: " kVA"
},
type: "spline",
color: "#33BAE3",
data: [788,
770,
722,
733,
747,
755,
747,
814,
803,
804,
805,
737]
}, {
color: "#339A63",
data: [
0.04,
0.03,
0.02,
0.02,
0.04,
0.05,
0.16,
0.02,
0.02,
0.02,
0.02,
0.16],
name: "Power factor (lagging)",
stacking: 'normal',
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, {
color: "rgba(245,241,232,0)",
data: [
0.96,
0.97,
0.98,
0.98,
0.96,
0.95,
0.84,
0.98,
0.98,
0.98,
0.98,
0.84, ],
name: "Power factor (leading)",
stacking: "normal",
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, ],
title: {
text: 'Peak Demand and Power factor'
},
subtitle: {
text: 'Power-Star'
},
xAxis: [{
categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14',
'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'],
lables: {
style: {
fontSize: "12px",
fontWeight: "bold"
}
},
tickPixelInterval: 150,
tickPosition: "inside",
type: "category"
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 1,
index: 0,
labels: {
style: Object,
y: 10
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
title: {
text: "kVA"
}
}, {
gridLineWidth: 0,
index: 1,
labels: {
enabled: false
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 2,
labels: {
y: 10
},
max: 1,
maxPadding: 0,
min: 0.8,
opposite: true,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 3,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 4,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}],
tooltip: {
shared: true
},
});
});

Answer 1

The problem is that you have so many yAxes that you made a mistake. You are connecting series to yAxis: 1 which means second yAxis in the options. Meanwhile you are setting min and max for third, fourth and fifth yAxes and enabling labels only for the third one..
Fixed demo: http://jsfiddle.net/jqvxf30z/2/
I set yAxis: 2 for series, since that yAxis is most probably responsible for columns.