How to enable the vertical scrollbar in 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]
}]
});