C3.js Y Axis Range (Max/Min) Doesn't Work for a Bar Chart

Question

I am trying to put together a bar chart in C3.

http://jsfiddle.net/michaelkuzmin/Lcxe0frw/9/

var chart = c3.generate({
    data: {
        columns: [
            ['% Women CS', 0.036, 0.095, 0.105, 0.182, 0.121],
            ['% Women Math', 0.182, 0.077, 0.182, 0.026, 0.097],
            ['% Women Comp Eng /EE', 0.039, 0.074, 0.032, 0.095, 0.087]
        ],
        type: 'bar',
       labels: true
    },
        axis : {
        y : {
            tick: {
            max: 0.50,
            min: 0,
           // padding: {top: 0, bottom: 0}

            }
        },
        x: {
            type: 'category',
           categories: ['Carleton', 'Alberta', 'Sherbrooke', 'McGill', 'Laval']
        }
    }
});

1) When I enable value labels the Y axis immediately breaks by setting the max range to 14 2) When I try to set it manually it ignores the Y: max min parameters.

What am I missing?

P/S Somebody posted a very similar question here c3.js y axis min/max not working but the solution they posted does not work for me. The solution was to use padding = 0. You can uncomment it in the fiddle and see that it makes no difference.

Answer 1

The documentation on c3.js is pretty poor, but it seems that the max and min don't belong in the y.tick object, but directly in the y . Moving them, and then applying the padding to the y as well, seems to resolve the issue. See updated fiddle here .