Plotly React component?

[mbonaci]

There are two React components on npm, but those are both naive implementations that simply re-render the whole chart when anything changes.
What would be super cool is that someone with internal knowledge of Plotly tackles this.
Since it seems that React is here to stay, this component would significantly improve the adoption of Plotly.
Oh, and BTW, I was really happy to see the modularity story going forward in big steps. Thx for that.

[alexander-daniel]

@mbonaci Thanks for reaching out!

This is an interesting topic. I have seen a couple of the implementations you've referenced, and you're correct. While they work they are a little bit naive in their redraw loops.

We are experimenting with Plotly and React at the moment, and what I would suggest to you is the following:

• Create a simple Plotly React component. (A div with a ref === 'plotContainer' or something)
• on componentDidMount, instantiate an empty Plotly graph on said ref: 'plotController'
• Listen for changes on componentWillReceiveProps and apply any Plotly.restyle or Plotly.relayout commands as appropriate. Your graph will be redrawn!

We are still currently experimenting with the best flow for this, so I cannot link you to any examples. Feel free to mess around with the ideas above, and I can get back to you with something a little more concrete when I'm confident it is a solid solution.

Does that work for you?

Cheers, and thanks for the great Q!

[mbonaci]

That's a great feedback.

[alexander-alvarez]

I'm currently doing a similar thing with Ember.. very naive atm but will let you know if grows into more.

[backnotprop]

Nice feedback @alexander-daniel

[mbonaci]

Hi @etpinard, can you explain why you're closing the issue? Does a component exist somewhere?
I read in one of the meetup descriptions (some React meetup that you provided venue for) that you reimplemented your web site in React, so I was hoping to get a professional React Plotly component out of that process :)
thx

[etpinard]

Can you explain why you're closing the issue?

This issue is outside the scope of plotly.js and hence this repo.

As per our contributing guide, implementation questions should be asked on community.plot.ly or on SO.

Does a component exist somewhere?

• https://github.com/benjeffery/react-plotlyjs
• https://github.com/michaelAlvarino/React-Plotly

so I was hoping to get a professional React Plotly component out of that process

This is not in our plans for the coming year.

[benjeffery]

I intend to make react-plotlyjs do what is suggested above, but can't tackle it right now due to other priorities. Pull requests for this always welcome if anyone has the time before I do!

[mbonaci]

@etpinard I simply can't believe that you don't see how all your new features and marketing efforts are less important than this issue. When a company chooses a charting library, it first looks whether it supports the framework they are using and we all know that React is No1 and is gaining more ground every day.
I mean it's so obvious that this should've been your priority all along.

Sorry, I had to get this off my chest. I don't want to troll, just trying to influence your decision (above) because I like your library :)

[mbonaci]

Please don't tell me you deleted the comment I got notification for (or maybe the author did)?:

[otisg]

I have a feeling I messed something up and accidentally removed my own comment. Here it is:

I simply can't believe that you don't see how all your new features and marketing efforts are less important than this issue

While I don't know about your marketing and other features and thus couldn't necessarily say this, I think @mbonaci is absolutely right that it doesn't make sense to just ignore/close this issue. ReactJS is huge and not providing out of the box ReactJS component for Plotly will make some potential Plotly users look elsewhere. I speak from personal experience. We are about to switch our charting libraries here at Sematext and our UI is being rewritten with ReactJS and Redux, so when I saw http://recharts.org/ I thought to myself "so do we really want to start using Plotly now? Why not just use Recharts if it has ReactJS support and we are working with ReactJS? What advantage does Plotly provide?". I suspect many people will ask the same questions and seeing that Plotly has a ReactJS component would be a huge plus for Plotly and Plotly would get new users that would otherwise choose another lib. I point this out because I like Plotly and I think providing ReactJS components for Plotly would have very good ROI for Plotly.

[mbonaci]

Damn, I would write it myself but don't know Plotly internals, so it would simply take too much time.

[mbonaci]

