asafefe.dev

Area Chart

New

Lines with soft gradient fills that draw in on view. A crosshair and tooltip follow the pointer or arrow keys, and legend buttons toggle each series.

motionutils@soultel/use-reduced-motion-safe
Visitors, last 14 days48,912

Installation

$ pnpm dlx shadcn@latest add @soultel/area-chart

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/area-chart.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/area-chart.tsx.

Usage

example.tsx13 lines
import { AreaChart } from "@/components/area-chart"

export function Traffic() {
  return (
    <AreaChart
      labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
      series={[
        { id: "visitors", label: "Visitors", data: [1200, 1480, 1390, 1720, 1910, 1340, 1180] },
        { id: "signups", label: "Sign ups", data: [84, 102, 96, 131, 148, 90, 77] },
      ]}
    />
  )
}

Props

PropTypeDefaultDescription
labelsstring[]-X axis labels, one per point.
series{ id: string; label: string; data: number[]; color?: string }[]-One line per series. Colors default to the theme.
format(value: number) => string-Formats axis ticks and tooltip values.
hidden / defaultHiddenstring[]-Controlled or initial hidden series ids. At least one stays visible.
onHiddenChange(hidden: string[]) => void-Called when a legend button is toggled.
curve"smooth" | "linear""smooth"Curved or straight segments.
heightnumber280Chart height in px.