Chart

Opinionated, theme-tokened area chart built on LayerChart for trend visualization, with an optional dashed comparison series. Every color derives from design-system role tokens (--primary, --muted, --border) so it re-themes with light/dark automatically.

Area chart

A measure over time, with an optional prior period drawn as a dashed line and no fill — one series is the answer, the other is the thing you compare it against, and only one of them should carry weight. format styles the axis ticks.

Revenue

This period
Previous period

<Card class="w-full">
	<CardHeader>
		<CardTitle>Revenue</CardTitle>
	</CardHeader>
	<div class="px-4 pb-4">
		<AreaChart
			data={REVENUE}
			comparison={REVENUE_PRIOR}
			x="date"
			y="value"
			seriesLabel="This period"
			comparisonLabel="Previous period"
			format={compactMoney}
			height={220}
		/>
	</div>
</Card>

Bar chart

A ranking, not a time series — reach for it when the question is *which*, not *when*. Categories read down the side so long labels stay legible instead of being rotated.

Top products

<Card class="w-full">
	<CardHeader>
		<CardTitle>Top products</CardTitle>
	</CardHeader>
	<div class="px-4 pb-4">
		<BarChart
			data={TOP_PRODUCTS}
			x="product"
			y="revenue"
			format={compactMoney}
			height={220}
		/>
	</div>
</Card>

Donut chart

A split of one whole across a handful of parts. The legend is rendered below the plot rather than floating over it — a chart library's own absolutely-positioned legend overlaps the axis. High-cardinality series skip the legend entirely and use a hover caption instead.

Revenue by channel

Web $32.4K
Instagram $14.8K
WhatsApp $8.6K
In store $5.2K

<Card class="w-full max-w-md">
	<CardHeader>
		<CardTitle>Revenue by channel</CardTitle>
	</CardHeader>
	<div class="px-4 pb-4">
		<DonutChart data={CHANNELS} key="revenue" label="channel" format={compactMoney} />
	</div>
</Card>

Sparkline

Shape without scale, for a figure that already carries the number — inside a StatTile, a table cell, or beside a heading. No axes, no legend, nothing to read but the direction.

API

`AreaChart`

Prop	Type	Default	Description
`data`	`Array<Object>`	`[]`	Current series data points.
`x`	`string`	`'date'`	Key on each data point used for the x-axis value.
`y`	`string`	`'revenue'`	Key on each data point used for the y-axis value.
`comparison`	`Array<Object>`	`null`	Optional prior-period series, rendered as a dashed line with no fill.
`seriesLabel`	`string`	`'Current'`	Legend label for the current series.
`comparisonLabel`	`string`	`'Previous'`	Legend label for the comparison series.
`height`	`number`	`300`	Chart height in pixels.
`format`	`(value: number) => string`	`(v) => v`	Formatter applied to y-axis tick labels.
`class`	`string`		Extra Tailwind classes merged onto the chart wrapper.

`BarChart`

Opinionated, theme-tokened horizontal bar chart built on LayerChart for ranking a small set of categories by value. Color derives from the --primary design-system token.

Prop	Type	Default	Description
`data`	`Array<Object>`	`[]`	Data points to rank.
`x`	`string`	`'label'`	Key on each data point used as the category label.
`y`	`string`	`'value'`	Key on each data point used as the value.
`height`	`number`	`320`	Chart height in pixels.
`format`	`(value: number) => string`	`(v) => v`	Formatter applied to value-axis tick labels.
`class`	`string`		Extra Tailwind classes merged onto the chart wrapper.

`DonutChart`

Opinionated, theme-tokened donut chart built on LayerChart, using a monochromatic brand ramp (faded --primary) instead of a generic rainbow palette, with an adjacent legend.

Prop	Type	Default	Description
`data`	`Array<Object>`	`[]`	Slice data points.
`key`	`string`	`'value'`	Key on each data point used as the slice value.
`label`	`string`	`'label'`	Key on each data point used as the slice label.
`height`	`number`	`300`	Chart height in pixels.
`legendPosition`	`'bottom'\|'side'`	`'bottom'`	Where the legend renders relative to the donut.
`format`	`(value: number) => string`	`(v) => v`	Formatter applied to legend values.
`class`	`string`		Extra Tailwind classes merged onto the chart wrapper.

`Sparkline`

Inline, chromeless area trend line for pairing with a stat value — no axes, grid, or legend.

Prop	Type	Default	Description
`data`	`Array<Object>`	`[]`	Trend data points.
`x`	`string`	`'x'`	Key on each data point used for the x value.
`y`	`string`	`'y'`	Key on each data point used for the y value.
`height`	`number`	`40`	Chart height in pixels.
`class`	`string`		Extra Tailwind classes merged onto the chart wrapper.

`MapChart`

Opinionated, theme-tokened choropleth map built on LayerChart, using a monochromatic brand ramp (faded --primary) instead of a generic multi-hue scale, with a hover caption instead of a legend.

Prop	Type	Default	Description
`topology` required	`Object`		TopoJSON topology to render.
`object`	`string`	`'countries'`	Key under `topology.objects` identifying the feature collection to draw.
`data`	`Array<{region: string, value: number}>`	`[]`	Values keyed by region, matched against each feature's `nameKey` property.
`nameKey`	`string`	`'name'`	Property on each feature used to look up its value in `data`.
`projection`	`(topology: Object) => Object`	`geoNaturalEarth1`	d3-geo projection factory used to fit the map.
`height`	`number`	`280`	Chart height in pixels.
`format`	`(value: number) => string`	`(v) => v`	Formatter applied to the hover caption's value.
`class`	`string`		Extra Tailwind classes merged onto the chart wrapper.