CODEWITHSUNDEEP
javascripthtmlchartsc3.js
michael_kuzmin
michael_kuzmin

Reputation: 23

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

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.

Upvotes: 1

Views: 3041

Answers (1)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

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.

Upvotes: 2

Related Questions