1
votes

Is there a way to update colors based on color array using chart.load()?

The problem is, in case I remove any previous inserted Column and then insert another one and 'reload' the chart, the new color will be the next one from the array, not following the real array sequence of colors.

Ex. The color array is [red,green,blue,white], then I feed the chart with 3 columns with data and they are plotted correctly with red, green and blue lines, then I remove one column and reload the chart(line colors shown are red and green), then I insert a new column with new data, instead of this new line be drawn in blue(which is the third in the color array) it´s end been drawn with the next color from the array, white.

Here´s the code I´m using:

I´m first generating the chart with an array of colors:

var colors= ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']

var chart = c3.generate({
            ....
            color: {
                pattern: colors
            }
            ....
});

Then when updating the chart with ajax: (inserting or removing columns)

chart.load({
            columns: arr2,
            unload: true,
            done: function () {

            },

        });

arr2 is a multidimensional array that feeds data into the chart.

I have tried inserting: { pattern: colors } here but it doesn´t work.

1

1 Answers

1
votes

So you're trying to tie colour assignment to the column's index (for want of a better word), but it appears c3 never decreases the index it's using on the pattern array when you remove data, only increases it as new data is loaded, and the pattern can't be changed after it's been set?

I suppose for the majority of cases (i.e. apart from removing the last column) this makes sense. Say you unloaded the first data column would you want the second and third data columns to suddenly switch to the first and second colours in the pattern or keep their existing colours? I'd be wanting the latter. But in that case, if the pattern index did decrement with the unload, a newly loaded column would be shown with the 3rd colour - already assigned - so you'd have two lines/sets of bars with the same colour on screen. It increasingly looks like what is needed is a map, which leads to...

If you want to replace data and keep the same colour the way to do it is through data.colors (plural) (http://c3js.org/samples/api_data_color.html) by tying each colour into a specific column's id. These can also be changed after initialisation, but as they're assigned by column id you generally shouldn't need to do that in this case.

Anyways the short answer is having had a poke about with some c3.js examples, no, I can't see a way to do what you want via color.pattern. That doesn't mean someone else doesn't know. Rubbish answer eh ;-)