dashboard.tsx

Monthly Revenue

$48,200+24.3%

Revenue
JanFebMarAprMayJunJulAugSepOctNovDec010K20K30K40K50K
15kbgzipped

The entire library. Not per chart. Total.

48 chart types, every renderer, full TypeScript, tree-shakeable. Smaller than most hero images.

Five lines of code.
That's it.

app.tsx
import { LineChart } from '@chartts/react'

const data = [4, 8, 2, 12, 6, 14, 9]

<LineChart
  data={data}
  className="h-64 text-cyan-500"
  smooth
/>
Preview
1234567051015

Every chart you need.
Built in. Not bolted on.

From simple line charts to sankey diagrams, 3D globe visualizations, financial candlesticks, and network graphs. Plus 13 WebGL/3D chart types via @chartts/gl.

JanFebMarAprMayJun4K6K8K10K

Line

Q1Q2Q3Q40100200300SalesCosts

Bar

MonTueWedThuFri1.2K1.4K1.6K1.8K2K2.2K

Area

45%30%15%10%

Pie

55%35%10%

Donut

ABCDEFGH10203040

Scatter

ABCDE1020304050

Bubble

SpeedPowerAccuracyDefenseStamina

Radar

MonTueWedThuFri95100105110115OpenHighLowClose

Candlestick

RevenueCOGSGrossOpExNet050100150

Waterfall

Visitors: 1000 (100%)Leads: 600 (60%)Qualified: 400 (40%)Proposals: 200 (20%)Closed: 80 (8%)

Funnel

76Performance0100

Gauge

Sparkline

Q1Q2Q3Q4050100150200Product AProduct BProduct C

Stacked Bar

EngineeringMarketingSalesDesignSupport

Horizontal Bar

MonTueWedThuFriSatSunWeek 1Week 2Week 3Week 4

Heatmap

Q1Q2Q3Q4020406080MinQ1MedianQ3Max

Box Plot

0-1010-2020-3030-4040-5050-6060-7070-8001020304050

Histogram

Tech35Finance25Health18Energy

Treemap

NNEESESSWWNW

Polar

ProgressGoalsTasks

Radial Bar

ABCDEF020406080100

Lollipop

Revenue

Bullet

202320242025

Dumbbell

JanFebMarAprMayJunJulAugSepOctNovDecMonWedFriSun

Calendar

JanFebMarAprMayJun02K4K6K8K10KRevenueProfit

Combo

Source ASource BProcessOutput XOutput Y

Sankey

RootABA1A2B1B2

Sunburst

CEOCTOCFOVP EngVP SalesDev Lead

Tree

Node ANode BNode CNode DNode E

Graph / Network

Speed8060Cost8040Quality9070Reliability8570Scale9060

Parallel Coordinates

ABCD

Chord

United StatesUnited KingdomGermanyJapanBrazil6.0K45.0KUsers

Geo Map

JavaScriptTypeScriptReactNodeCSSHTMLPythonSQLRustGoGraphQLDocker

Word Cloud

Group AGroup BGroup CGroup D020406080MinQ1MedianQ3Max

Violin Plot

Alpha42Gamma35DeltaEpsilon55Zeta68Eta25Theta

Voronoi

ReactVueSvelte

Theme River

85Energy62Water78Food45Transport

Pictorial Bar

ABCDERow 110.800.300.500.20Row 20.8010.600.400.70Row 30.300.6010.900.50

Matrix

Native everywhere.
Not wrappers. Native packages.

Same API surface across every framework. Learn once, use anywhere.

Charts from a URL.

Embed beautiful charts in emails, Slack, markdown, Notion - anywhere images work. No JavaScript required.

i.chartts.com
https://i.chartts.com/line/4,8,2,12,6,14,9?title=Revenue&color=cyan
1234567051015

Works with any LLM, email client, or markdown renderer. Any tool that can display an image can display a chart.

Get started in 30 seconds.

Install. Import. Render. That's it.

$npm install @chartts/react