New regions are not rendered when updating props

[myktra]

Seems like unlike properties like axis and grid, changing regions neither removes any previous regions that were drawn the first time the C3Chart component was rendered nor renders the new ones.

Adding this.chart.regions.remove() to componentWillUpdateProps removes the regions but then new regions that are specified are not redrawn when C3Chart is re-rendered.

In a perhaps related observation, passing the unloadBeforeLoad prop doesn't seem to work for me...rendering seems unpredictable.

[myktra]

Potentially related to https://github.com/c3js/c3/issues/1527.

[nels-o]

I found a quick workaround for a demo. Until c3 fixes this on their end, this will at least cause the regions to update as expected.

updateChart(config) {
    if (!this.chart) {
      this.chart = this.generateChart(findDOMNode(this), config);
    }

    if (config.unloadBeforeLoad) {
        this.unloadData();
    }
    
    // If there are regions in the config, update them.
    // If there are regions on the chart, and the config specifies none 
    // then delete the existing regions.
    if (config.regions) {
        this.chart.regions(config.regions);
    } else if (this.chart.regions && !config.regions){
        this.chart.regions([]);
    }

    this.loadNewData(config.data);
  }

[andreasheim]

The c3 docs state that calling unload just before load will not work properly, as it will occur in the midst of the animation.

http://c3js.org/reference.html#api-unload

If you call load API soon after/before unload, unload param of load should be used. Otherwise chart will not be rendered properly because of cancel of animation.

I haven't tested this yet, but I think what should be done instead is pass unload: true when loading:

http://c3js.org/reference.html#api-load

If unload given, data will be unloaded before loading new data. If true given, all of data will be unloaded.

Hence it should work like this:

  updateChart(config) {
    if (!this.chart) {
      this.chart = this.generateChart(findDOMNode(this), config);
    }

    let data = config.data;
    if (config.unloadBeforeLoad) {
      data = { ...data, unload: true };
    }
    this.loadNewData(data);
  }

[andreasheim]

I'm not using regions, so I'm not sure if my changes fix that. However I did verify that using load with unload: true does fix my issue with data not updating properly. Potentially both changes may be needed.