Visx bad transitions with ParentSize (comparison with Recharts)

[Nemmcy]

I have been using Recharts for a while and I am quite happy with their ResponsiveContainer. It doesn't only work great when manually resizing the viewport, but also with width, height and margin transitions.

However, Recharts lacks functionalities and is quite bloated. So I decided to try Visx which provides anything you need at half the bundle size at the very least. My very first thing on the list was to verify if charts transition smoothly which is the strict minimum for a dashboard that has a drawer.

I tried everything, ParentSize, withParentSize and ScaleSVG with debounceTime={0}, but it comes with bumps and it looks like the transition is not uniformly distributed.

Here is a CodeSandbox comparison of Recharts vs Visx:

• Simulation of a drawer that stretches the content when opened
• Each chart (responsive element included) has a parent div with width=90%
• Recharts chart uses the Responsive Container with prop width=100%
• Visx chart uses the ParentSize element which is under the hood a div with default width=100% height=100%
• Closed state: both charts have width=0.9*1=90% and marginLeft=0
• Open state: both charts have width=0.9*1-100px=90%-100px and marginLeft=100px

This is a really standard drawer implementatin which is, for instance, used in MUI's docs.

As you can see, the Recharts chart transition very smoothly, but the Visx one not at all. The right-hand-side has bumps and looks like it has by default a different transition-timing-function under the hood or something in that order (same problem with linear transition).

My implementation is perhaps wrong and this is doable in Visx too, so please correct my mistakes!

If this is not doable and not planned to be corrected in the near future to be at least as good as with Recharts, please let me know so I can start looking for other libraries or simply continue using Recharts.

[hshoff]

Hi @nemdo, thanks for checking out visx.

You can add width: 100% to the svg in your demo and it should be smooth. https://codesandbox.io/s/responsive-recharts-vs-visx-forked-5bq8fm?file=/src/Visx.js

<svg width="100%" height={height}>