Composed Chart

Bars and lines on one value axis, such as results against a target.

Beta

Web

iOS

Android

@advui/charts

Source

Bars and a target line

Preview

Code

People reached against the targetThousands of people per month, 2026

Reached

Target

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { ComposedChart } from '@advui/charts'

<ComposedChart
  title="Reached against the target"
  data={[{ month: 'Jan', reached: 18, target: 20 }, { month: 'Feb', reached: 21, target: 20 }]}
  index="month"
  series={[
    { key: 'reached', label: 'Reached' },
    { key: 'target', label: 'Target', type: 'line', dashed: true },
  ]}
/>

Examples

Stacked bars and a total

Preview

Code

Funding received, by organization typeMillions of USD, 2026

INGO

NGO

Total

API reference

ComposedChart

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. 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; type?: 'bar' \| 'line'; dashed?: boolean }[]`	—	Numeric fields to plot, drawn as bars unless `type` is `line`; `dashed` suits a target or forecast. Colors follow this order (`chart1`…`chart8`). An array declared apart from the chart needs `as const` to keep its keys literal.
`stacked`	`boolean`	`false`	Stacks the bar series in one bar per category. Lines are never stacked.
`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.
`surface`	`ColorTokens`	`'background'`	The color behind the chart, for the ring around line markers. Use `card` inside a Card.
`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 categories, and a polite live region reads every series’ value there.
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 whose marks match the drawing (a square for bars, a line for lines), 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 categories and read them.
`Escape`	Hides the tooltip.

Responsive behavior

Fills its container; category 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 category. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.