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.