MTT
MTT

Reputation: 379

Set the y axis spacing in c3

I have the following chart and I want to make the y axis spacing integers only (when the data to display is low, I get decimals: 0.1, 0.2...). Anyone can help?

var Presence = c3.generate({
        bindto: '#presence',
        data: {
            url: 'ranking.csv',
            x:'AC_YEAR',
            types: {
                Number_students: "bar",
                Ranking: 'spline'
            },
            axes:{
                Number_students: "y",
                Ranking: "y2"
            }
        },
        axis: {
            y: {
                label: {
                text:"Students",
                position: "outer-middle"
                },
                tick: {
                    outer: false}
            },
            y2: {
                inverted:true,
                show: true,
                label: {
                    text:"Ranking position",
                    position: "outer-middle"
                },
                tick: {
                    outer: false
                }
            },
            x: {
                label: {
                text:"Year",
                position: "outer-center"
                },
                tick: {outer: false}
            }
        },
        size: {
            height: 400,
            width: 800
        },    
});

The csv file looks like this:

AC_YEAR,Number_students,Ranking
2011,1,103
2012,2,30
2014,1,178
2015,1,188

But the csv is changing over time and sometimes the Number of students is 100. So that is why I do not want to fix values on the y axis, only avoid having floats when the Number of students is low (1 or 2)

Thanks in advance!

Upvotes: 3

Views: 1012

Answers (1)

mgraham
mgraham

Reputation: 6207

Set the y tick formatting function to return blanks on non-whole numbers

    y: {
        label: {
        text:"Students",
        position: "outer-middle"
        },
        tick: {
            format: function (d) { 
                return Math.abs(Math.round(d) - d) < 0.001 ? d : ""; 
            },
            outer: false
            }
    },

Upvotes: 2

Related Questions