Chart

Area, line, bar and sparkline charts drawn in plain SVG. Curves draw in, bars grow, data changes morph, and the tooltip follows your cursor.

Data Display

Visitors

113,325

Playground

Tweak the props, the preview and the code follow.

Props

type

stacked

curve

grid

dots

legend

<AreaChart
  data={data}
  index="month"
  series={[
    { key: "signups", label: "Signups" },
    { key: "trials", label: "Trials" },
  ]}
/>

npx @plumsydev/plum-ui add chart

import { AreaChart, BarChart, LineChart, Sparkline } from "@/components/ui/chart"

<AreaChart
  data={data}
  index="month"
  series={[
    { key: "desktop", label: "Desktop" },
    { key: "mobile", label: "Mobile" },
  ]}
/>

Grouped or stacked. The legend toggles series.

Revenue by source

Click the legend to hide a series

Feed new points and the line glides instead of jumping.

Response time

api.acme.com · last 30 seconds

Live

Tiny trend lines for KPI cards.

Click a card to refresh the data.

Prop	Type	Default
`data*` One object per x value.	`Record<string, string \| number>[]`	`—`
`index*` Key used for the x axis.	`string`	`—`
`series*` Values to plot. Colors default to the theme palette.	`{ key: string; label?: string; color?: string }[]`	`—`
`height` Height in px. Width follows the container.	`number`	`260`
`stacked` Stack series on top of each other.	`boolean`	`false`
`grid / xAxis / yAxis / legend / tooltip` Toggle chart furniture.	`boolean`	`true`
`valueFormatter` Formats ticks and tooltip values.	`(value: number) => string`	`—`
`curve` Area and line only.	`"smooth" \| "linear"`	`"smooth"`
`dots` Area and line only. Show a dot on each point.	`boolean`	`false`