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

i using c3.js build line graph. in graph have change circle colors according array of colors.

the code of c3 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 want fill corresponding color colors array. have use css, not sure how inside generate function.

after few tries, found out how it.

the array colors should not inside generate function. declare outside generate function shown below , assign every point color using color property of c3 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 shown in this fiddle.