Install

npm install @chartts/core

Quick start

import { createChart, lineChartType } from "@chartts/core"

const chart = createChart("#chart", lineChartType, {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  series: [{ name: "Revenue", values: [4200, 5800, 7100, 6400, 8200, 9600] }],
})

Server-side rendering

import { renderToString, lineChartType } from "@chartts/core"

const svg = renderToString(lineChartType, {
  labels: ["Jan", "Feb", "Mar"],
  series: [{ name: "Sales", values: [10, 20, 15] }],
}, { width: 600, height: 300 })

Real-time streaming

import { createStreamingChart, lineChartType } from "@chartts/core"

const stream = createStreamingChart(el, lineChartType, { windowSize: 200 })
stream.push([42], "12:00:01")
stream.push([58], "12:00:02")

Why Chart.ts?

• 65+ chart types — line, bar, pie, candlestick, sankey, treemap, radar, heatmap, and 50+ more
• Under 15kb gzipped — the entire core, not per chart
• Zero dependencies — nothing to audit, nothing to break
• Triple renderer — SVG default, Canvas at 5k+ points, WebGL at 100k+. Auto-switching.
• Real SVG — actual DOM nodes. CSS works. Devtools work. Screen readers work.
• TypeScript-first — strict mode, zero any, full inference
• Accessible — WCAG 2.1 AA. Keyboard nav, ARIA roles, pattern fills.
• Tree-shakeable — import only the charts you use
• SSR ready — renderToString() for server-side. No ssr: false hacks.
• Interactions — tooltips, crosshair, zoom, pan, brush, linked charts
• Financial indicators — SMA, EMA, RSI, MACD, Bollinger Bands, ATR, VWAP
• Streaming — rolling buffers with pause/resume

Framework support

| Framework | Package | | |-----------|---------|---| | React | @chartts/react | | | Vue | @chartts/vue | | | Svelte | @chartts/svelte | | | Solid | @chartts/solid | | | Angular | @chartts/angular | |

For WebGL/3D charts, add @chartts/gl.

65+ chart types

Trending — Line, Area, Step, Sparkline, Range, Baseline, Combo

Comparison — Bar, Stacked Bar, Horizontal Bar, Lollipop, Bullet, Dumbbell, Pillar, Pareto

Composition — Pie, Donut, Treemap, Sunburst, Pack, Funnel, Waterfall

Distribution — Scatter, Bubble, Histogram, Boxplot, Violin, Heatmap

Radial — Radar, Polar, Radial Bar, Gauge

Financial — Candlestick, OHLC, Volume, Kagi, Renko

Relationship — Sankey, Chord, Graph, Flow, Parallel, Lines

Hierarchy — Tree, Org, Gantt

Specialty — Calendar, Matrix, Geo, Word Cloud, Voronoi, Theme River, Pictorial Bar

3D / WebGL (via @chartts/gl) — Scatter 3D, Bar 3D, Surface 3D, Globe 3D, Map 3D, Lines 3D, Line 3D, Torus 3D, Scatter GL, Lines GL, Flow GL, Graph GL

Tree-shakeable imports:

import { lineChartType } from "@chartts/core/line"
import { barChartType } from "@chartts/core/bar"
import { candlestickChartType } from "@chartts/core/candlestick"

Bundle size

| Library | Size (gzip) | Charts | Renderers | License | |---------|-------------|--------|-----------|---------| | Chart.ts | ~15kb | 65+ | SVG + Canvas + WebGL | MIT | | Chart.js | ~60kb | 8 | Canvas | MIT | | Recharts | ~50kb | 12 | SVG | MIT | | ECharts | ~300kb | 40+ | Canvas | Apache | | Highcharts | ~80kb | 30+ | SVG | Commercial | | ApexCharts | ~120kb | 20+ | SVG + Canvas | MIT |

Links

• Documentation
• Live Demos
• Examples
• Capabilities
• GitHub

License

MIT