My Favourite React Chart Library

Full Next.js 14 Course Live Now 🔥
www.ultimatenextjs.com
Link to repo
github.com/developedbyed/spro...
In today’s episode, I'll introduce you to Recharts, a lightweight and responsive chart library for React and Next.js. I'll give you a quick demo of how to use Recharts to create dynamic and interactive charts for your projects. Whether you're working on a new application or enhancing an existing one, Recharts is a great tool to visualize your data efficiently.
What You'll Learn:
How to install and set up Recharts in a Next.js application
Creating different types of charts with Recharts
Adding responsiveness and interactivity to your charts
Integrating Recharts with dynamic data in a real-world example
Tools Used in the Video:
Recharts:
recharts.org/en-US/
Sprout & Scribble Store:
www.sproutscribble.store
Follow me on:
🛴 Twitch: / developedbyed
🐦 Twitter: / developedbyed
📸 Instagram: / developedbyed
💻 Github: github.com/developedbyed/

[@halamadrid5238]

Wow I just found your channel yesterday and I'm working on a project that uses recharts, this upload has perfect timing 😉

[@TheyCallMeAnnie]

Would love to see more videos! Very enjoyable to hear you chat to us! 😆 Will check out this cool library for sure

[@IOSALive]

developedbyed, I liked this video because it's awesome!

[@BetaPriyoko-bv8yh]

Thankyou for inspiring us brother❤!

[@SensoryExplorer]

D3.js one love. Very useful for big projects with flexibility to fine-tune customer requirements, but I like how all these things become more simple for us

[@__Rishav007]

Can you recommend any resources for learning d3.js and using it with react

[@SensoryExplorer]

@@__Rishav007 official documentation, there is no too much different between vanilla and react

[@mostafakheder7721]

Wooow Ed ... Nice one I believe ❤❤❤

[@jacobwilliams2246]

Gaining that streamer chatting grindset 😂

[@1337shadow]

Bother whats your vscode them, it very comfortable to look at. Love your videos btw they are very informative

[@usmanquickcode]

Hey i have always problem working with wizards as i found them confusing. can you make a video about wizard in react using react hook form for validation?

[@stevencollier5386]

@developedbyed can you compare it to apache echarts?

[@1emnL]

I was just looking for libraries yesterday !! Simulation moment 😂

[@Aeromkana]

Me too, just started a project that needs to use Recharts xD He even gave specific advice for an issue I was having

[@dev_franqqi]

Hi My favorite Dev on the internet

[@selimgandymov8946]

hello, can you help me please? I canged to "recharts": "^2.13.0-alpha.1" but i have error in console it not solved

[@EverydayBeing-de1qu]

I prefer this one too, so much more beginner friendly and easy to setup compared to chartjs

[@climentea]

Nextjs 14 is old now!😅 Nextjs15 (RC) is out!

[@nekotajni394]

It's a cool library. However 598.2kB minified, 137.7kB Minified + Gzipped. It's pretty massive. I am using it currently for an Area chart and it's 375kB minified and 99.1kB Gzipped. Ridiculously large for what it is.

[@FunkyToe369]

That is definitely massive, but I would say the type of apps that would use a lot of charts care less about bundle size though. Like very few people would be visiting a dashboard on slow 3G or something.

[@developedbyed]

yeah totally, but like funy said, usually in dashboards for Admin UI's, so I don't mind having it there 😄

[@crystalk99]

What about React Google Charts? Isn't it lightweight?

[@dylanelens]

Would like to add recharts is really pretty and stuff, but when using it too render even only 1000ish datapoints it become ridiculously slow. This is because it is using svg's and not opengl.

[@covenantifeoluwa6345]

What font is he using in vscode

[@jeevanjose3347]

❤❤

[@monarchgam3r]

First

[@developedbyed]

gg

[@buraxta_]