Plotcnbeta
Get started
Open source · Built on the shadcn Registry

Beautiful visualizations for modern React apps.

Recharts for dashboards. D3 for bespoke control. Google Charts for geo and timelines.
Install the source, customize everything, and own every chart you ship.

Get startedExplore charts
pnpm dlx shadcn@latest registry add @plotcn
RechartsD3.jsGoogle ChartsSource owned
Three engines

The right tool for every plot.

Source owned

In your repo. Under your control.

Every viewport

From a phone to a full canvas.

Built to include

Keyboard, contrast, clarity.

01 / THE COLLECTIONBUILT TO BE TAKEN APART

A better starting point.

Thoughtful defaults. Remarkable possibilities. Find your next visualization.

Recharts01
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
DEMO DATA

Interactive line

Every trend has a story. Make it clear.

TooltipResponsive
Recharts02
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
DEMO DATA

Layered area

See the bigger picture, one series at a time.

ComparisonResponsive
Google Charts03
Loading GeoChart…
DEMO DATA

World choropleth

Statistical geographic distributions across nations and territories.

ChoroplethGeoChartWorld
D3.js04
Loading preview…
DEMO DATA

Radial breakdown

Part to whole. Nothing lost in the middle.

CompositionCustom arcs
Google Charts05
Loading chart…
DEMO DATA

Continuous trend

Smooth enterprise metrics powered by Google Charts core engine.

Smooth curveMetricsTimeline
D3.js06
Loading preview…
DEMO DATA

Activity heatmap

Find a rhythm in the everyday.

DensityScale bands
FOLLOW YOUR CURIOSITY

There’s a plot
for that.

From familiar axes to entirely new perspectives.

02 / THE ENGINE ROOMCHOOSE YOUR LEVEL OF CONTROL

Three engines.
One visual language.

Declarative React dashboards, low-level canvas geometry, or mature geographic choropleths.
You shouldn’t have to choose between speed, control, and reach.

01

Recharts

COMPOSE

From data to dashboard, beautifully fast.

Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
  • Declarative React components
  • Familiar charts, thoughtful defaults
  • Tooltips, legends, and responsive containers
Explore Recharts
02

D3.js

CREATE

When your data calls for a different kind of canvas.

Loading preview…
  • Scales, shapes, and custom geometry
  • Hierarchy, networks, and raw math
  • Direct control over every visual decision
Explore D3
03

Google Charts

SCALE

Battle-tested charting and geographic choropleths.

Loading GeoChart…
  • Global choropleths & regional GeoCharts
  • Enterprise timelines, gauges & core charts
  • Dark theme adapters & responsive resize
Explore Google Charts
03 / NO BLACK BOXES

Install the source.
Own the component.

Not another dependency to work around. A starting point that becomes part of your codebase. Read it, change it, make it unmistakably yours.

pnpm dlx shadcn@latest registry add @plotcn
RegistryYour codebase

Run in a React project with shadcn/ui initialized. The CLI adds the registry configuration and components.

Inspect the registry file
your-app / components / charts
01import { PlotLineChart } from "@/components/charts/plot-line-chart"02 03const data = [04  { label: "Jan", value: 1200 },05  { label: "Feb", value: 1800 },06  { label: "Mar", value: 2600 },07]08 09export function Chart() {10  return (11    <div style={{ height: 280 }}>12      <PlotLineChart data={data} label="Sessions" area={false} />13    </div>14  )15}
TypeScript100% editable
04 / BEYOND THE AXESLESS CONVENTION. MORE CONNECTION.

Not every story fits a bar chart.

Follow the connections. Change the layout. See where your curiosity takes you.

POWERED BY D3
Loading the ecosystem explorer…
05 / FROM IDEA TO INTERFACEA SHORTER PATH TO YOUR NEXT CHART

Less setup. More making.

  1. 01

    Explore

    Find the right shape for your data.

  2. 02

    Install

    One command adds the source.

  3. 03

    Own

    It lives in your repo. Read every line.

  4. 04

    Customize

    Change the details that matter.

  5. 05

    Ship

    Build something worth looking at.

Activity / OverviewDESKTOP
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
TABLET
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
ACTIVITY
7.2k
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
Current · Previous
A CANVAS FOR EVERYONE

Every screen.
Every way in.

The chart adapts to its container. The experience makes room for people.

  • Room to respond

    Container-aware sizing, adaptive ticks, and compact layouts.

  • More than a mouse

    Keyboard navigation, visible focus, and touch-friendly controls.

  • Clarity, by design

    Data summaries, solid and dashed series, and reduced-motion support.

Try the keyboard-friendly explorer
06 / YOUR VISUAL LANGUAGE

Fits your theme.
Feels like you.

One component. A different point of view. Use CSS variables to make the entire canvas belong in your product.

surface#101012
ink#fafafa
muted#a1a1aa
grid#28282d
Monthly activity7,200
DEMO DATA
Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.
Same source. Different tokens.
07 / THE BIGGER PICTURECOMPONENTS, IN GOOD COMPANY

Start with a chart.
Build the whole view.

Combine the same building blocks into an interface that works together.

Analytics overview

A little perspective on the big picture.

DEMO DATA
Total sessions42,860+12.8% vs. previous
Active visitors8,420+8.2% vs. previous
Avg. session3m 42s+4.1% vs. previous

Activity over time

Sample data. Jan: 1200; Feb: 1800; Mar: 1450; Apr: 2600; May: 2200; Jun: 3800; Jul: 3200; Aug: 4700; Sep: 4200; Oct: 5800; Nov: 5400; Dec: 7200. Use left and right arrow keys on the chart to inspect values.

Distribution

Loading preview…
Sample analytics breakdown
SourceValueShare
Direct18,42043%
Organic search14,23033%
Referral10,21024%
A composition of the components above. Nothing hidden.
OPEN BY DESIGN

Good things happen
when the source is open.

Inspect a component. Suggest a better interaction. Build a visualization we haven’t imagined. Plotcn is a place to make that work visible.

View GitHubHow to contribute
YOUR NEXT IDEA DESERVES A CANVAS

Make something
worth plotting.

Get startedExplore charts

Built for React. Made to be yours.