Chartcnby ShadcnDeck
Built for shadcn/ui

Shadcn/ui charts,
CSV in, chart out

An open source shadcn/ui chart component library and generator. Paste a CSV, preview 8 chart types, then copy the code. No config, no account.

View all chartsStar on GitHub
BarLineAreaPieRadar
revenue.csv
New to this?

Get set up in three steps

You don't need to know Recharts or shadcn/ui inside out. Run these two commands once in your project, then copy-paste from any chart page.

  1. 1

    Add the shadcn/ui chart primitive

    This gives your project the chart wrapper, tooltip, and legend components every chart here is built on.

    npx shadcn@latest add chart
  2. 2

    Make sure Recharts is installed

    The actual bars, lines, and shapes are rendered by Recharts under the hood.

    pnpm install recharts
  3. 3

    Copy a chart into your project

    Open any chart below, paste your own data, then hit Copy component and drop the code into a file in your app.

Browse the charts

What is ChartCN?

Most chart libraries hand you a black box: a new dependency with its own design system that never quite matches your app. ChartCN skips that trade-off. Paste a CSV, pick from 8 chart types, and copy a self-contained TSX component built on shadcn/ui and Recharts, the same primitives your project likely already uses. Nothing to install, no account to create, and the code is yours to edit the moment you paste it.

If you are not a developer, here is the short version: a “chart component” is a small piece of code that draws a chart and matches the look of the app around it. ChartCN builds that piece of code from a CSV, the same file format Excel, Google Sheets, or a database export already produces. Hand it to a developer on your team, and it drops into the product in minutes, with no redesign required.

What's included

Every component ChartCN generates is plain shadcn/ui and Recharts code. Here is what comes built in.

8 chart types built in

Bar, Line, Area, Combo, Pie/Donut, Radar, Scatter, and Radial/Gauge, all ready to generate.

Paste, upload, or edit data

Paste a CSV, upload a .csv file, or edit an inline table, whichever is fastest for your data.

Variant toggles per chart

Switch between stacked or grouped bars, 100% stacking, smooth lines, or donut style.

Automatic date axes

Date columns get formatted axis ticks automatically, no manual date parsing.

Custom colors

Customize series and category colors and see the change reflected in the copied code.

Two export modes

Export with data baked in, or as a data prop you wire up to a live API or database.

Shareable links

Share a link that encodes the exact chart, data, and options, so a teammate sees what you see.

Saved charts

Save a chart in your browser and it is still there after a refresh.

One-click copy

Copy one self-contained TSX component, no new dependency beyond shadcn/ui and Recharts.

Frequently asked questions