Skip to content
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

Updates to pie chart data require click on legend to update properly #62

Closed
lilyannh opened this issue Mar 12, 2018 · 7 comments
Closed

Comments

@lilyannh
Copy link

First render works fine. When I update the data prop, the chart changes, but incorrectly - it shows just one label/group with 100% portion of the pie. At this point, if I click on the legend to toggle the trace, the plot updates and works correctly. Any subsequent data prop updates will generate the same behavior; clicking on the legend always fixes it.

I have the same chart in bar chart form, responding to the same data with changes at the same time. Bar chart updates OK. Using react-plotly.js 1.7.0 and plotly.js 1.35.2, loaded via script tag.

Prior to today, I had been running plotly.js 1.31.2 - it was working on that version of plotly.js. The project I am currently working on is a re-write of a jquery app to a react app. I tested the same pie chart on the jquery app with plotly.js 1.35.2 and it was able to interact fine - so it seems that this problem is an interaction between 1.35.2 and react-plotly.js

@nicolaskruchten
Copy link
Contributor

There was indeed a big change in the interaction between react-plotly.js and plotly.js when the Plotly.react() method was implemented in plotly.js@1.34.0, so you may be experiencing issues from that. Can you post a CodePen which demonstrates the issue you're seeing please?

@lilyannh
Copy link
Author

@nicolaskruchten
Copy link
Contributor

Thanks for this, it's quite clear :)

@alexcjohnson this seems like Plotly.react issue to me...

@alexcjohnson
Copy link
Collaborator

Huh, seems like a transform issue. I'll make an issue on the plotly.js side, but the good news is as of v1.32 you don't need to aggregate pies yourself, it's built into the pie trace

Here's simplified to pure plotly.js with transform, shows the error:
https://codepen.io/alexcjohnson/pen/xWwrXR?editors=0010

Here's the same with no transform, works as expected:
https://codepen.io/alexcjohnson/pen/BroZNx?editors=0010

@alexcjohnson
Copy link
Collaborator

update: it's a problem with transforms and Plotly.react - switch to restyle and it works correctly again. @Snazzypants thanks for the report!

https://codepen.io/alexcjohnson/pen/geaRej?editors=0010

@lilyannh
Copy link
Author

@alexcjohnson Thanks! Easy enough to just not use the transform!

@antoinerg
Copy link
Contributor

The Codepen provided by @Snazzypants now works as expected using the latest version of plotly.js 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants