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>
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With