New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Responsive charts issue when using FlexBox or CSS grids #411
Comments
I solved this issue with the AutoSizer HOC.
Because of the known issues like "infinitely growing diagrams" I almost always use the AutoSizer wrapper in favour of the <Responsive*> components. |
I ran into this issue too. I ended up using Recharts instead because I was on a deadline and I needed something that worked. It's unfortunate, because the Nivo charts certainly look better. |
@ja0nz Wow this works great. I've been using React Virtualized for a while now but I never would have thought to use its auto-sizer. Thanks |
I was having the same issue when using the I've since implemented @ja0nz solution (as well as changing from |
The following code is a light-weight version of @ja0nz's solution.
|
Minor addition to @ja0nz's solution. I think AutoSizer width should be 100% to keep the tooltips inbound.
|
Like @tanmaybhatt said, the tooltip (both anchor and tooltip width) has problems when using @ja0nz 's solution. nivo/packages/tooltip/src/hooks.js Line 35 in f2816f4
which then decides to always use the same anchor direction. My fix for it was something like this: <AutoSizer disableHeight>
{({width}) => (
<div style={{width: width + 'px'}}>
<Line
height={500}
width={width}
//...
/>
</div>
</AutoSizer> |
Got similar problem and tried to tinker with your sandbox.
|
@ronsigter, like this:
? Didn't work here |
Any update on this bug? I am seeing the same behavior in both flexbox and grid. react-virtualized doesn't feel like a great work-around for me. |
I tried to use Autosizer but then Edit: I know the problem now but not the solution. The |
I think I had a similar issue where my So the following fixed my problem:
|
Not an ideal solution but setting the also @TerryCLAWong's solution works perfectly too |
Solution from @ronsigter worked for me 👍🏻 |
@ronsigter 's solution worked! I added it to container class. |
Wasn't a big fan of the container class solution due to how my app is set up so I had to do the following on a Typescript React app where flexbox is used. My pie chart component looks like this: interface pieData {
id: string
label: string
value: number
color: string
}
interface pieProps {
data: pieData[]
minHeight?: number | string
minWidth?: number | string
}
export const DatavizSVGPie = ({
data,
minHeight = 0,
minWidth = 0
}: pieProps) => {
return (
<div
style={{
minHeight: minHeight,
minWidth: minWidth,
height: '100%',
width: '100%'
}}
>
<ResponsivePie
data={data}
...
/>
</div>
) Then on the page where I'm using the component: <div className="flex gap-6">
<div className="flex-1 flex flex-col items-center justify-center">
<DatavizSVGPie data={pieDataFormattedData} minHeight={292} />
</div>
</div>
This correctly inherited the height and width of the flexbox so it doesn't have to be set manually. |
Hello, Is there any update concerning this issue. The workarounds proposed are working, however it's better to have a fix. |
Using the min-width: 0 worked for me too. Thanks. |
This was the correct solution for me too. I tried using minWidth but it didn't work. I also noticed some strange behaviour too: If you set |
This seems like a good solution so far: <div
style={{
display: 'grid',
gridAutoColumns: 'minmax(0, 1fr)',
height: '24rem',
}}
>
<ResponsiveLine ... />
</div> Note that, as shown, your container must have a height as well as the |
display: grid; this is for the grid container, grid template columns depends on the number of grid items within the container. |
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.The text was updated successfully, but these errors were encountered: