C3: Colors bug on unload/load

[yohankoehler]

I can't explain why colors gone so wrong with this code -> http://jsbin.com/qacoqasu/11/edit

When you choose a type from options boxes I just unload and then load new columns to the chart, colors in legend seems to be ok but not in the donut...

[masayuki0812]

Hi @yohankoehler , Thank you for trying c3.

This is caused by the call of load before unload processing done. I think there are two solutions for this.

1. Use unload parameter in load
   If you use this, the data will be loaded after the data specified by unload parameter unloaded. In this case, you should to specify the keys not included in the loading data as unload because the only those data should be removed when loaded (you can unload all data by setting unload = true, but this clear the all data once, so the animation of existing data will be lost).
   The code would be like this: http://jsbin.com/butotisi/2/edit
2. Use done callback of unload
   If you use this, you can load data after data unloaded. In this case, you should specify the key for unload too. The code would be like this:

chart.unload(unloadKeys, function () {
  chart.load({
    columns: data
  });
});

Could you try these solutions?

[yohankoehler]

These solutions works pretty well, ( here is the second one's http://jsbin.com/butotisi/3/edit) animation is indeed lost but nothing dramatic :)

Thanks for your reactivity and for your beautifull lib !

[masayuki0812]

Thank you for trying and preparing the second sample :) I close this issue.

[lpgeiger]

Hello this was very helpful. Can we please make this more visible in the api reference/docs . Especially "unload" param of load. Also would be nice to be explicit that 'null' should be used when all is cleared.

  chart.load({
      json: setData(),
      unload: null,
      keys: {
        value: listSeries() ,
        x: 'timeStamp'
      },
   });

[wheresjames]

This problem still exists for me even when using the suggested patches. This will eventually fail.. Also, thanks for all the hard work guys, amazing library :)

[sushantdhiman]

Can confirm this problem still exists but its apparently random, not sure what is the reason behind it. I am facing this problem with line chart

[tochoromero]

I'm also seeing similar problems.
On my case I have two charts, I want to keep the items between charts with the same color, so I just make sure the order of the items is the same between charts.

At the beginning everything is fine, but once I start loading and unloading the colors get out of sync even if the order is the same.

[doitadrian]

I think I have the exact same issue, like the one tochoromero has. I'm using the graph inside React, and when new data comes to the graph (via props), I trigger the following code:

this.graph.instance.load({
                unload: true,
                columns: [...]
            });

Graph reloads, but colors change.

This is before reload:

This is after reload:

The graph was initialized with:

  color: {
                pattern: ['red', 'blue', 'yellow', 'orange', 'brown', 'green', 'black', 'grey']
            }

Anyone else experiencing something similar ?

Thanks!

[wheresjames]

@tochoromero, @adrian1358, I don't think you can prevent that from happening with unload: true, try instead to remove only the outdated items such as unload: ['data1', ...]. See this example.

Edit: I guess I spoke too soon, because this works for me, though in my opinion, this produces a nicer transition

[woohling]

http://c3js.org/samples/data_stringx.html
even the official example has bug... after all the data loaded and then choose the color tag, color mismatches...