Beautiful charts.

Zero config.

<15kb gzipped

Smaller than a hero image. Your Lighthouse score stays green.

SVG-first

Real DOM elements. CSS, devtools, screen readers - all work.

className=

Tailwind on every chart element. Dark mode in one class.

MIT forever

Candlestick, waterfall, gauge - 12 chart types. Free. Commercial use included.

WCAG AA

Keyboard nav, screen readers, pattern fills. Accessible by architecture.

Every framework

React, Vue, Svelte, Solid, Vanilla. Native packages. Same API.

Get Started
dashboard.tsx

Monthly Revenue

$48,200+24.3%

Revenue
JanFebMarAprMayJunJulAugSepOctNovDec010K20K30K40K50K

Why Chart.ts

Everything you need.
Nothing you don't.

<15kb gzipped

Smaller than most hero images. Your Lighthouse score stays green. Your users stay happy.

SVG-first

Real DOM elements. Inspect in devtools. Style with CSS. Accessible to screen readers. Crisp at every zoom.

Multi-renderer

SVG by default. Auto-switches to Canvas at 10k+ points, WebGL at 100k+. Zero configuration.

Beautiful defaults

Looks stunning out of the box. Smooth gradients, clean type, elegant animations. No config needed.

Tailwind native

className prop on every element. dark: variants. Your design tokens, your CSS. Charts that match your app.

Every framework

Native packages for React, Vue, Svelte, Solid, and Vanilla JS. Same API. Learn once, use anywhere.

TS

TypeScript-first

Strict mode, zero any. Full type inference on every prop. Autocomplete IS the documentation.

Accessible

WCAG 2.1 AA by default. Keyboard nav, screen readers, pattern fills. Accessible by architecture, not afterthought.

Get started

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

27 chart types

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

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

Tech45Finance25Health15

Treemap

NNEESESSWWNW

Polar

ProgressGoalsTasks

Radial Bar

ABCDEF020406080100

Lollipop

Revenue

Bullet

202320242025

Dumbbell

MonWedFriSun

Calendar

JanFebMarAprMayJun02K4K6K8K10KRevenueProfit

Combo

Source ASource BProcessOutput XOutput Y

Sankey

View all demos →

Frameworks

Native everywhere.
Not wrappers. Native packages.

React

@chartts/react

Vue

@chartts/vue

Svelte

@chartts/svelte

Solid

@chartts/solid

JS

Vanilla

@chartts/core

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

Chart API

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
Read the DocsGitHub