You can use different series type, (columnrange
), to get this done, for example: http://jsfiddle.net/3bQne/1163/
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
minRange: 0.5,
categories: ['Apples', 'Bananas', 'Oranges', 'Recommended']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 1, 4]
}, {
name: 'John',
data: [5, 7, 3]
}, {
type: 'columnrange',
name: 'Recommended',
data: [ [3, 0, 7] ],
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.high}</b><br/>'
}
}]
});
Note: To use columnrange, add highcharts-more.js file.
Note2: Added minRange
for xAxis, to make at least one column visible