How to enable the vertical scrollbar in Highcharts? - highcharts

Question

Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?

Answer 1

#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.

Answer 2

Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});