6 ms·

Recharts – A composable charting library built on React components

101 points by rtcoms 10y ago

crudbug 10y ago
This looks very neatly done. Congrats. Do you have plans for a theme engine ? I would to see a dark theme, I am using golden layout [0] for some projects. [0] https://golden-layout.com/examples/ https://golden-layout.com/examples/
felipellrocha 10y ago
This is amazing. I've always said I'd switch from d3 to react as soon as transitions were better supported in react, and it seems like you guys were able to accomplish that? How did you guys do it?
- netghost 10y ago
  Looks like it actually uses d3 ;)
crossman 10y ago
How does this compare to victory (https://github.com/FormidableLabs/victory https://github.com/FormidableLabs/victory)?
- yadongwen 10y ago
  Recharts seems to be from Alibaba. They also open sourced a very good UI framework ant design. https://github.com/ant-design/ant-design https://github.com/ant-design/ant-design
deleted 10y ago
[deleted]
divbit 10y ago
I immediately want to do a project with this - looks very cool.
SwellJoe 10y ago
I always wonder why live data isn't more of a focus for charting libraries. In this case, it's almost ridiculous that live data (and examples of such) aren't front and center. Isn't the point of doing anything in React the reactive nature of the thing? If it doesn't make the process of having live interactive data easier, building it in react seems like a pointless exercise. I'm sure it is possible to do live data with this, of course, I just don't see it obviously discussed in any of the examples or docs, and that's a shame. I can't think of any instance where I've looked into charting in the past five years that I didn't want live data and interactivity.
- bradhe 10y ago
  > In this case, it's almost ridiculous that live data (and examples of such) aren't front and center. The liveliness of the data doesn't have much to do with the library itself. The question you should ask yourself is "how do you update data within a chart?"
  - SwellJoe 10y ago
    I have no idea what action you're suggesting I should take. Obviously I've asked myself that question, which is why I brought it up. Is this some sort of hacker koan? I'm pointing out that very few charting library authors seem to have any interest in providing a clear path for supporting live data (by that, I mean charts that update in realtime when new data arrives). It should theoretically be automatic in a library based on react; updating the data that backs the ViewModel should update the View. But, I don't see any examples of that or mention of that capability in a cursory read of the site, or how it is handled when data is updated (like is it smoothly animated, does it just hop to the new status, or does it not do anything at all, breaking the reactive pattern and making building it for react a pointless exercise?).
    - ycombinatorMan 10y ago
      http://jsfiddle.net/ancpedz4/1/ http://jsfiddle.net/ancpedz4/1/ Click the word clicker, you will see what happens.
recursive 10y ago
Every example seems to be animated. I find this kind of off-putting. The animation just serves to demand my attention before I can really make any use of the graph.
- joelg 10y ago
  Animating the loading of charts and force-directed graphs are the <marquee> and <blink> of the 2010s. In 5 years, they'll seem grotesquely tacky.
alphast0rm 10y ago
How does this compare to react-vis (https://uber.github.io/react-vis/ https://uber.github.io/react-vis/)?
code_research 10y ago
Hey, all you makers of chart libraries! First a big thank you for your fantastic efforts and for letting the world participate by open sourcing all that stuff! But one thing: Please make it easy to generate VIDEO OUTPUT with your libraries! This is an artificial limitation that I hit with many charting libraries - output generation is html (js) only and people who would like to create moving images have unnecessary problems shoehorning that nice chart library into outputting to a high resolution video. Please do not limit your designs to one output medium. Think video, too, THANKS!
- videobrain 10y ago
  http://zulko.github.io/blog/2014/11/29/data-animations-with-python-and-moviepy/ http://zulko.github.io/blog/2014/11/29/data-animations-with-... But yes, authors of chart libraries should add "output to video / any medium" on their "required features" list.
- vanderZwan 10y ago
  Have you tried using Julia? Tom Breloff's Plots.jl[0] package has a built-in @gif macro, which already relies on ImageMagick and/or FFmpeg (depending on which one of them is present). So it shouldn't be too hard to extend that to mp4 (just pass different output parameters to FFmpeg). In fact, he has an issue open for it[1] so he appears to be working on that. [0] https://juliaplots.github.io/#simple-is-beautiful https://juliaplots.github.io/#simple-is-beautiful [1] https://github.com/tbreloff/Plots.jl/issues/320 https://github.com/tbreloff/Plots.jl/issues/320
Etheryte 10y ago
The page is completely unusable on mobile: zoom is disabled and no responsiveness. Who thought that's a good idea?
- michaelmior 10y ago
  I'm guessing the authors didn't decide that not making the page responsive was a good idea. It seems perfectly reasonable that there were other priorities. You can always send a PR if you think it's that important. (I'm assuming the source of that page is on GH as well.)
mead5432 10y ago
Super cool. Excited to try it out.
deleted 10y ago
[deleted]

101 points by rtcoms 10y ago

This looks very neatly done. Congrats. Do you have plans for a theme engine ? I would to see a dark theme, I am using golden layout [0] for some projects. [0] https://golden-layout.com/examples/ https://golden-layout.com/examples/

felipellrocha 10y ago

This is amazing. I've always said I'd switch from d3 to react as soon as transitions were better supported in react, and it seems like you guys were able to accomplish that? How did you guys do it?

netghost 10y ago
Looks like it actually uses d3 ;)

