Responsive charts issue when using FlexBox or CSS grids

Reproducible demo here: https://codesandbox.io/s/lp16vvz6n7

As you can see, the top chart here (in the flex row) is not responsive.

Happy to help contribute if no one on the core team immediately knows. It might have something to do with react-measure that’s used in @nivo/core for the <ResponsiveWrapper> component.

[ja0nz]

I solved this issue with the AutoSizer HOC.

import { AutoSizer } from 'react-virtualized'
<AutoSizer>
    {({ height, width }) => (
        <Pie
            height={height}
            width={width}
            ...
         />
    )}
</AutoSizer>

Because of the known issues like “infinitely growing diagrams” I almost always use the AutoSizer wrapper in favour of the <Responsive*> components.

[TerryCLAWong]

I think I had a similar issue where my <ResponsiveBar> would respond if zooming out but would not shrink when zooming in with my React app. The fix was to put the <ResponsiveBar> into a <div> that had a width of less than 100%.

So the following fixed my problem:

<div style = {{width: "99%"}}>
<ResponsiveBar
...
/>
</div>