Bars are gatherd in the center when x-axis min, max and values are set.

Hi,

I'm using c3js bar chart setting tick and axis range.
But it behave like xmin is smaller and xmax is bigger.
Please run this script in [http://c3js.org/samples/chart_bar.html](http://c3js.org/samples/chart_bar.html).

```
var chart = c3.generate({
data: {
json: [
{x: 4, y: 200},
{x: 7, y: 100},
{x: 8, y: 300},
{x: 9, y: 400},
],
keys: {
x: 'x',
value: ['y']
},
type: 'line'
},
axis: {
x: {
tick: {
values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
},
min: 1,
max: 31
}
}
});

setTimeout(function () {
chart.transform('bar')
}, 2000);
```

There is a way to fix x-axis?