A Very Exciting New Chart Library

[@dough-pizza]

Genuinely out of everything ShadCN has been a blessing. It just makes frontend development so much more easier! It's not AI you need to fear but libs like ShadCN that'll lower the bar for quality UI for everyone

[@IvanRandomDude]

It's called democratization of knowledge. As time goes by things get easier and less tedious/mundane. Ultimately, we automate them and move on to next interesting things.

[@Flackon]

@@IvanRandomDude The knowledge to build graphs like this has existed way before these libraries, though. This isn't democratizing any knowledge, it's literally just lowering the bar for entry

[@raduflp]

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.

[@cwirus99]

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!

[@zeroliuxiyuan]

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.

[@abhishekvash]

Apache ECharts is probably the best thing that most people haven’t discovered yet

[@RandomGuy-jv4vd]

People are sleeping on this and I also recently discovered this chart lib while tinkering with kafka :D

[@kylerjohnson988]

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?

[@florentd.5817]

You're right. Apache echarts is the best opensource. Chartjs is for kiddo

[@TheKaosTux]

Thank you for this! Unbelievable I haven’t notice this before. Looks like it can everything, actually everything.

[@hasithapriyasad]

agree

[@CletusJonesURL]

Don't forget about the Charts library I made for Flutter: Flarts

[@idslw3489]

You really missed an opportunity to name it Farts...

[@follantic]

Flart is better. Sounds like a slow and gusty fart, just like holding the L.

[@aleksd286]

Recharts literally looks like that by default with proper color config, nothing new. Don't understand the huge praise

[@hamzasaleem2]

First of all, thank you for putting your words out there. I have one word for you. "Code Aesthetic".

[@colin_actually]

It's the dark theme that really makes them look so dang good. The other chart sample galleries are usually light.

[@dmitriistukalov4870]

I used recharts on multiple different projects and recommend everyone to try, you can literally do anything with not much effort

[@linuxguy1199]

As a C programmer, I'd just load in OpenGL and generate it all using triangles and a basic shader.

[@_DATA_EXPUNGED_]

... then, after a couple memory leaks and bunch of segfaults thanks to dangling pointers, throw it out and rewrite in rust. Or zig. scnr.

[@danisob3633]

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

[@musashi542]

Lmao​@@danisob3633

[@NadjibSamsung]

What a madlad

[@HorizonHuntxr]

"As a C programmer ☝🏼🤓"

[@richardhaddadau]

I'm sold. Making charts sucks a lot so knowing Shadcn has a simpler way, why not. Thanks for the video.

[@Minepuffik]

It’s not chart library bruh

[@TheBswan]

Welcome to KZbin, it's mostly clickbait (because the non-clickbait doesn't sell)

[@Minepuffik]

@@TheBswan I already knew it was about shadcn because there was nothing else in info field lol

[@cbelleau256]

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.

[@lameshithead]

i wanted to comment "just learn d3" and now im hearing its not even a chart library????? god

[@Minepuffik]

@@cbelleau256 it’s not new chart library in any way

[@orcdev]

Chadcn is killing it! Can't wait next release, that sidebar is going to be awesome! ⚔

[@khao_yt]

what a chad

[@ElFrontend]

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

[@ElFrontend]

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.

[@jasmeetbrar8609]

Ah this is awesome! Sadly it doesn’t have Sankey graphs, so I still have to rely on D3 for that.

[@stetcorene]

yes and i installed daisyui because u recommended and now i have to change to shadcn because of u again

[@ustav_o]

missed the opportunity to use the chartcn/ui in the thumbnail

[@patrickaikonia853]

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

[@igorordecha]

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

[@apomv]

Being too early is a crime

[@dmitriimakarkin5229]

Check apache e-charts (having react wrapper). Not that hyped, but easy to use and very configurable, made with canvas

[@mohabedr5030]

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.

[@okkashaally2115]

You know nothing about modern web animations

[@Kieran28]

Your right

[@RedStone576]

you're right

[@mohabedr5030]

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

[@LtdJorge]

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.

[@artificiyal]

shadcn slowly becoming my sanity pill, with these updates

[@luizhenrique187]

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

[@jcros_]

its recharts bruh

[@CraigMcNicholas]

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.

[@QueeeeenZ]

A Nuxt example would be nice

[@CodeJan]

I think you should invite shadcn to a deep interview...

[@realguse]

im building an analytics tool, then i saw this

[@parisosuch7326]

use Tremor, it looks better than this and also built with tailwind

[@realguse]

@@parisosuch7326 the disease?

[@realguse]

@@parisosuch7326 no im kidding, but it looks promising

[@NaThAncient]

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.

[@NubeBuster]

What an exciting time to be a (web) developer

[@helleye311]

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.

[@garcipat]

would be cool to be able to have a map with interactive areas like with polygons.

[@bernicefenton]

firefox was just chilling.

[@bojidaryovchev9995]

echarts is the most advanced charts library you will ever need, its battle-tested and its not even hard to use

[@wshewm]

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

[@theshy6717]

I don’t agree

[@WojtekPoroslo]

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

[@wshewm]

@@theshy6717 I’d love to hear more about your experience. What projects have you used it on? Anything enterprise level?

[@wshewm]

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

[@DanielBogusz]

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.

[@Aditya_Vyas]

Indeed ShadCN is amazing.

[@arogueotaku]

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.

[@dobroslav.radosavljevic]

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.

[@smoked-old-fashioned-hh7lo]

