Area Chart

Area charts show quantitative data over time with filled regions. Chart.ts renders gradient fills, stacked series, smooth curves, and SVG output. Style every area, line, and axis with Tailwind CSS.

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

const svg = area({
  data: [
    { month: "Jan", organic: 1200, paid: 800, social: 400 },
    { month: "Feb", organic: 1500, paid: 900, social: 500 },
    { month: "Mar", organic: 1800, paid: 1100, social: 650 },
    { month: "Apr", organic: 2200, paid: 1300, social: 800 },
  ],
  x: "month",
  y: ["organic", "paid", "social"],
  stacked: true,
  smooth: true,
})

Features

Gradient fills with configurable opacity
Stacked and overlapping modes
Smooth curves with tension control
Multi-series with automatic legends
SVG rendering at any resolution
Tailwind CSS on areas, lines, axes
Under 3kb tree-shaken
Read the DocsSee DemosExamples