Endless scaling animation when a ResponsiveChart is placed in CSS grid?

[codepunkt]

What i'm trying to do is to have a an arbitrary sized dashboard tile layouted with CSS grid. I'm not sure why the ResponsiveBar shown in my Codesandbox example is infinitely scaled up?

https://codesandbox.io/s/4z8z15mp4w

[stahlmanDesign]

Previously I couldn't get a ResponsiveLine chart to display at all even thought my parent divs have 100% height. I used the divs with inline styles in your pie example to wrap my ResponsiveLine and I finally see it being rendered to the page, but I also get a 'melting' effect.

[stahlmanDesign]

If I specify a height (but not width) in the responsiveLineSettings it stops 'melting' and will expand responsively to width when the window is dragged wider. But it will not shrink back when the browser window is narrowed. EDIT I set it in a bootstrap 'container' and now it does expand and shrink horizontally.

[stahlmanDesign]

I think I have a solution that works without using grid css or setting height in lineSettings.

<div style={{ height: '400px' }}>
  <div style={{ height: '100%', display: 'flex' }}>
     <MyChart { ...this.props } { ...this.state } />
   </div>
</div>

Then in MyChart I remove width and height from lineSettings and return this

return <div className='container' style={{ background: 'white' }}>
      <ResponsiveLine
        data={ lineData }
        { ...lineSettings }
      />
</div>

The 'container' style is from bootstrap. In this case it just makes width 100% so you can alternatively use style={{ width: '100%' }} instead.

[skulptur]

I'm having the same melting problem. Using a fixed height works, but my parent component can be scaled and therefore fixed height is not an option.

[Optarion]

I'm getting the same problem on a design using css-grid. Any news on that issue? Thanks

[stahlmanDesign]

Nivo uses a module called Measure and the problem is with that module. The Measure forum might have ideas if setting your width or height to 100% doesn't work or isn't an acceptable solution for your particular use case.

[shea]

I just ran across this issue using css grid and found a workaround that's working for me. Placing the chart inside a position: absolute container inside a position: relative container seems to let it resize properly. Maybe this will be helpful for someone.

https://codesandbox.io/s/1rzl826krj

<div style={{position: 'relative'}}>
  <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
    <ResponsiveBar />
  </div>
</div>

[lukejagodzinski]

The same problem exists when using FlexBox. It's pretty annoying. You can't just expand chart to fill entire content...

[cbfrance]

I experienced the melting bug. I wrote a component that I use on each of my Nivo charts, it uses @shea's absolute container to avoid problems in a CSS grid.

This component also sets a default height, and accepts a height prop from the parent. (Since all Nivo elements currently require a specific height on the parent container.)

This is not well tested but fixed my melting problems today:

const NivoContainer = ({ children, height }) => (
  <div style={{ position: 'relative' }}>
    <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
      <div style={{ height: height || '800px' }}>{children}</div>
    </div>
  </div>
)

export default NivoContainer

[roz0n]

Is there any update regarding this issue, or is the absolute-positioning workaround the recommended approach?

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[MVR5991]

As of 0.69.1 this bug still exists.x.

[euan-gwd]

As of 0.72.0 bug still exists, workaround does not work.

[irlgabriel]

As of 0.72.0 bug still exists, workaround does not work.

Workaround with div absolutely positioned inside another div works for me on 0.73.0