javascript - Custom colors in C3.js timeseries chart -
i trying set custom colors in c3.js timeseries chart following this example. first element of each array used identify dataset, if have array:
var datatest1 = ['data1', 30, 200, 100, 400, 150, 250];
the color property can accessed this:
colors: {data1:'#0000'}
or:
colors: {'data1':'#0000'}
however, if use first element of array access them:
var data1id = datatest1[0];
and then:
colors: {data1id:'#0000'}
it fails. not sure may doing wrong no feedback in browser...
here working example:
var axis = ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06']; var datatest2 = ['data2', 130, 340, 200, 500, 250, 350]; var datatest1 = ['data1', 30, 200, 100, 400, 150, 250]; var data1id = datatest1[0]; var data2id = datatest2[0]; var chart = c3.generate({ data: { x: 'x', columns: [ axis, datatest1, datatest2 ], colors: { //data1: '#0000', //data2: '#0000' datatest1: '#0000', datatest2: '#0000' } }, axis: { x: { type: 'timeseries', tick: { format: '%y-%m-%d' } } } });
----- edit doing because data (including identifier) generated dynamically. thanks
you can dynamically create colors object this.
var colors = {}; colors[datatest1[0]] = '#0000'; colors[datatest2[0]] = '#0000';
then set in graph this
var chart = c3.generate({ data: { x: 'x', columns: [ axis, datatest1, datatest2 ], colors: colors //set colors object created above }, axis: { x: { type: 'timeseries', tick: { format: '%y-%m-%d' } } } });
working code here
Comments
Post a Comment