C3: data.regions bug when zoom: enabled

[wansinn]

Hey,

first of all thanks for the awesome work with this lib!

I ran into an issue / bug? when using regions with enabled zoom:
The line with regions in it doesn't change when zooming, the points do.
You can see the issue here: http://jsfiddle.net/xqjb2zhb/

• One line has regions and doesnt zoom
• the other line has no regions and zooms properly.

Another question:
Is it possible to define "connectNull" on a per line base?
For example: I have several lines with null vales. Some I would like to be connected inbetween, some not. (if I should ask this as a seperate question just throw me a hint and I will do so).

cheers,
oli

[jrsala]

Same issue here, any line with regions specified on it does not react to zooms.

Thank you for your work!
J.

[sidiee]

Do we have any update on this issue ????

[jrsala]

I needed a region style to make the end of a line dashed (to represent the uncertainty of the future) and instead I has to use a region colored overlay, which is not as practical and appropriate as dashed lines but still OK.

I guess I'll just do all this in D3 myself when I have time?

[gearoidc]

Same issue here. Attached Gif to show issue.

[chetanmotamarri]

Still facing the issue. Any update with this ??

[panthony]

Fix is merged but no ETA for the next release.

[Mshardul]

It's been almost 2 years, since the fix. Any updates on the next release date?

[baconinthemorn]

I can confirm I am also still witnessing this issue where regions are not updating/reacting to when a chart is zoomed (with v0.7.15). Any ideas for a workaround in the meantime?

[Lionking93]

I also encountered this issue with version 0.7.15. From inspecting the region elements I noticed that the g elements with the c3-region class do resize but the rect elements inside the g elements for some reason do not. I managed to create a workaround by specifying a callback function to the onzoom property (https://c3js.org/reference.html#zoom-onzoom) and modifying the rect element width and x attributes with d3 to match the width and x attributes of their parent elements.

config.zoom.onzoom = () => {  
    let regions = d3.selectAll("#chartId .c3-region")._groups[0];  
    regions.forEach(regionElement => {
        let region = d3.select(regionElement);
        let rectangle = d3.select(regionElement).select("rect");
        rectangle.transition().duration(0).attr('width', region.attr('width'));
        rectangle.transition().duration(0).attr('x', region.attr('x'));
    });
}