How To Make Beautiful Charts In Next.js

Building beautiful charts in React/Next.js is not easy, but in this video I will show you exactly how to build a robust and beautiful chart system with Next.js.
📚 Materials/References:
Starting GitHub Code: github.com/WebDevSimplified/n...
Ending GitHub Code: github.com/WebDevSimplified/n...
Next.js Ecommerce Video: • Full Stack Ecommerce S...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:31 - Setup
02:40 - Basic Chart
11:55 - Orders By Day Chart
23:14 - Users By Day Chart
28:10 - Revenue By Product Chart
34:24 - Basic Date Range Filter
49:40 - Custom Date Range Filter
59:26 - Chart Interval Improvements
#NextJS #WDS #Ecommerce

[@toptry5]

This ecommerce project is hands-down the best project available on RUclips.

[@charleschukwuemeka8482]

Thank you so much, this tutorial is really needed

[@nisabmohd]

Hey kyle you explained such complex things very nicely

[@vishnubhat2084]

thankyou kyle for this great video.

[@user-bj1rj4rv3k]

Thank you Kyle!

[@OnlyJavascript]

amazing series.

[@faahkoo]

Nice! I build mine with D3

[@paarsaJam]

Thank you so much, dear teacher. Could you provide me to know how I can convert the datepicker to be used for persian calendar as well, please?

[@DagmarJS]

Thanks for the video!

[@jimmytan6543]

Thank you! Will there be any new video based on this app?

[@SkylerJi-nj7dj]

what are your thoughts on vega and vegalite?

[@hubesh716]

please tutorial also on react native with some projects

[@ziadxcode]

as sooner as lovely

[@MahBor]

Could you make videos on charts.js with vanilla js?

[@vladanton9]

Thanks

[@WebDevSimplified]

Thank you for the support!

[@balduin_b4334]

that outro animation scared me hoooly

[@original-booxfield]

Danke!

[@WebDevSimplified]

You are very welcome!

[@RulesBreakers]

While using BarChart component form 'recharts, it gives a new warning "Hydration mismatch"

[@NOTHING-en2ue]

great tutorial, could you upload a plain html, css and js on scroll animation tutorial without any libraries ?

[@Me-vc4sf]

Bro thinks he's Kyle from web dev simplified

[@krishnakalyana4793]

😂

[@twothreeoneoneseventwoonefour5]

Recently I have tried Apache Echarts and they were pretty good for some very custom use cases I needed in my job. It's integration with React(through echarts-for-react) is a little bit "meh", but it was nevertheless performant and feature rich. In case someone searched for a library.

[@balduin_b4334]

the outdo animation scared the heck out of me wtf

[@shur_eenee]

Hwvddhrhebe🎉

[@rishiraj2548]

🙂👍 thanks

[@TheOneHong]

so momentjs is no longer recommended?

[@SensoryExplorer]

What about D3.js? Do you think his time has passed?

[@SteveNewman1955]

I think it would be better if you use bigger fonts and focus view on the coding ...

[@pritamghosh7852]

Does anyone deploy this application?

[@jimmytan6543]

same question here

[@trappedcat3615]

How to use a framework inside a framework of a bunch of other frameworks

[@mtjrak.b]

ok

[@OnlyJavascript]

first

[@user-kx9ys1ob2s]

recharts is garbage. no docus whatsoever. chartjs better