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

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>

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

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

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

As of 0.69.1 this bug still exists.x.

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

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.

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.