How do get highcharts combo column scatter to work? - highcharts

Question

Trying to create a combo chart of with 3 column series and 1 scatter series; column should be 100% and scatter overlaid on it. When I use plotOptions: {column: {stacking: "percent"}, the columns are maximized in the plot area but scatter series goes to bottom of chart; when replace with plotOptions: {column: {stacking: "normal"}, it displays well but columns are not maximizing the plot area. Ideas?
Highcharts.chart('container', {
chart: {
ignoreHiddenSeries: false,
backgroundColor: "#FFFFFF",
width: 509,
height: 400,
borderColor: "#FFFFFF",
borderWidth: 1,
plotShadow: false
},
title: {
text: "Your organization in comparison",
style: {color: "#333333", fontFamily: "Arial", fontSize: 16, fontWeight: "bold"}
},
legend: {
enabled: true,
verticalAlign: "bottom",
align: "center",
symbolRadius: 0,
style: {color: "#333333", fontFamily: "Arial", fontSize: 13}
},
plotOptions: {
column: {stacking: "percent"},
// column: {stacking: "normal"},
series: {animation: true}},
tooltip: {enabled: false},
yAxis: {title: {text: null}, labels: {enabled: false}, gridLineWidth: 0, reversedStacks: false},
xAxis: {
title: {text: null},
categories: ['Experience', 'Security', 'Management'],
labels: {enabled: true, style: {color: "#333333", fontFamily: "Arial", fontSize: 13}},
gridLineWidth: 0,
reversedStacks: false
},
series: [{
type: "column",
name: "Low",
invertIfNegative: false,
color: "#002E73",
showInLegend: true,
data: [{y: 0.42}, {y: 0.42}, {y: 0.48}],
dataLabels: {
enabled: false,
verticalAlign: "top",
style: {color: "#FFFFFF", fontFamily: "Arial", fontSize: 13, textOutline: ""}
}
}, {
type: "column",
name: "Medium",
invertIfNegative: false,
color: "#297EFF",
showInLegend: true,
data: [{y: 0.37}, {y: 0.47}, {y: 0.36}],
dataLabels: {enabled: false}
}, {
type: "column",
name: "High",
invertIfNegative: false,
color: "#B8D4FF",
showInLegend: true,
data: [{y: 0.21}, {y: 0.11}, {y: 0.16}],
dataLabels: {enabled: false}
}, {
type: "scatter",
name: "Your organization today",
invertIfNegative: false,
color: "#FFC000",
lineWidth: 0,
marker: {enabled: true, radius: 14},
states: {hover: {lineWidthPlus: 0}},
showInLegend: true,
data: [{y: 0.21}, {y: 0.21}, {y: 0.24}],
dataLabels: {enabled: false}
}],
credits: {enabled: false}
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>

Answer 1

Your should use Multiple axes to make combinations chart.
Refer document about YAxis here: http://api.highcharts.com/highcharts/yAxis
I've fixed your code as bellow. Please try!
Highcharts.chart('container', {
chart: {
ignoreHiddenSeries: false,
backgroundColor: "#FFFFFF",
width: 509,
height: 400,
borderColor: "#FFFFFF",
borderWidth: 1,
plotShadow: false
},
title: {
text: "Your organization in comparison",
style: {
color: "#333333",
fontFamily: "Arial",
fontSize: 16,
fontWeight: "bold"
}
},
legend: {
enabled: true,
verticalAlign: "bottom",
align: "center",
symbolRadius: 0,
style: {
color: "#333333",
fontFamily: "Arial",
fontSize: 13
}
},
plotOptions: {
column: {
stacking: "percent"
},
// column: {stacking: "normal"},
series: {
animation: true
}
},
tooltip: {
enabled: false
},
// Create Multiple axes
yAxis: [{
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
reversedStacks: false
}, {
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
reversedStacks: false
}],
xAxis: {
title: {
text: null
},
categories: ['Experience', 'Security', 'Management'],
labels: {
enabled: true,
style: {
color: "#333333",
fontFamily: "Arial",
fontSize: 13
}
},
gridLineWidth: 0,
reversedStacks: false
},
series: [{
type: "column",
name: "Low",
invertIfNegative: false,
color: "#002E73",
showInLegend: true,
data: [{
y: 0.42
}, {
y: 0.42
}, {
y: 0.48
}],
dataLabels: {
enabled: false,
verticalAlign: "top",
style: {
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: 13,
textOutline: ""
}
}
}, {
type: "column",
name: "Medium",
invertIfNegative: false,
color: "#297EFF",
showInLegend: true,
data: [{
y: 0.37
}, {
y: 0.47
}, {
y: 0.36
}],
dataLabels: {
enabled: false
}
}, {
type: "column",
name: "High",
invertIfNegative: false,
color: "#B8D4FF",
showInLegend: true,
data: [{
y: 0.21
}, {
y: 0.11
}, {
y: 0.16
}],
dataLabels: {
enabled: false
}
}, {
yAxis: 1, // Define axis will be use here
type: "scatter",
name: "Your organization today",
invertIfNegative: false,
color: "#FFC000",
lineWidth: 0,
marker: {
enabled: true,
radius: 14
},
states: {
hover: {
lineWidthPlus: 0
}
},
showInLegend: true,
data: [{
y: 0.21
}, {
y: 0.21
}, {
y: 0.24
}],
dataLabels: {
enabled: false
}
}],
credits: {
enabled: false
}
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>