How to set the axis upper limit

[murrah]

I am new to c3 and finding it very helpful. Thanks!

I have a bar chart rotated to make a horizontal bar chart. Possible data values are between 0 and 10. I wish to set the bottom axis to display ticks at 0, 1, 2, .. 10

My chart displays ticks from 0 to one more than the max data value.
eg
if the max data is 8, I get ticks from 0 .. 8 plus an unlabelled one at the 9th position (the last one)
if the max data is 10, I get ticks from 0 .. 11 (11 is the last displayed)

What I would like is ticks from 0 .. 10 with 10 being the last tick on the axis.

I have searched the docs and tried lots of options but cant find the config for this.

Thanks!
Murray

• C3 version 0.4.18:
• D3 version 3:

[AnishLushte07]

Hi, you can set max property on axis. Reference http://c3js.org/reference.html#axis-y-max

[murrah]

Thanks Anish. I did try that.

var chart = c3.generate({
    bindto: '#chart1',
    size : {
        height : 150,
        width  : 300
    },
    data: {
      types: {
        eval_1: 'bar'
      },
      columns: [
         ['eval_1', 3, 8, 6]
      ]
    },

    axis: {
        rotated : true,

        y: {
            max : 10
            ,tick : {
                values : [0,1,2,3,4,5,6,7,8,9,10]
            }
        },

        x : {
            type : 'category',
            categories : ["You", "Person 1", "Person 2"]              
        },
    }
});

And without the axis.y.tick object (to remove the axis.y.tick.values array):

[murrah]

Got it! Need to set max to 9 and must have the values array specified or the "10" label is missing from the final tick.

y: {
    max : 9
    ,tick : {
        values : [0,1,2,3,4,5,6,7,8,9,10]
    }
},

[murrah]

Ok. Now I see what that comment about padding meant. I was assuming it was talking about css type padding. This works as per previous image.

y: {
    max : 10,
    padding : 0
},

Thanks!