Scroll With Highcharts.js

[round]

Hello I am using highcharts.js in my php application.
i am having problem in displaying horizontal scroll.
My js and my code is as below.
can anyone help me to solve?

 <script type="text/javascript">
    var chart;
    $(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: { renderTo: 'individual_leads', defaultSeriesType: 'column' },
				title: { text: 'Total Leads' },
				subtitle: { text: '' },
				
				xAxis: { categories:['Initiated Contacts','Spoken','Email','Open','Close','test11','Business Name','New','aaa','abc','news','test22','test33','close','new11','OPEN','CLOSE','EMAIL','SPOKE','CLOSE'] },
				//labels: {rotation: -45,align: 'right',style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'} 
				//xAxis: { categories:['serviceskill','communication'] },
				yAxis: { min: 0, title: { text: 'Number of Leads' } },
				legend: { layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, shadow: true },
				
				//legend: { verticalAlign: 'top', y: 100, align: 'right'},
				scrollbar: {   enabled: true},

				
				tooltip: { formatter: function() { return ''+ this.x +': '+ this.y; } },
				plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ 
				name: 'Total Leads', data: [8,51,40,39,4,2,0,5,0,0,0,0,0,0,0,0,0,0,0,0] }]
			});
    });
</script>
	  <style> .feedback_style{ font-weight:bold; margin-right:20px;}</style>
      <div id="individual_leads" style="float:left; width:45%; height: 400px; margin: 15px auto 20px 20px" ></div>