Highcharts Remove Space across the x-Axis - charts

Question

I am trying to build an Area Graph using Highcharts library. All of a sudden i see that there is some spacing on the x-axis before my actual data starts. I want to start the graph right from [0,0] axis with appropriate data.
<?php
$data1 = array(3300, 3000, 4300, 4200, 2900, 1900, 1800);
?>
<script type="text/javascript">$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'areachart',
type: 'area'
},
title: {
text: 'People'
},
credits: {
enabled: false
},
xAxis: {
startOnTick: false,
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return this.value;
}
}
},
plotOptions: {
area:{
dataLabels: {
enabled: true
}
}
},
series: [{
data: [<?php foreach($data1 as $da):
echo $da.', ';
endforeach;
?>
]
}]
});
});
</script>

Answer 1

Good news, it is possible... with some caveats.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min:0.5,
max:10.5,
tickInterval:1,
maxPadding:0,
endOnTick:false,
startOnTick:false
}
http://jsfiddle.net/eg9jn/
Here are the important bits:
The min and max are set to be 0.5 "inside" the chart.
start/endOnTick are set to false.
One caveat: This doesn't work when there are only two categories...

Answer 2

This is not possible since you are using categories for the xAxis. Labels and points for categories are always set in the middle of the category. The first and last category therefore have the gap you want to get rid of.
But in this case, it's not a bug, it's a feature.
You could try and modify your xAxis to use a normal axis and use a custom label formatter to display the days instead of numbers.