Search code examples
jqueryc3

Change Y axis labels in C3 charts

Is it possible to change or categorize the Y axis labels in C3 line chart.

Is it possible to categorize and display the Y axis labels as "Beginner","Intermediate", "Advanced" and "Mastery" where the values would be ranging between 0-25, 25-50, 50-75, 75-100 respectively?

Solution

  • HTML

    <div id="chart"></div>

    JS

    var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-15', '2013-02-15', '2013-03-15', '2013-04-15', '2013-05-15', '2013-06-15'],
            ['Team Alpha', 30, 20, 10, 40, 15, 25],
            ['Team Beta', 30, 100, 14, 20, 15, 50]
        ],
        type: 'spline'
    },    
    tooltip: {
        format: {
            value: function (value, ratio, id) {
                if (value < 25)
                     return 'Beginner';
                else if (value < 50)
                     return 'Intermediate';
                else if (value < 75)
                     return 'Advanced';
                else 
                    return 'Mastery';
            }
        }
    },    
    axis: {
        x: {
            padding: {
                left: 0
            },
            type: 'timeseries',
            tick: {
                format: '%b'
            }
        },
        y: {
            min: 0,
            max: 100,
            padding: {
                bottom: 0,
                top: 0
            },
            tick: {
                format: function (d) {
                    switch (d) {
                        case 12.5:
                            return "Beginner"
                        case 37.5:
                            return "Intermediate"
                        case 62.5:
                            return "Advanced"
                        case 87.5:
                            return "Mastery"
                    }
                },
                values: [12.5, 37.5, 62.5, 87.5],
                width: 0
            }
        }
    }
});

    CSS

    .c3-axis-y .tick line {
   display: none;
}

    Fiddle - http://jsfiddle.net/gqf03ea2/