c3 area-step protrudes outside axes

Question

When using c3 'area-step' (or 'step') type and an x-axis type of category, the stepped values extend outside the x-axis to the left and right; It works correctly for the 'area' type or a numeric axis;

Ideally I'd like to have the stepped values stop at the limits of the x-axis.

Sample Result

var centile-chart = c3.generate({
                bindto: '#centile-chart',                
                axis: { x: {  
                        label: {
                            text: 'Centile Band',
                            position: 'outer-center'
                            },
                        type: 'category'
                     } ,
                     y: {
                        label: {text: '% of reports',
                        position: 'outer-middle'},
                        tick:{
                            format: d3.format('%')
                        }
                    }},
                data: { 
                    x: 'Centile Band',
                    columns:  [
                        ['Centile Band', '1%', '5%', '10%', '25%', '50%' ],
                        ['% (cumulative)', 0.05, 0.16, 0.26, 0.48, 0.76],
                        ['National Average % (cumulative)', 0.04, 0.15, 0.25, 0.47, 0.74],
                        ['Centile', 0.01, 0.05, 0.1, 0.25, 0.5]
                        ],
                    type:'bar',
                    types : {
                       'Centile' : 'area-step'
                    },
                    colors : {
                        'Centile': '#0000ff'
                    }
                },
                size: {
                    width: 940
                },
                bar: {
                    width: {
                        ratio: 0.5
                    }
                },
                legend: {
                    position: 'right'
                }
            });

Answer 1

Somehow you're removing the clip-path attribute that normally sits on the .c3-chart element

When I run this fiddle with your code the stepped chart is within the chart bounds

http://jsfiddle.net/wn3vzn0k/1280/

Then with the timeout I added I remove the clip-path and bingo, it looks like your image

setTimeout(function () {
    d3.select("#centile-chart").select(".c3-chart").attr("clip-path", null);
}, 3000);

You're going to have to dig a bit deeper to see why your clip-path is disappearing as it's not anything in the code you've posted that does it.