Charts

Area Chart

Plots several series over time as stacked, overlapping, or 100% areas, with one tooltip listing every series at the hovered time.

idle

Usage

import { AreaChart } from "@mizen-labs/ui";

Stacked areas read as volume: each band adds to the total.

Each series fills from zero so the series compare against each other.

Every time normalizes to 100%, so the chart reads as share.

While data loads, a placeholder holds the chart's space and keeps the legend. The data that replaces it wipes in.

MetricTrend frames the chart; the legend below it carries each series' total.

Guidance	Practice
Do	Put the largest, steadiest series first so it forms the base of the stack. Keep series order and tones fixed when filters change.

Guidance	Boundary
Scope	Up to six series. Fold the rest into "Other" or split into small multiples; never generate a seventh hue.
Scope	Use stacked or percent only when the series add up to a meaningful whole. Compare unrelated measures in separate charts, never on two y-axes.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`series`	`readonly { id: string; label: string; points: TimeSeriesPoint[]; tone?: ChartSeriesTone }[]`	`Required`	Up to six series. Tones follow the fixed palette order unless set; a seventh series belongs in "Other".
`layout`	`"stacked" \| "overlap" \| "percent"`	`"stacked"`	stacked reads as volume, overlap compares series from zero, percent normalizes each time to 100%. Stacked and percent need the same times and no gaps in every series.
`aria-label / timeZone`	`string`	`Required`	Names the chart and the explicit timezone for displayed dates.
`formatValue / formatAxisValue / locale`	`(value: number) => string / string`	`Locale number formatting / "en-US"`	Formats tooltip values and value-axis labels; percent layout labels its axis as shares.
`legend`	`boolean`	`true`	Shows the series legend; set false when a surrounding card renders it.