A volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.

Web + MobileBetaCharts

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

When to use

A volume whose size matters, not only its direction: credits consumed, storage used.
The parts of a total over time, stacked: credits by model, views by source.

When not to use

Several series whose lines cross: the washes would hide each other.Use instead: Line chart
Parts of a total at one moment.Use instead: Pie and donut chart

Installation

Install

npm install @krizaka/charts

Import

import { AreaChart } from "@krizaka/charts/line";

Examples

Credits by model

Eight weeks of Orazaka credits, stacked by model, the plan's weekly allowance as a threshold.

Credits used per week, by model

Workspace “Atelier Nord”, Pro plan

Area chart, 3 × 8 (Aug 3 – Sep 21). Chat: from 9,400 to 14,100, lowest 9,400 (Aug 3), highest 14,100 (Sep 21), up 50%. Image: from 4,100 to 7,400, lowest 4,100 (Aug 3), highest 7,400 (Sep 21), up 80%. Video: from 1,200 to 6,100, lowest 1,200 (Aug 3), highest 6,100 (Sep 21), up 408%. Weekly allowance at 25,000.

Credits used per week, by model — data
Category	Chat	Image	Video
Aug 3	9,400	4,100	1,200
Aug 10	10,200	4,600	1,900
Aug 17	9,800	5,300	2,400
Aug 24	11,600	5,100	3,100
Aug 31	12,300	6,200	3,600
Sep 7	12,900	6,000	4,800
Sep 14	13,400	6,900	5,200
Sep 21	14,100	7,400	6,100

Single area

One volume over time: storage used by a workspace.

Storage used

Area chart, 14 (Sep 1 – Sep 14). Storage: from 12.4 GB to 20.2 GB, lowest 12.4 GB (Sep 1), highest 20.2 GB (Sep 14), up 63%.

Storage used — data
Category	Storage
Sep 1	12.4 GB
Sep 2	12.9 GB
Sep 3	13.1 GB
Sep 4	13.8 GB
Sep 5	14.6 GB
Sep 6	14.9 GB
Sep 7	15.7 GB
Sep 8	16.2 GB
Sep 9	16.4 GB
Sep 10	17.3 GB
Sep 11	18.1 GB
Sep 12	18.6 GB
Sep 13	19.4 GB
Sep 14	20.2 GB

Props

A volume over time: a line over a soft wash (stacked: the parts of a total).

Prop	Type	Default	Description
`data`required	`readonly T[]`	—	The rows, in the order of the x axis.
`title`required	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`curve`	`Curve`	—	The shape between points: `monotone` (default, never overshoots), `linear`, `step` (a value that holds).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`dots`	`boolean`	—	A dot on every point (short series). Default false: the end of each line carries one.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`endLabels`	`boolean`	`true`	Write the last value at the end of each line (up to three series). Default true.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the values are written (axis, tooltip, table, summary). Default `"number"`.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`legend`	`boolean`	—	Show the legend (from two series). Default true.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`markers`	`readonly Marker[]`	—	Vertical markers at a category: a launch, an incident.
`onSelect`	`((datum: T, index: number) => void)`	—	Called with the row when a point or a bar is clicked (or Enter is pressed on it).
`series`	`readonly SeriesSpec<T>[]`	—	The series to draw, each with its field and its name; the palette follows their order.
`stacked`	`boolean`	—	Stack the series: a total and its parts over time.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`thresholds`	`readonly Threshold[]`	—	Horizontal lines at a value: a goal, a payout threshold.
`x`	`string \| ((datum: T, index: number) => unknown)`	—	The field (or function) of the category: a month (`"2026-04"`), a day, a label. Default: the row's position.
`xFormat`	`CategoryFormat`	—	How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.
`xLabel`	`string`	—	The header of the categories in the data table (`Month`).
`y`	`string \| ((datum: T, index: number) => number \| null)`	—	A single series: its field. Use `series` for several.
`yLabel`	`string`	—	The name of the single `y` series (legend, tooltip, table). Default: the field's name.
`zero`	`boolean`	—	Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.

Accessibility

The plot is a group named by the title and described by a summary written from the data (extremes, trend), read before anything else.
The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
Colour never carries a meaning alone: a legend from two series, direct labels, the table.
The entrance plays once, when the chart comes on screen, and never under reduced motion.

Keyboard

Keys	Action
`Tab`	Moves the focus to the plot (one tab stop), then to the data and export buttons.
`Arrow keys`	Walk the points one by one: each is announced and its tooltip shown.
`Home / End`	Jump to the first or the last point.
`Esc`	Hides the tooltip and clears the active point.

Best practices

Stack only parts of one total, in a stable order: the series keep their palette slot whatever is filtered.
The tooltip of a stacked chart adds the total: do not add a series for it.
Start at zero (the default): an area's height is read as an amount.

Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Area chart