Introduction

This project was highly influenced by and based on Shadcn/ui, Tailwind UI and Build UI.
The rise in popularity of copy-pasteable code to build your own libraries is undeniable. These new tools helped us ship and iterate features faster than ever. However, a key area I found was lacking full customizability were charts. That's why I developed (and actively use!) rosen/charts — to bring the same level of productivity gains to data visualization.

Why choose rosen over other charts?

For three main reasons:

1. Server-side rendering: SSR is supported out of the box! Currently, these are the only charts with RSC support - no "use client" directive required until you need interactivity.
2. Customization: These charts are as customizable as you need them to be. Instead of importing something like a <ResponsivePieChart> component and trying to figure out the API to change the color of the slices, you have direct access to the underlying divs and svgs.
3. Copy-paste: Explore our curated library of charts and copy/paste the source code into your projects - or create your own versions.

Note: Out of the box, these charts support SSR/RSC, dark mode, tailwind, container queries and more.
Even though rendering charts on the server has a lot of benefits (bundle size, speed, no layout shifts, SEO, and more!) - it's totally possible and easy to add client interactivity (e.g. tooltips) as you progress. Under the hood, we simply use D3's functions to handle the math, and everything else consists of elements like divs and svgs that you can directly manipulate as needed.

FAQ