I'd be interested in participating co-sponsoring the development effort, so I wanted to open up an issue on https://www.bountysource.com, but this issue is closed, so it's not available.

[sudburyrob]

Marco, Do you have a few minutes to speak this morning regarding your co-sponsoring interest?? I can do sometime after 10 or 10:30 this morning?

[mbonaci]

Hi @sudburyrob, thanks for that.
Do you know how bounty source works?
In short, people either start a fundraiser campaign or pledge some $ amount to an issue. Then, when someone like you sees that there's enough $ accrued to justify the effort he/she claims the issue and starts working on it.
When the work is done you claim the bounty.
If backers accept your claim (i.e. are satisfied with the implementation) you receive the bounty.

To be clear, I did not want to fund the whole thing, just pitch in with something like $50 in hope that I could encourage others to do the same (and of course, to demonstrate the importance of this issue to Plotly maintainers).

BTW do you have an estimate of the amount that would be needed to fund this implementation?

[etpinard]

@mbonaci As per #204 (comment), this issue will remain closed because it is outside the scope of this repo.

I'd recommend opening an issue on either

• https://github.com/benjeffery/react-plotlyjs , or
• https://github.com/michaelAlvarino/React-Plotly

which ever you find more promising and link it to a bounty source tickey.

We apologise for the inconvenience.

[koliyo]

The react-plotlyjs wrapper is broken, see benjeffery/react-plotlyjs#11

I would advice using the following Plotly-react tutorial instead
http://academy.plot.ly/react/3-with-plotly/

[benjeffery]

This issue is fixed in v0.3.6 of react-plotlyjs. Recent plotly changes broke the old method - thanks for bringing that to my attention.

[FrantisekGazo]

Did somebody managed to solve this issue?

[mbonaci]

@FrantisekGazo don't know, we switched to chart.js.

[FrantisekGazo]

@mbonaci thanks, I'll look at that

[avishaan]

@FrantisekGazo did you solve this or did you switch to chart.js as well? I am in a similar boat and deciding what to do

[FrantisekGazo]

@codehatcher I did a simple implementation based on this article http://academy.plot.ly/react/3-with-plotly/ . It's not what this issue was created for, but it was good enough for me.
I also changed Component#shouldComponentUpdate() implementation a I'm using Plotly.restyle() when possible.

[jackparmer]

A good option here for simpler charts is Victory by the folks at Formidable Labs:
http://formidable.com/open-source/victory/

[rreusser]

Hi! Just wanted to let everyone know that we're working on an official plotly.js react component! We just published v1.0 of react-plotly.js today.

Just a few important notes on the current state and the roadmap:

The initial version should work fine but is not yet optimized. Currently, it calls Plotly.newPlot each time the component renders. For now, there's an optional revision prop that hooks up shouldComponentRender and lets you decide when the component needs to be updated.

To solve this, we're building a Plotly.React API method that will be used internally by the component to optimize the updates and restrict them to only what needs updating. The reason this is not in version 1.0 is that the Plotly API has a lot of surface area and a lot of use-cases so that we want to make sure we get it right. In particular, naive diffing isn't a perfect fit for moderately sized datasets, much less the sort of large dataset that might be used by a high-performance WebGL plot.

Once Plotly.React is released in plotly.js, usage should be effectively identical, but since there are potential gotchas, version 2.0 of the component will be the first version to take advantage of it. Once it's built in, you should get faster updates for free and hopefully not notice a huge difference otherwise. (And, just to mention it, you won't have to use React to use the Plotly.React method.) You can track progress on Plotly.react here.

I'll leave this issue locked for now, but you're welcome to follow up with discussion of specific usage or design issues on the plotly.js-react repo.

[jackparmer]

To solve this, we're building a Plotly.React API method that will be used internally by the component to optimize the updates and restrict them to only what needs updating.

Plotly.react has been merged into Plotly.js and implemented in react-plotly.js: plotly/react-plotly.js#2 (comment)

Removing the in progress label 🎉