Looks amazing! The colors are great too. By the way, what does RSC mean
Fin said:
Looks amazing! The colors are great too. By the way, what does RSC mean
Thank you! RSC stands for React Server Components This means most of the charts are created on the server before the page loads, apart from client interaction
Cael said:
@Rory
I’m a bit new to this Are there any benefits to that It sounds more complicated
Usually, having info rendered on the server helps with SEO whenever it’s suitable. I work on interactive pages where the data in the charts is mostly static… I can say this has helped my clients’ sites, especially for keyword targeting like leaderboard pages. If you aren’t doing that, it might not be worth it
@Tatum
Thanks that makes sense So does it mean the actual graphs will be rendered server-side with their html or just the data that goes into the graph
Cael said:
@Tatum
Thanks that makes sense So does it mean the actual graphs will be rendered server-side with their html or just the data that goes into the graph
The HTML of the components is created server-side along with the data The interactive parts like popups will use data attributes from the server-side HTML If you’re working with sensitive data, it’s best to avoid this method, but ideally you wouldn’t handle sensitive data on the server side anyway
@Tatum
It’s not just about SEO but it really boosts initial load performance If there is data from the backend, you can make requests before the browser needs to process everything
@Rory
How does this differ from regular components Shouldn’t they work the same but just render on the server
Fin said:
Looks amazing! The colors are great too. By the way, what does RSC mean
I was confused about how this connects to the Royal Shakespeare Company
Hi WebDev community I’m excited to share RosenCharts
The first fully RSC compatible charting library rosencharts.com
Here are some highlights
• All charts are rendered on the server by default No need for “use client”
• Just copy and paste the code to create your own library 
• Includes shadcn CLI support
• Has Tailwind 4.0 support, including container queries 
• 80% of charts are free
The popularity of copy-paste code for building libraries is clear These tools have helped us develop and implement features faster than ever
You might ask Is this just another charting library Yes but In the NextJS / RSC / Tailwind / Shadcn era, I felt like charts were a bit neglected
Having a or something similar has caused me many headaches in the past With RosenCharts, you now get access to the raw divs and svgs giving you full control over customization
I would appreciate any feedback
@Rory
Be careful with using other companies logos in your charts that pie chart with the apple logo could cause issues as your library gains in popularity
Stevie said:
@Rory
Be careful with using other companies logos in your charts that pie chart with the apple logo could cause issues as your library gains in popularity
Thanks for the reminder We’ll definitely keep that in mind
@Rory
Yeah It’s better to create your own graphics or logos You can make them visually appealing and show how they work with different styles Include one for your own company too
@Rory
There’s a floating comma in the orange/pink bar graph card right under the graph It’s easy to spot on mobile Looks good though
This looks fantastic Great job
Looks great Can it work with any react native website
Kitt said:
Looks great Can it work with any react native website
Yes With the new ‘use dom’ directive, you can add the charts to mobile 