C3.js - Changing colors of the circles in line charts

Question

I am using C3.js to build a Line graph. In this graph I have to change the circle colors according to the array of colors.

The code of c3 is below:

var chart = c3.generate({
        bindto:'#timeline',
        colors:['red', 'blue','green','yellow','green','red'],
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
                ['data1', 10, 15, 12, 5, 9, 11],
                ['data2', 15, 12, 10, 8, 4, 12],
            ]
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                },
                label: {
                    text: 'Dates',
                    position: 'outer-middle'
                }
            },
            y: {
                show:true,
                label: {
                    text: 'Count',
                    position: 'outer-middle'
                }
            }
        }
    });

For each data point I want to fill it with the corresponding color from colors array. I have to use CSS, but I am not sure how to do it inside this generate function.

score 3 · Accepted Answer · answered Jul 14 '15 at 08:08

After a few tries, I found out how to do it.

The array colors should not be inside the generate function. declare it outside the generate function as shown below and then assign every point a color using color property of c3 as shown below.

    var colors = ['red','green','blue','yellow','black','red'];
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 150, 150, 250],
        ],
        type: 'line',
        color:function(color,d){
                return colors[d.index];    
        }
    },
});

The working of this is shown in this fiddle.

C3.js - Changing colors of the circles in line charts

1 Answers1