Video není dostupné.
Omlouváme se.
A Very Exciting New Chart Library
Vložit
- čas přidán 7. 07. 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/...
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!
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
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.
It's the dark theme that really makes them look so dang good. The other chart sample galleries are usually light.
It’s not chart library bruh
Welcome to CZcams, 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".
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
Check apache e-charts (having react wrapper). Not that hyped, but easy to use and very configurable, made with canvas
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).
Ah this is awesome! Sadly it doesn’t have Sankey graphs, so I still have to rely on D3 for that.
I used recharts on multiple different projects and recommend everyone to try, you can literally do anything with not much effort
missed the opportunity to use the chartcn/ui in the thumbnail
what about Svelte support?
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.
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.
Being too early is a crime
A Nuxt example would be nice
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.
what's the theme and the font he uses?
Inter all the way
Is it CDN only? Not being able to download it is a dealbreaker for me ...
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.
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
What an exciting time to be a (web) developer
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.
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
yes and i installed daisyui because u recommended and now i have to change to shadcn because of u again
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.
would be cool to be able to have a map with interactive areas like with polygons.
Wow another library. Surely this will be the one to change the game.
I'm sold. Making charts sucks a lot so knowing Shadcn has a simpler way, why not.
Thanks for the video.
15:30 'Randomly generated data' to support the point of view :) LOL, I though you gathered some real data about usage of those frameworks?
I think you should invite shadcn to a deep interview...
shadcn slowly becoming my sanity pill, with these updates
shadcn is like... example code of other libraries with an installer?
firefox was just chilling.
Animations are always the first thing I switch off when using charts.
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.
im an Apache EChart Fan Boy
awesome video! thanks
If Shadcn adding Map chart that will +++
Indeed ShadCN is amazing.
Apache echarts is the best opensource.
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
Recharts is pretty customisable itself? And easy to customise too? Why this?
5:54 what is the shortcut for that selection method in vscode?
hold Alt while clicking with the left mouse button
what hair product do you use?
echarts is the most advanced charts library you will ever need, its battle-tested and its not even hard to use
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.
when is someone going to make sum like this for flutter
dude, rechart's pool is so poor. look at apache echarts
>320 packages as base set of dependencies
ewww
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
"New chart Library"
Comparing the power of d3.js to shadcn charts is so dumb lol
Except, it is not chart library. Just presets for recharts
D3 is difficult to beat man
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?
how much memory?
how fast is it?
Giga Shad
Missed opportunity to call it shards
" *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.
So not a library?
I wish that “Theos CZcams 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. :^)
What is your vscode theme?
Poimandres theme.
theo, it's not shad, it's shadcn!
Chadcn ftw!
Apache Echarts > every other one
tbh, still just another chart lib. And i am still a highcharts fan, especially with real big data sets.
chadcn
Nice
Shadcn Charts..... codename Sharts? 😂
Ayye just what I needed to display my memecoin chart in a sleek way xD
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.
We can always count on Theo dumping low quality content every day 👍
"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
CZcamsrs 😂
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
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
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.
I don't see anything new or unique about this
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.
I will try this new charts by shadcn
Section on V0 for thumbnails
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”.
05:15 Brazil (Luiz Gonzaga) mentioned??
Early.
first
devs suck at analytics... no double y axis on line charts is pathetic - stick to your basements