Charts

LineChart and AreaChart

Values over time, smooth or straight, with areas, stacking, a tooltip and a data table view.

Ant Design: Line, Area (Ant Charts)

import { LineChart, AreaChart } from '@alea/ui';

Examples

Hover, or Tab to the chart and use the arrow keys, to read each month. The table button shows the same data as a table.

Visits and sign-ups

Both grew every month since August.

Parts of a whole over time: traffic by source.

Traffic by source

Values over time. Hover or use the arrow keys (after Tab) to read each point (MUI LineChart, Mantine LineChart).

Prop	Type	Default	Description
`data`required	`ChartRow[]`	-	Rows of data, one per x value or category.
`series`required	`Series[]`	-	The series to draw: key in each row, label for the legend, optional color.
`x`required	`string`	-	The key for the x axis (dates, months, categories).
`area`	`boolean`	-	Fill under the lines (an area chart).
`className`	`string`	-	Extra class names for the root element.
`curve`	`"smooth" \| "linear"`	`'smooth'`	smooth (default) or straight lines.
`description`	`ReactNode`	-	One sentence on what the data shows; read before the chart.
`height`	`number`	`260`	Plot height in px. Default 260.
`showDots`	`boolean`	-	Dots on each point.
`showTable`	`boolean`	`true`	Shows the table toggle. Default true.
`stacked`	`boolean`	-	Stack the areas on top of each other.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values (axis, tooltip, table).
`xFormat`	`((x: string \| number) => string)`	-	Formats x labels.
`zeroBased`	`boolean`	`true`	Start the y axis at zero. Default true.

A LineChart filled underneath; stacked shows parts of a whole over time.

Prop	Type	Default	Description
`data`required	`ChartRow[]`	-	Rows of data, one per x value or category.
`series`required	`Series[]`	-	The series to draw: key in each row, label for the legend, optional color.
`x`required	`string`	-	The key for the x axis (dates, months, categories).
`className`	`string`	-	Extra class names for the root element.
`curve`	`"smooth" \| "linear"`	-	smooth (default) or straight lines.
`description`	`ReactNode`	-	One sentence on what the data shows; read before the chart.
`height`	`number`	-	Plot height in px. Default 260.
`showDots`	`boolean`	-	Dots on each point.
`showTable`	`boolean`	-	Shows the table toggle. Default true.
`stacked`	`boolean`	-	Stack the areas on top of each other.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values (axis, tooltip, table).
`xFormat`	`((x: string \| number) => string)`	-	Formats x labels.
`zeroBased`	`boolean`	-	Start the y axis at zero. Default true.

A figure with a title and description; the chart itself is an image named with a summary (from, to, highest).
Tab to the chart, then arrows read each point aloud.
Every chart can switch to a real data table.

Key	Does
`Tab`	Focuses the chart
`Arrow Left` / `Right`	Read the previous or next point
`Home` / `End`	First or last point
`Escape`	Hides the tooltip

Don't

Chart frames with the same palette variables (chart/1 to chart/8).