Wrong ScatterPlot points positions when useViewBoxResizing with useCanvas

[JonathanJDubois]

Hi thanks to add the canvas backend rendering rendering it will help us a lot.

I have a small issue when I use the canvas rendering backend with the useViewBoxResizing options enabled.

It seems the canvas no longer fit to the svg item.

How to reproduce the problem:

• Create a scatter plot with both useCanvas and useViewBoxResizing options.
• Set the chart container size to a different size than the size given in the options.
  => The charts is correctly scaled but the canvas is not correctly displayed
  

[gordonwoodhull]

Hi @JonathanJDubois, thanks for the report!

I'm not a big fan of useViewBoxResizing since it stretches the SVG and distorts it, but I was glad to merge the feature since I recognize that it's easier than listening to events that cause a resize of the chart.

However, the feature definitely won't work with useCanvas since the canvas element is not affected by the SVG viewbox. So you will have to detect when the chart changes size, and resize the chart accordingly.

If your chart divs are pinned to the right size, the resize can be as simple as

    chart
        .width(null)
        .height(null)
        .rescale()
        .redraw();

Detecting the resize is more difficult than it should be. The ResizeObserver API only landed recently, and although caniuse.com reports support across the three major browsers, it still didn't work for me in Safari.

In any case, I added canvas support to the resizing scatter example. This relies on the old and universal window resize event. It uses float: left and calculates the chart width and height whenever the window is resized.

And I created a new resizing scatter plot with ResizeObserver example. The code is much nicer: it uses flexbox to determine the sizes, and can automatically determine the width and height as shown above.

Both examples disable animated transitions, because useCanvas(true) doesn't support that, and it looks really wrong when the plot changes size immediately and the axes lag behind.

I also found that the canvas element was not getting resized, so I fixed that in version 3.1.6.

[JonathanJDubois]

Hi thanks for your quick answer and for the fixes.
I will look at changing the way we resize our charts.