horizontal scroll bar in highcharts

Question

I am trying to get the horizontal scroll bar to work in my highcharts graph. Though the horizontal scroll bar appears, there is no space to scroll. The graph is actually becoming smaller to be able to accommodate all the data.

Here is the jsfiddle code

var colors = Highcharts.getOptions().colors;

chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    type: 'column'

},

xAxis: {
    categories: ["CCD Oberon Mall","CCD Gold S",
                 "Barista Coffee Shop Indra Nagar",
                 "Dominos Pizza Delhi MG Road"],
    title: {
        enabled: true,
        margin: 15
    },
    labels: {
        rotation: -90,
        align: 'right',
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
},
scrollbar: {
    enabled: true
},
yAxis: [{
    title: {
        text: 'Age Count'
    },
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
    }
}, { // Secondary yAxis
    title: {
        text: 'Gender Count'
    },
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
    },
    opposite: true
}],
legend: {
    align: 'center',
    //x: -100,
    verticalAlign: 'top',
    //y: 20,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
},
tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>'; //+
        //'Total: '+ this.point.stackTotal;
    }
},
plotOptions: {
    column: {
        stacking: 'normal',
        point: {
            events: {
                click: function () {
                    console.log('this.x,y=' + this.x + "," + this.y + " category=" + this.category);

                }
            }
        },
        dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
    }
},
series: [{
    type: 'column',
    name: 'Female',
    data: [44,4,10,10],
    stack: 'Female'
}, {
    type: 'column',
    name: 'Male',
    data: [30,0,0,10],
    stack: 'Male'
}, {
    type: 'column',
    name: 'Under 18',
    data: [0,0,0,0],
    yAxis: 1,
    stack: 'Under18'
}, {
    type: 'column',
    name: '18 To 24',
    data: [0,0,0,0],
    yAxis: 1,
    stack: '18To24'
}, {
    type: 'column',
    name: '25 To 34',
    data: [54,4,10,20],
    yAxis: 1,
    stack: '25To34'
}, {
    type: 'column',
    name: 'Above 34',
    data: [20,0,0,3],
    yAxis: 1,
    stack: 'Above34'
}]
});

Answer 1

You need to set min/max values, i.e

min:0,
max: 2 // 2 categories on xAxis will be displayed

http://jsfiddle.net/2K8uW/2/