Recharts – A composable charting library built on React components | Hacker News Reader

Recharts – A composable charting library built on React components

recharts.org

101 pointsrtcoms28 comments

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.

Worth a thought -> http://mcfunley.com/whom-the-gods-would-destroy-they-first-g... why you don't see more of this type of stuff. Like other commenters pointed out, "live data" isn't a "charting specific" problem, it's a front-end / back-end problem and having a chart library that updates on new data. D3 and other javascript charting libraries have had the capability for a long long time. It's just that when you get down to it very few people really need "live data".

I already have the data; charting is the missing piece. I use live data daily in my work; so does every other system administrator in the world. top, vmstat, iostat, etc. are all live(ish) data, very useful to have access to, and useful to plug into a GUI. It is not opening a portal to another dimension, or something, it's just looking at the state of a thing as it is right now and printing it out. I'm sure there are many other areas where a live view is valuable in a user interface (stock prices, exchange rates, temperatures, etc.). There are all sorts of metrics that aren't necessarily well-served by live data, but existence of those does not negate the existence of metrics that are useful to have as they happen.

I'm really confused by this comment. Unless I'm missing something about this specific library, if you pass new a new `data` prop to the chart, it will re-render, so live data is the same as any other data. This is true for any react component.

And e.g. it redraws the changed objects with the same animation as the initial data, and doesn't "morph" it somehow to the new position. Which you wouldn't know without trying, and might not be what you want. An example would show that clearly.

I don't know, and I find this rather frustrating. I write a lot of tools to monitor devices in the lab via a web interface and often want to see updates every 10-100 ms. The only library I have found that seems to be up to the task is [Flot](http://www.flotcharts.org/) (and I've looked into a lot of options). My main complaints about it are its reliance on jQuery (which I am not otherwise using) and its lack of recent development (although it seems fairly feature-complete).

> 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?"

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?).

http://jsfiddle.net/ancpedz4/1/

Click the word clicker, you will see what happens.

So, a re-draw. That's disappointing.

Thanks for the example! That's really all I'm asking/wishing for here...if the library handles live data, show me how. If it doesn't handle it without a lot of trouble, or in ways that look clunky, I know it's not the right library for my projects. It's nice to be able to rule things out quickly.

The redraw is only problematic because of the stupid animation, right? If you had done the same chart by hand in d3, you'd still be incurring redraws.

Yeah, the animation restarting is awful. Ideally, it'd morph to the new values, or tick by on a timeline, depending on the type of data. The restarting animation is the worst action I can think of, aside from not updating, at all. I didn't see any configuration for that, but, it's probably possible to avoid it relatively trivially.

There are a few charting libraries with explicitly covered live data support; I'm just surprised it's a complete afterthought for a library that uses React (which I've always thought of as being designed explicitly for providing a good abstraction for a "live" View and ViewModel).

D3 - checkout the last "transition / animation" on https://bost.ocks.org/mike/path/

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.

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.

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

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

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!

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

[1] https://github.com/tbreloff/Plots.jl/issues/320

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.

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

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.)

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?

Looks like it actually uses d3 ;)

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

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/

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

Super cool. Excited to try it out.

Reply on news.ycombinator.com