Duck Chart

Bars, lines and areas drawn straight into SVG from the chart tokens. No charting dependency.

DisplayClient component

Preview

ComponentsThemes

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/duck-chart

Pulls in @duck/theme, @duck/hud-label. Already installed items are skipped.

import { DuckChart } from "@/components/ui/duck-chart"

The file lands in components/ui/duck-chart.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
labels	string[]	-	One per x position. Length sets the number of columns.
series	{ name: string; values: number[]; color?: string }[]	-	Colours default to --chart-1 through --chart-5 by position.
type	"bar" \| "line" \| "area"	"bar"	Shape.
title	string	-	What the figure is. Used for the table caption.
height	number	220	Plot height in px. Width is always fluid.
max	number	-	Fix the top of the scale. Defaults to the largest value, padded.
grid	boolean	true	Horizontal rules behind the plot.
xAxis	boolean	true	Print the x labels.
legend	boolean	-	Series names above the plot. On by default past one series.
format	(value: number) => string	-	Number formatter for the table.

What keeps this component from turning into noise.

The same numbers are emitted as a visually hidden table and the SVG is aria-hidden. A chart nobody can read is a picture of data.
This is not a charting library: no zoom, no brush, no pointer tooltip, no time axis. Reach for recharts or visx when the chart is the product; use this when the chart is a figure in a page.
The theme has shipped --chart-1 through --chart-5 since the first release. This is what renders them.

Installs per month

Label

Components

Themes

Jan

Feb

Mar

Apr

May

Jun

Bundle size removed, kB

Label

kB removed

Jan

Feb

Mar

Apr

May

Jun

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
labels	string[]	-	One per x position. Length sets the number of columns.
series	{ name: string; values: number[]; color?: string }[]	-	Colours default to --chart-1 through --chart-5 by position.
type	"bar" \| "line" \| "area"	"bar"	Shape.
title	string	-	What the figure is. Used for the table caption.
height	number	220	Plot height in px. Width is always fluid.
max	number	-	Fix the top of the scale. Defaults to the largest value, padded.
grid	boolean	true	Horizontal rules behind the plot.
xAxis	boolean	true	Print the x labels.
legend	boolean	-	Series names above the plot. On by default past one series.
format	(value: number) => string	-	Number formatter for the table.

What keeps this component from turning into noise.

The same numbers are emitted as a visually hidden table and the SVG is aria-hidden. A chart nobody can read is a picture of data.
This is not a charting library: no zoom, no brush, no pointer tooltip, no time axis. Reach for recharts or visx when the chart is the product; use this when the chart is a figure in a page.
The theme has shipped --chart-1 through --chart-5 since the first release. This is what renders them.