Bar with negative and neutral stack - highcharts

Question

I would like to display answers of type "yes/no/don't know". I was thinking about something similair to Bar with negative stack, but with "don't know" as a neutral part in the middle with equal width on both sides of zero. To show what I mean I added two neutral series to the standard fiddle. How can I merge them into one neutral series in the middle?
{
name: 'Neutral',
data: [...]
}
Maybe I'm on the completely wrong track. Any suggestions?
modified Bar with negative stack-fiddle

Answer 1

You might be able to do this with columnrange series that is inverted (to look like bar chart). This does require the highcharts-more.js library as well.
You need to set the index for each question (x), the low value (low), the high value (high), and then the color you would want (color).
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
categories: ['Q1', 'Q2']
},
legend: {
enabled: false
},
series: [{
name: 'Answers',
data: [
// Question 1
{
x: 0,
low: -10,
high: -5,
color: 'red'
}, {
x: 0,
low: -5,
high: 5,
color: 'blue'
}, {
x: 0,
low: 5,
high: 10,
color: 'green'
},
// Question 2
{
x: 1,
low: -15,
high: -2,
color: 'red'
}, {
x: 1,
low: -2,
high: 8,
color: 'blue'
}, {
x: 1,
low: 8,
high: 20,
color: 'green'
}
]
}]
});
Sample jsFiddle.