Nivo: Legend of ResponsiveBar are not updated properly on resize

Created on 10 Dec 2020  路  3Comments  路  Source: plouc/nivo

_First of all, thanks a lot for this amazing project 馃憤_

Describe/explain the bug

It seems that the legend on charts rendered using the component <ResponsiveBar /> is not resized properly when updating the size of the parent.

The issue only happens with production build (I was not able to reproduce it with dev mode). It seems that it was introduced between 0.62.x and 0.66.x.

To Reproduce

The detailed scenario with dev and production bundles is available at: https://github.com/dubzzz/nivo-legend-resize-bug/blob/main/README.md

Steps to reproduce the behavior:

  1. Go to https://2zjxx.csb.app/ (or https://codesandbox.io/s/fervent-chaum-2zjxx?file=/src/App.js) - _dev bundle_
  2. Try to resize the window: legend and chart are both properly resized
  3. Go to https://dubzzz.github.io/nivo-legend-resize-bug/build/ - _prod bundle, same code_
  4. Try to resize the window: legend does not seem to be resized properly

Expected behavior

Production and dev should behave the same way. Resize of the window should resize the legend and the chart together.

Screenshots

Here is what I have with the production bundle:
nivo-prod

bar bug

Most helpful comment

@dubzzz thank you very much for the examples and detailed report, it comes from an issue with react-spring which is now used for the axes/grids, it has an issue, and the fix hasn't been released yet, but there are ways to fix it, please have a look at this issue: https://github.com/plouc/nivo/issues/1290

All 3 comments

Just in case it can help, I think that the issue is not limited to bar chart and also happens with others 馃

@dubzzz thank you very much for the examples and detailed report, it comes from an issue with react-spring which is now used for the axes/grids, it has an issue, and the fix hasn't been released yet, but there are ways to fix it, please have a look at this issue: https://github.com/plouc/nivo/issues/1290

Whaou thanks a lot for the linked issue, I'll have a look to it

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stahlmanDesign picture stahlmanDesign  路  4Comments

pratikguru picture pratikguru  路  3Comments

stahlmanDesign picture stahlmanDesign  路  3Comments

cedmax picture cedmax  路  4Comments

gcloeval picture gcloeval  路  3Comments