​@@dobroslav.radosavljevic everything is overhyped in javascript land. i can't wait for them to reinvent component libraries in 2025.

[@vintage8]

@@dobroslav.radosavljevic exactly, shadcn overrated af

[@hello19286]

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

[@dobroslav.radosavljevic]

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

[@abdullahyaqoob3741]

If Shadcn adding Map chart that will +++

[@mycloudvip]

awesome video! thanks

[@imdefnotash]

what's the theme and the font he uses?

[@akshaysainiAK]

Inter all the way

[@yuryzhuravlev2312]

what about Svelte support?

[@martijn3151]

Animations are always the first thing I switch off when using charts.

[@grandpowr]

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.

[@teenspirit8714]

try more than 2 charts libraries

[@codeChuck]

15:30 'Randomly generated data' to support the point of view :) LOL, I though you gathered some real data about usage of those frameworks?

[@florentd.5817]

Apache echarts is the best opensource.

[@TomisaburoRMizugawa]

Is it CDN only? Not being able to download it is a dealbreaker for me ...

[@teenspirit8714]

dude, rechart's pool is so poor. look at apache echarts

[@Cyanide300]

" *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.

[@ivank6486]

Missed opportunity to call it shards

[@brawlrob0]

theo, it's not shad, it's shadcn!

[@shashankdwivedi6388]

what hair product do you use?

[@plusplus940]

shadcn is like... example code of other libraries with an installer?

[@hasithapriyasad]

im an Apache EChart Fan Boy

[@a1x5h04]

Chadcn ftw!

[@miletadulovic577]

Except, it is not chart library. Just presets for recharts

[@gabmirdev]

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.

[@vissaf]

Recharts is pretty customisable itself? And easy to customise too? Why this?

[@vivienneobrien4906]

Why isn't plotly mentioned?

[@cogulad1067]

when is someone going to make sum like this for flutter

[@spiderico00]

Giga Shad

[@djenntt]

We can always count on Theo dumping low quality content every day 👍

[@mpoapostolis9110]

"New chart Library"

[@hqcart1]

how much memory? how fast is it?

[@fu886]

>320 packages as base set of dependencies ewww

[@brpapa]

What is your vscode theme?

[@alexh2665]

Poimandres theme.

[@Dedydamy]

Apache Echarts > every other one

[@chopstickschop]

Apache ECharts all the way

[@MrJloa]

Hell no. We use em v5 in production. Trying to migrate atm, they lag as hell in svg render

[@chopstickschop]

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

[@xReTuneSx]

5:54 what is the shortcut for that selection method in vscode?

[@nikolayhmn]

hold Alt while clicking with the left mouse button

[@maximilianlauberger1729]

Dumb question: Would this work aswell for me angular project?

[@wingsaber629]

No... it's using React.

[@maximilianlauberger1729]

@@wingsaber629 i know but that would be really cool if that would work for angular

[@lauracamellini7999]

D3 is difficult to beat man

[@DevLeonardo]

06:44 value is always 999 => not a straight line 👀

[@kangar1797]

probably went back and varied the values during the live stream and edit it out

[@anhvunguyen7935]

Its stacked

[@DevLeonardo]

@@anhvunguyen7935 ah, that's right :D

[@steffengroenandersen]

@@kangar1797 When he hovers over the data labels they all say 999 though.

[@kangar1797]

@@steffengroenandersen you're right! in that case maybe there is also a "scale" value that needs to be changed?

[@LeoPlaw]

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.

[@fallenpentagon1579]

So not a library?

[@BobbySmithUX]

Shadcn Charts..... codename Sharts? 😂

[@micha8099]

tbh, still just another chart lib. And i am still a highcharts fan, especially with real big data sets.

[@winfle]

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

[@philadams9254]

I don't see anything new or unique about this

[@smoked-old-fashioned-hh7lo]

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.

[@ericnail1]

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

[@mickolesmana5899]

chadcn

[@noproblemskyi]

Nice

[@0brooo]

I wish that “Theos KZbin channel” was a valid response to “how do you keep up with technology” in an interview lol.

[@cyrus01337]

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

[@aberba]

KZbinrs 😂

[@codewithshriekdj]

I will try this new charts by shadcn

[@farzadmf]

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?

[@lpbayliss]

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.

[@subhajitkundu7546]

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.

[@farzadmf]

That seems like a useful tool (and honestly necessary IMO)

[@farzadmf]

@@subhajitkundu7546 Thank you for the detailed answer. Makes sense

[@plusplus940]

it's kind of a lie - shadcn still installs the dependency. shad is more like example apps with an installer

[@PootCoinSol]

Ayye just what I needed to display my memecoin chart in a sleek way xD

[@blinking_dodo]

"Wait, i need a button, let's install the "button" package!" Utterly deranged. HTML5 has it's own tag...

[@arogueotaku]

It's not a package. smh. Also have you not ever used a component library?

[@BarisPalabiyik]

Oh shit really? Fellas we had the button element all along right under our nose :O

[@AndrewTSq]

lol yes. no wonder why JS sucks these days.

[@maciekdeveloper]

@@arogueotaku its just styled radix

[@sidarthg2477]

Good luck making sure that it is accessible in all browsers. It is not as simple as with some css classes

[@emonymph6911]

devs suck at analytics... no double y axis on line charts is pathetic - stick to your basements

[@itsmenewbie03]

Early.

[@snurdool8131]

first

[@adrianorocha-dev]

05:15 Brazil (Luiz Gonzaga) mentioned??