Regions replace does not work in regions API

[peterdesmet]

The regions API has a method for replacing regions:

chart.regions([
  {axis: 'x', start: 5, class: 'regionX'},
  {axis: 'y', end: 50, class: 'regionY'}
]);

In practice, this only seems to work for initializing a region (cf. regions.add()), but not updating a region. E.g. in this fiddle, the first setTimeOut function will set a region, the second one does nothing.

[aendra-rininsland]

Confirming — just ran into this myself. Currently working around it using chart.regions.remove() followed by repopulating using chart.regions in a setTimeout.

[aendra-rininsland]

Adding tests label — there should be a unit test that would have prevented this bug. Either the existing test is broken or an adequate test does not yet exist.

[aendra-rininsland]

Investigated this a bit further — it isn't a regressive bug, because chart.region has never actually worked. I've tried back as far as version 0.3.0 and I can't get chart.region to behave as it should in any version.

PR forthcoming, I need this fixed literally tonight. Troubleshooting using this fiddle.

[peterdesmet]

Thanks for testing. Can't wait to use this.

[aendra-rininsland]

Haven't been able to figure this out yet, but have been able to best work around it by calling chart.destroy() followed by a new chart.generate().

[peterdesmet]

Since I want to use the regions API to respond to a user clicking on the chart, I can't use chart.destroy(). I also tried regions.remove(), followed by regions.add(), which works, but not on fast clicking back and forth on the chart. So, in the meantime, I'm using two gridlines to indicate the region: not perfect, but it does the job.

[sentient]

This is what I do. I set the new regions with a 500ms delay and a graph.flush()

(using angular bower package "c3-angular": "~0.6.0")

        var setNewRegions = function(){ chartSpO2.regions([{
              axis: 'y',
              end:  $scope.mod.SpO2.settings.danger,
              class: 'region-danger'
            }, {
              //Low but no panic yet
              axis: 'y',
              start: $scope.mod.SpO2.settings.danger,
              end: $scope.mod.SpO2.settings.warning,
              class: 'region-warn'
            }, {
              axis: 'y',
              start: $scope.mod.SpO2.settings.warning,
              class: 'region-info'
            }
          ]);
          chartSpO2.flush();
        };

        //remove old region definition
        chartSpO2.regions([]);
        //set new definition with a 500 ms delay.
        $timeout(setNewRegions, 500);

[crabmusket]

I'm using @sentient's approach and it works, though it's annoying. It doesn't appear to work with a smaller timeout, which makes me wonder if somehow the chart's animation is killing the regions during rendering.

[masayuki0812]

I think this has been fixed. There was a bug that data of rect in region g is not updated even if new region data given.

[masayuki0812]

Let me close this for the moment and please reopen if something is wrong.

[martingraham]

You can push the g parent elements data down to the rect element by doing .select rather than .selectAll (it's a little-known d3 effect that often causes errors rather than solves them)

Since there's only 1 rect per group element there's no problem with not using .selectAll

        regions = $$.mainRegion.selectAll('rect').each(function () {
            // data is binded to g and it's not transferred to rect (child node) automatically,
            // then data of each rect has to be updated manually.
            // TODO: there should be more efficient way to solve this?
            var parentData = $$.d3.select(this.parentNode).datum();
            $$.d3.select(this).datum(parentData);
        }),

becomes
regions = $$.mainRegion.select('rect'),

[pabloschiavini-zz]

I just re-tested with the latest version and the problem persists.
I was able to reproduce the problem using the example website https://c3js.org/samples/region.html and the following code:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 400],
            ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
        ],
        axes: {
            data2: 'y2'
        }
    },
    axis: {
        y2: {
            show: true
        }
    },
    regions: [
        {axis: 'x', start: 2, end: 4, class: 'regionX'},
    ]
});

setTimeout(() => {
    chart.regions(
        [{axis: 'x', start: 3, end: 5, class: 'regionY'}]);
}, 1000);

Workaround: Running chart.regions.remove({class: ['regionX']}) before "setTimeout" seems to work, but only for large timeouts. From usability point of view, it's quite anoying.

[dao-phuong]

@masayuki0812 I also have the same problem with regions API at lastest version. Can you open this issue again

[drewkiimon]

Having this problem still as well.

[Hegyusz]

Still having the same problem.
I can see, that <g class="c3-region c3-region-0" x="..." y="..." ...> x and y params are overridden with the new values, but the chart is not refreshing.
Noticed also, when resizing the page, the x and y params are overridden, but the chart not refreshing either.