Line Chart

Beautiful line charts powered by SVG. Chart.ts gives you smooth curves, area fills, multi-series support, and interactive tooltips. Style everything with Tailwind CSS. Works with any JavaScript framework or vanilla JS.

$npm install @chartts/core
example.tsx
import { line } from "@chartts/core"

const svg = line({
  data: [
    { month: "Jan", users: 1200, revenue: 4200 },
    { month: "Feb", users: 1800, revenue: 5800 },
    { month: "Mar", users: 2400, revenue: 7100 },
    { month: "Apr", users: 3200, revenue: 9200 },
  ],
  x: "month",
  y: ["users", "revenue"],
  smooth: true,
  area: true,
})

Features

Smooth curves with configurable tension
Area fills with gradient support
Multi-series with automatic legends
Interactive tooltips
Tailwind className on lines, dots, areas, axes
Real-time data streaming
Under 3kb tree-shaken
Read the DocsSee DemosExamples