horizontal scroll bar in highcharts - 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/