crossman 10y ago

How does this compare to victory (https://github.com/FormidableLabs/victory https://github.com/FormidableLabs/victory)?

yadongwen 10y ago
Recharts seems to be from Alibaba. They also open sourced a very good UI framework ant design. https://github.com/ant-design/ant-design https://github.com/ant-design/ant-design

deleted 10y ago

[deleted]

divbit 10y ago

I immediately want to do a project with this - looks very cool.

SwellJoe 10y ago

I always wonder why live data isn't more of a focus for charting libraries. In this case, it's almost ridiculous that live data (and examples of such) aren't front and center. Isn't the point of doing anything in React the reactive nature of the thing? If it doesn't make the process of having live interactive data easier, building it in react seems like a pointless exercise. I'm sure it is possible to do live data with this, of course, I just don't see it obviously discussed in any of the examples or docs, and that's a shame. I can't think of any instance where I've looked into charting in the past five years that I didn't want live data and interactivity.

bradhe 10y ago
> In this case, it's almost ridiculous that live data (and examples of such) aren't front and center. The liveliness of the data doesn't have much to do with the library itself. The question you should ask yourself is "how do you update data within a chart?"
- SwellJoe 10y ago
  I have no idea what action you're suggesting I should take. Obviously I've asked myself that question, which is why I brought it up. Is this some sort of hacker koan? I'm pointing out that very few charting library authors seem to have any interest in providing a clear path for supporting live data (by that, I mean charts that update in realtime when new data arrives). It should theoretically be automatic in a library based on react; updating the data that backs the ViewModel should update the View. But, I don't see any examples of that or mention of that capability in a cursory read of the site, or how it is handled when data is updated (like is it smoothly animated, does it just hop to the new status, or does it not do anything at all, breaking the reactive pattern and making building it for react a pointless exercise?).
  - ycombinatorMan 10y ago
    http://jsfiddle.net/ancpedz4/1/ http://jsfiddle.net/ancpedz4/1/ Click the word clicker, you will see what happens.

recursive 10y ago

Every example seems to be animated. I find this kind of off-putting. The animation just serves to demand my attention before I can really make any use of the graph.

joelg 10y ago
Animating the loading of charts and force-directed graphs are the <marquee> and <blink> of the 2010s. In 5 years, they'll seem grotesquely tacky.

alphast0rm 10y ago

How does this compare to react-vis (https://uber.github.io/react-vis/ https://uber.github.io/react-vis/)?

code_research 10y ago

Hey, all you makers of chart libraries! First a big thank you for your fantastic efforts and for letting the world participate by open sourcing all that stuff! But one thing: Please make it easy to generate VIDEO OUTPUT with your libraries! This is an artificial limitation that I hit with many charting libraries - output generation is html (js) only and people who would like to create moving images have unnecessary problems shoehorning that nice chart library into outputting to a high resolution video. Please do not limit your designs to one output medium. Think video, too, THANKS!

videobrain 10y ago
http://zulko.github.io/blog/2014/11/29/data-animations-with-python-and-moviepy/ http://zulko.github.io/blog/2014/11/29/data-animations-with-... But yes, authors of chart libraries should add "output to video / any medium" on their "required features" list.
vanderZwan 10y ago
Have you tried using Julia? Tom Breloff's Plots.jl[0] package has a built-in @gif macro, which already relies on ImageMagick and/or FFmpeg (depending on which one of them is present). So it shouldn't be too hard to extend that to mp4 (just pass different output parameters to FFmpeg). In fact, he has an issue open for it[1] so he appears to be working on that. [0] https://juliaplots.github.io/#simple-is-beautiful https://juliaplots.github.io/#simple-is-beautiful [1] https://github.com/tbreloff/Plots.jl/issues/320 https://github.com/tbreloff/Plots.jl/issues/320

Etheryte 10y ago

The page is completely unusable on mobile: zoom is disabled and no responsiveness. Who thought that's a good idea?

michaelmior 10y ago
I'm guessing the authors didn't decide that not making the page responsive was a good idea. It seems perfectly reasonable that there were other priorities. You can always send a PR if you think it's that important. (I'm assuming the source of that page is on GH as well.)

mead5432 10y ago

Super cool. Excited to try it out.

deleted 10y ago

[deleted]