Line Chart

Shows change over an ordered axis, such as months, as one or more lines.

Stable

Web

iOS

Android

@advui/charts

Source

One series

Preview

Code

5W activity reports receivedPer month, 2026

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { LineChart } from '@advui/charts'

<LineChart
  title="Reports received"
  data={[{ month: 'Jan', reports: 212 }, { month: 'Feb', reports: 238 }]}
  index="month"
  series={[{ key: 'reports', label: 'Reports' }]}
/>

Examples

Several series

A missing value breaks the line.

Preview

Code

Townships covered, by sectorEducation has no Q2 2026 report, so its line breaks there.

Health

WASH

Education

API reference

LineChart

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`T[]`	—	One object per category or x position. Its type `T` (an interface works) is inferred, and `index` and `series` must name its fields.
`index` required	`keyof T & string`	—	Field holding each row’s label.
`indexLabel`	`string`	`index`	Heading of the label column in the table view.
`series` required	`{ key: keyof T & string; label: string }[]`	—	Numeric fields to plot. Colors follow this order (`chart1`…`chart8`), never the values. An array declared apart from the chart needs `as const` to keep its keys literal.
`startAtZero`	`boolean`	`false`	Start the value axis at zero instead of near the data.
`surface`	`ColorTokens`	`'background'`	The color behind the chart, for the ring around markers. Use `card` inside a Card.
`valueFormatter`	`(value: number) => string`	—	Formats tooltip and table values. Axis ticks are compact (1.2K).
`height`	`number`	`240`	Pixels, including the axes.
`width`	`number`	—	Fixed width. By default it fills its container.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the values, which a polite live region reads out.
Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: two or more series get a legend, and the tooltip names each value.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between values and read them.
`Escape`	Hides the tooltip.

Responsive behavior

Fills its container; x labels thin out when they would overlap.

Platform notes

Web

SVG in the page. Hover shows the tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap the plot to show the tooltip for that point. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.