csv file of 2 columns, bars didn't display properly? y-axis:show:false scale the chart smaller?

I have a csv file like this:
start_codon,stop_codon
1,0
0,0
0,1
0,0
0,0
0,1
0,0
...... morel lines ......

My js code are like this:

```

var chart2_0 = c3.generate({
bindto: '#chart2_0',
data: {
url: '$frame1_csv',
types: {start_codon: 'bar',stop_codon: 'bar'}
},
zoom: {enabled: true},
size: {height: 100},
transition: {duration: 0},
axis: {y: {show: false}},
});


var chart2_1 = c3.generate({
bindto: '#chart2_1',
data: {
url: '$frame1_csv',
types: {start_codon: 'bar',stop_codon: 'step'},
},
zoom: {enabled: true},
size: {height: 100},
transition: {duration: 0},
axis: {y: {show: true}}
});


var chart2_2 = c3.generate({
bindto: '#chart2_2',
data: {
url: '$frame1_csv',
types: {start_codon: 'spline',stop_codon: 'area-step'},
},
zoom: {enabled: true},
size: {height: 100},
transition: {duration: 0},
axis: {y: {show: false}}
});

```

The chart looks like this (3 charts are using same csv data):

chart 1: When chart type is set to (bar, bar), the bars are shown incorrectly, more often the blue bars don't show. chart 2 type: bar, step; chart 3: spline, area-step.

chart 2: the chart width is different by y-axis is displayed or not. How to fix this?

chart 3: the tick marks on the both end of x-axis, and this has scaled the chart a little smaller. How to fix this?