Bar Chart Update Anomaly in Some Use Cases (Power BI)

[jamshally]

First-up, thanks for this great library. Now for the bug:

In Short

Under some circumstances, the axis for the Nivo Bar Chat does not seem to update as expected when the data is changed. Is it possible to force a chart to somehow redraw?

Scenario

It is possible to embed any React code inside of Power BI (see here). This seems to work very well with Nico Bar Charts too, except for one small anomaly when it comes to chart redrawing. For some reason, when the data changes, the bars of the chart seem to update, but there are several aspects of the chart that do not seem to redraw, including the axis. The only way around this seems to be to completely unmount the chart, and then re-mount it (by hiding and showing). I am trying to understand this behavior, identify a better solution.

Screenshots

The following screenshots show two examples:

1. Working - The Nivo Bar Chart updating, as expected, when inside a standard website
2. Issue - The Nivo Bar Chart only partially updating when inside a Power-BI react component

1) Working - Nivo Bar chart embedded in React Website

Note, as the data is changed, the axis redraw to reflect the changes in the data (as expected)

2) Issue - Nivo Bar chart embedded in Power BI

Note, as the data is changed, the axis does not redraw to reflect the changes in the data (the issue) UNLESS the entire chart is unmounted, and remounted

SourceCode

• The code from example 1 is in a code sandbox here: https://codesandbox.io/s/nivo-axis-render-issue-lx3iy
• The code for the power-bi version (second example) is almost identical to the first. It will be much more complex recreating this scenario, so I'll hold off instructions/recreation steps for that for this initial ticket submission

Desktop (please complete the following information):**

• OS: Windows
• Browser: Chrome
• Version: Latest Chrome, OS, and Nivo Charts version (0.67.0)

Additional Info

I recognize that this is a fairly specialist circumstance, and quite possible outside the scope of the expected Nivo use cases. However, any info, pointers, or ideas you have about how to resolve are appreciated.

Thanks in advance

[jamshally]

As a follow-up - I have found that by using the this React key technique, I can force the entire chart component to re-mount, which forces the chart to re-render. This seems to be an acceptable work-around for now, although it would still be beneficial to find a more optimal method to force the chart to redraw

[plouc]

@jamshally, I think this is an issue with react-spring, please have a look at this other issue: https://github.com/plouc/nivo/issues/1290, it also contains suggestions to fix it, however I have no idea how the fix could be applied in your current setup.

[plouc]

@jamshally were you able to try the suggested fix? is this issue still relevant?

[plouc]

I'm closing this issue due to lack of reply, feel free to comment if this is still an issue, I can re-open it.

[endtoendlab]

@jamshally Did you manage solving this issue ? Also, were you able to have success with using nivo components in PowerBI. I'm about to do the same, and not sure if it's a good idea so I wanted to ask your feedback about how did it go. Thanks