A Very Exciting New Chart Library
Вставка
- Опубліковано 7 лип 2024
- Shadcn/ui keeps paying dividends. Doing charts right is hard, so hyped we have a great starting point in React now.
SOURCE
ui.shadcn.com/charts
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏
S/O Ben Davis for the thumbnail 🙏 - Наука та технологія
More credits should be given to Recharts team, shadcn contribution is just a very thin wrapper. Nevertheless, now recharts will get more eyes on it and hopefully improve faster.
This. I have used recharts alot recently and can confirm that shadcn didn't change much, apart from styling and making it play with the UI library nicely. Still, I do appreciate everything shadcn does - I love the UI library and am using it for almost oll of my projects!
Don't forget about the Charts library I made for Flutter: Flarts
You really missed an opportunity to name it Farts...
Flart is better. Sounds like a slow and gusty fart, just like holding the L.
Shadcn/ui did a great job consolidating these information together but worth calling out that most of the good stuff that Theo calls out in this video is mainly about Rechart the library. You can go very far with Rechart as-is if you are not on the shadcn/ui stack.
Apache ECharts is probably the best thing that most people haven’t discovered yet
People are sleeping on this and I also recently discovered this chart lib while tinkering with kafka :D
Wow. Yeah, I've never heard of it but it looks awesome. One of the biggest struggles I have with d3 is that I feel like I'm constantly fighting a typescript type battle. How does Apache ECharts play with typescript?
You're right. Apache echarts is the best opensource. Chartjs is for kiddo
Thank you for this! Unbelievable I haven’t notice this before.
Looks like it can everything, actually everything.
agree
It’s not chart library bruh
Welcome to UA-cam, it's mostly clickbait (because the non-clickbait doesn't sell)
@@TheBswan I already knew it was about shadcn because there was nothing else in info field lol
Technically, it is a library. It's an organized collection of different types of charts which you can browse through and use within your own projects.
i wanted to comment "just learn d3" and now im hearing its not even a chart library????? god
@@cbelleau256 it’s not new chart library in any way
Recharts literally looks like that by default with proper color config, nothing new. Don't understand the huge praise
First of all, thank you for putting your words out there.
I have one word for you. "Code Aesthetic".
It's the dark theme that really makes them look so dang good. The other chart sample galleries are usually light.
As a C programmer, I'd just load in OpenGL and generate it all using triangles and a basic shader.
... then, after a couple memory leaks and bunch of segfaults thanks to dangling pointers, throw it out and rewrite in rust. Or zig.
scnr.
"as someone who likes to waste time doing things that arent needed"
"when i was young we would use handmade spears to go out hunting"
"i built this chair by myself in 100 hours to save myself some money"
Lmao@@danisob3633
What a madlad
"As a C programmer ☝🏼🤓"
Chadcn is killing it! Can't wait next release, that sidebar is going to be awesome! ⚔
what a chad
its recharts bruh
5:28 anything beyond that would be astronomically stupid because English is not the only language in the world.
I remember that some stupid library/framework for GraphQL back in the day(i dont remember which one) had implemented English noun pluralization rules in the library itself. You were supposed to write your schema in singular form and it "was smart enough" to generate plural names for collections of those objects. I loved my "pracowniks" and "grupaPracownikows" arrays (not really).
what about Svelte support?
what's the theme and the font he uses?
missed the opportunity to use the chartcn/ui in the thumbnail
Check apache e-charts (having react wrapper). Not that hyped, but easy to use and very configurable, made with canvas
I used recharts on multiple different projects and recommend everyone to try, you can literally do anything with not much effort
Ah this is awesome! Sadly it doesn’t have Sankey graphs, so I still have to rely on D3 for that.
Being too early is a crime
The idea behind shadcn sounds cool, but I don't get how the components folder would stay organized if everyone just goes in and adds / edits their own component. Maybe I'm completely wrong but I can see it becoming a complete mess in a large team.
And also If I have to install some packages then I would rather install a component library. But I think I'm missing something there too.
It's overhyped. Get kinda messy and you will spend a lot of time making something custom, which already exists in library like Mantine. Mantine is much better and feature complete.
@@dobroslav.radosavljevic everything is overhyped in javascript land. i can't wait for them to reinvent component libraries in 2025.
@@dobroslav.radosavljevic exactly, shadcn overrated af
@@dobroslav.radosavljevic That's the whole point of it, customizability. Sometimes you don't want to spend hours reading documentation figuring out a hacky way to customize a component in Mantine/pick a component library when your designer wants a very specific change that is not supported.
@@hello19286 You can customize Mantine too. It's highly customizable via Provider or component props. You can even use Mantine as headless framework and style everything by yourself with taiwind or anything else.
It has awesome prebuilt components, which cover almost every use-case you might need in your applications. If not, you can easily build your own. There is a big community and a lot of community packages around Mantine for different components and integrations with libraries.
I prefer this over shadcn. And I build whole startup with shadcn. And I also built a lot of applications from scratch with Mantine. So I have good comparison how Mantine is much better.
But still my opinion. Other people just don't like Mantine because of design I guess.
I don't know, i will still use echarts over this, and the animations from this charts already exists in things like apexcharts, over all i didn't understand what is so different about this library
how much memory?
how fast is it?
im building an analytics tool, then i saw this
use Tremor, it looks better than this and also built with tailwind
@@parisosuch7326 the disease?
@@parisosuch7326 no im kidding, but it looks promising
Just looking at Tremor’s line graph, selecting a node does (like chadcn) shows a popover with the selected value, however, the popover isn’t smart enough to not block the actual point on the graph. Chadcn’s popover actually moves away to the side.
yes and i installed daisyui because u recommended and now i have to change to shadcn because of u again
Is it CDN only? Not being able to download it is a dealbreaker for me ...
I love Shadcn because it gets rid of the need to design frontend component and rather focus on the application logic and interactions of your site. Game changes for people who are not even doing UI/UX design
awesome video! thanks
Shad charts? Sign me up!
I like recharts in terms of functionality, but the DX is just awful. Data forrmats are weird, there's no proper typescript etc. Nice wrapper around that, that also does beautiful styles sounds great.
What I like most about shadcn is that it is taking the best available tools, such as Recharts, and building a robust ecosystem based on its design system. Good Review @Theo
I must say that the merit of shadcn in this case is changing the styles of Recharts and including it in its ecosystem, because basically all the work is done by Recharts.
what hair product do you use?
I still think mantine has a 200x better DX than shadcn. I’ve tried to give it a real shot on new projects multiple times due to the hype train surrounding it but I always end up going back to mantine
I don’t agree
I'm on the other side of the spectrum. Can't stand mantine - it's just mui reincarnated to me. Sure, it's better than mui, but the philosophy behind is the same: the library and the component drive and decide UI - they are hard to extend and configure outside of what authors have allowed. 11 colors in your palette? or 8? well, you're outta luck, you'll have to fight mantine from the get go. headless ui libraries are so so so so much better in that regard. you use what you want and how you want. you style in whatever style suits you. there's fewer layers of abstraction between you and end html elements rendered on screen. you're commanding your ui to much greater extent than with mantine, chakra, mui...
@@theshy6717 I’d love to hear more about your experience. What projects have you used it on? Anything enterprise level?
@@WojtekPoroslo I appreciate your perspective and understand the premise of your message! One thing to note is that you can easily extend the color palette and every single component's styles extensively using the themeing solutions mantine has to offer. However, you're right, its themeing features is obviously not on the level of a headless library.
Because you are missing the point of those two. Shadcn is for making component libraries where you edit the scaffolded code to your needs. Mantine is just another ready to use component library.
A Nuxt example would be nice
I think you should invite shadcn to a deep interview...
I'm sold. Making charts sucks a lot so knowing Shadcn has a simpler way, why not.
Thanks for the video.
would be cool to be able to have a map with interactive areas like with polygons.
Dumb question:
Would this work aswell for me angular project?
No... it's using React.
@@wingsaber629 i know but that would be really cool if that would work for angular
firefox was just chilling.
Indeed ShadCN is amazing.
5:54 what is the shortcut for that selection method in vscode?
hold Alt while clicking with the left mouse button
Nice
Recharts is pretty customisable itself? And easy to customise too? Why this?
What an exciting time to be a (web) developer
What is your vscode theme?
Poimandres theme.
Animations are always the first thing I switch off when using charts.
shadcn is like... example code of other libraries with an installer?
echarts is the most advanced charts library you will ever need, its battle-tested and its not even hard to use
shadcn slowly becoming my sanity pill, with these updates
Giga Shad
Apache ECharts all the way
Hell no. We use em v5 in production. Trying to migrate atm, they lag as hell in svg render
@@MrJloa in my experience SVG starts to lag if you work with many datapoints. echarts has a sampling parameter that can help with performance. you could also switch to canvas if you want. our team uses echarts to display scope signals with millions of datapoints with no issues.
15:30 'Randomly generated data' to support the point of view :) LOL, I though you gathered some real data about usage of those frameworks?
So not a library?
Chadcn ftw!
Wow another library. Surely this will be the one to change the game.
when is someone going to make sum like this for flutter
If Shadcn adding Map chart that will +++
chadcn
Except, it is not chart library. Just presets for recharts
theo, it's not shad, it's shadcn!
So we installed card and button and chart to add a chart...
We then manage the deps for all those...
We then do what people are saying shadcn is good for... Alter a component directly for ultimate customisation... So we modify Card.
Now our chart looks like shit and you go through again making everything look right.
Honestly whoever thought copy pasting full component sets into a project is a good idea never worked on a project woth more than 10 views.
Missed opportunity to call it shards
"New chart Library"
I'm yet to use shadcn, but I have a confusion: if I'm not mistaken, it allows you to copy/paste a component to "make it yours".
Doesn't that mean that basically, we'll be storing a "snapshot" of the library at the time? One good thing with UI frameworks is that they get updated, add features, etc., but if we copy/paste the thing, we're basically stuck with a verion almost forever.
Is that how it works?
There is an (experimental) diff command that lets you see what has changed in a newer version of a component. If you've customised the component you can pick and choose what you want/ need from the diff. If you haven't made any changes can also just import the new version and repalce the old.
We don't really copy paste the entire library. We copy individual components that we need from the library. Normally with updates in UI libraries they add new components. Existing components hardly get updated if they are made well in the first go and are feature complete, which they usually are.
So with ShadCN you can copy paste whatever component you need and as new component gets added to the library, you can add that as well. And if by any chance the existing component needs an update, they have command line tools to update everything that needs to be updated with one command. But you'll almost never need to do that.
Hope that answers your doubt.
That seems like a useful tool (and honestly necessary IMO)
@@subhajitkundu7546 Thank you for the detailed answer. Makes sense
it's kind of a lie - shadcn still installs the dependency. shad is more like example apps with an installer
Apache echarts is the best opensource.
I'm out. Charts should not be rendered with SVG. Instead, we have HTML Canvas, which can run complex animations at a higher frame rate.
You know nothing about modern web animations
Your right
you're right
@@okkashaally2115 Modern web animation has nothing to do with charts, I'm saying that charts should not be rendered using SVG or even HTML UI, in fact if you open the shadcn beautiful charts page you will see that the page is lagging as hell.
There are many trade-offs between the two. Canvas is faster, however it doesn't let you inspect, it's not HTML. SVG let's you attach any node to any of its nodes.
im an Apache EChart Fan Boy
I will try this new charts by shadcn
dude, rechart's pool is so poor. look at apache echarts
06:44 value is always 999 => not a straight line 👀
probably went back and varied the values during the live stream and edit it out
Its stacked
@@anhvunguyen7935 ah, that's right :D
@@kangar1797 When he hovers over the data labels they all say 999 though.
@@steffengroenandersen you're right! in that case maybe there is also a "scale" value that needs to be changed?
I wish that “Theos UA-cam channel” was a valid response to “how do you keep up with technology” in an interview lol.
There's definitely other places you can look while throwing in similar tech influencer's to the list, just don't mention them or your sources until asked obviously. :^)
>320 packages as base set of dependencies
ewww
Recharts is extremely flexible. Compared to ChartJS that made me bang my head on the wall all the time, that in my job I begged to refactor all our charts with Recharts and it was so easy to do.
try more than 2 charts libraries
" *349* packages installed "...for some friggen charts.
You know, if you wrote like 20% of the code that makes your project do what it does, and the other 80% was imported, is it really *your* project at that point? If I put together some Ikea furniture, am I a furniture maker? Am I the same as the guy who cut raw lumber into shape, sanded it, finished it, and fit it together into a piece of furniture? I think some of the imposter syndrome a lot of web developers have comes from the fact that you wanted to be like the carpenter, and you let people think you're like the carpenter, but really most of what you do is more like assembling Ikea furniture.
D3 is difficult to beat man
Comparing the power of d3.js to shadcn charts is so dumb lol
UA-camrs 😂
Shadcn Charts..... codename Sharts? 😂
I was excited for a moment, until I checked and found that it was built upon Recharts, which is built upon React, so it is somewhat bloated.
oh yeah, we definitely needed yet another charts library. wouldn't it be great to get 20 more before next year. true innovation in the javascript community.
I really enjoy your channel.
Being a Ukrainian, I suffer from electricity shutdowns, and the first thing I usually do after a shutdown, I check your channel.
Thank you, you really help me to stay motivated
It's not a chart library, doesn't compare to any of the libraries mentioned at the beginning. For animations they're only using css, lucide is an icon library. This is probably the most clickbaity channel I've ever seen.
Apache Echarts > every other one
Early.
We can always count on Theo dumping low quality content every day 👍
I don't see anything new or unique about this
tbh, still just another chart lib. And i am still a highcharts fan, especially with real big data sets.
Section on V0 for thumbnails
Ayye just what I needed to display my memecoin chart in a sleek way xD
first
05:15 Brazil (Luiz Gonzaga) mentioned??
You are 100% wrong, the language they used was absolutely political. They are 100% correct to reject political wording and you are being a coward to appease the woke. Normal people do not get upset with such unimportant matters, nor call them “outdated male language”.
"Wait, i need a button, let's install the "button" package!"
Utterly deranged.
HTML5 has it's own tag...
It's not a package. smh. Also have you not ever used a component library?
Oh shit really? Fellas we had the button element all along right under our nose :O
lol yes. no wonder why JS sucks these days.
@@arogueotaku its just styled radix
Good luck making sure that it is accessible in all browsers. It is not as simple as with some css classes
devs suck at analytics... no double y axis on line charts is pathetic - stick to your basements