Documentation
Getting Started
Install Chart.ts and render your first chart in under 30 seconds.
Installation
Chart.ts ships native packages for every major framework. Pick yours:
npm install @chartts/reactnpm install @chartts/vuenpm install @chartts/sveltenpm install @chartts/solidnpm install @chartts/coreUsing yarn? Replace npm install with yarn add. Pnpm? pnpm add. Bun? bun add.
Quick Start
Three lines. That's all it takes to render a beautiful chart.
import { LineChart } from "@chartts/react"
const data = [
{ month: "Jan", revenue: 4200 },
{ month: "Feb", revenue: 5800 },
{ month: "Mar", revenue: 7100 },
// ...
];
export default function App() {
return (
<LineChart
data={data}
x="month"
y="revenue"
/>
);
}That's it. Chart.ts handles labels, axes, tooltips, gradients, responsive scaling, dark mode, and accessibility - all automatically. Override anything with props or Tailwind classes.
Core Principles
SVG by default
Every chart renders as real SVG DOM elements. Inspect them in devtools. Style them with CSS. They're accessible to screen readers and crisp at every zoom level. When your dataset hits 10k+ points, Chart.ts automatically switches to Canvas. At 100k+, it uses WebGL. Zero configuration.
Tailwind native
Every chart element exposes a className prop. Use Tailwind utilities directly. dark: variants work out of the box. Your design tokens, your CSS. Charts that match your app, not the other way around.
TypeScript-first
Built in strict mode with zero any types. Full type inference on every prop. Autocomplete in your editor IS the documentation. If it compiles, the chart renders correctly.
Accessible by architecture
WCAG 2.1 AA compliant out of the box. Keyboard navigation, screen reader announcements, pattern fills for color-blind users, and proper ARIA roles. Accessibility isn't an afterthought - it's built into every component.