Chart

Chart
A single- or multi-series bar chart: vertical columns (or horizontal rows) sized against the axis max, with per-category values and labels.
src/charts/chart
View in Charts

Playground

Every control sets a real prop of ChartProps. The JSX below updates as you go.
Signups
Props
stacked
boolean
horizontal
boolean
Tone
pick one
compact
boolean
hideLegend
boolean
JSX · ChartProps
<Chart />

Variants

5 examples from src/charts/chart/chart.md, each rendered live from its own JSX.
Revenue
Costs
Profit
Grouped bars
<Chart
labels={["Q1", "Q2", "Q3", "Q4"]}
series={[
{ label: "Revenue", values: [62, 70, 84, 89] },
{ label: "Costs", values: [41, 48, 55, 59] },
{ label: "Profit", values: [21, 22, 29, 30] }
]}
/>
Authorization code
Client credentials
Refresh token
Stacked columns
<Chart
stacked
labels={["acme", "globex", "initech", "umbrella"]}
series={[
{ label: "Authorization code", values: [1840, 1210, 960, 640] },
{ label: "Client credentials", values: [920, 1480, 340, 1120] },
{ label: "Refresh token", values: [610, 380, 720, 290] }
]}
/>
Granted
Denied
Success vs failure
<Chart
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[
{ label: "Granted", values: [812, 905, 874, 961, 1024, 640, 588], success: true },
{ label: "Denied", values: [41, 38, 56, 47, 62, 29, 24], destructive: true }
]}
/>
Horizontal rows
<Chart
horizontal
data={[
{ label: "Atoms", value: 92 },
{ label: "Molecules", value: 78 },
{ label: "Organisms", value: 64 },
{ label: "Charts", value: 85 }
]}
/>
Tones
<Column loose>
<Chart
success
data={[
{ label: "Mon", value: 82 },
{ label: "Tue", value: 88 },
{ label: "Wed", value: 91 },
{ label: "Thu", value: 86 },
{ label: "Fri", value: 94 }
]}
/>
<Chart
destructive
data={[
{ label: "Mon", value: 14 },
{ label: "Tue", value: 9 },
{ label: "Wed", value: 22 },
{ label: "Thu", value: 12 },
{ label: "Fri", value: 7 }
]}
/>
</Column>

Anatomy

Signups
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

18 props on ChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
6 props
data
ChartDatum[]
–
The bars to render, in order (single-series mode).
labels
string[]
–
Category labels along the x axis (grouped mode, with series).
series
ChartSeries[]
–
Multiple series rendered as grouped columns per category, colored by the chart-1..8 tokens (or a series' own success/destructive tone).
stacked
boolean
false
Stack the grouped series within one column per category (composition) instead of clustering them side by side.
title
string
–
Optional heading shown above the plot.
max
number
–
Axis maximum. Defaults to the largest value in the data (the largest category TOTAL when stacked).
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Orientation
1 prop
horizontal
boolean
false
Density
9 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
hideLegend
boolean
false
Hide the series legend (grouped mode shows one by default).
selected
number | null
–
Press-to-inspect: the selected category index (controlled). Pass null for none. Vertical charts only.
defaultSelected
number
–
Press-to-inspect: the initially selected category (uncontrolled).
onSelect
(index: number | null) => void
–
Fired when a press selects a category (or clears it with null).
formatValue
(v: number) => string
–
Formats the value axis, the inspected value and the accessible values (data formatting, not styling).
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Chart
title="Signups"
data={[
{ label: "Mon", value: 45 },
{ label: "Tue", value: 60 },
{ label: "Wed", value: 35 },
{ label: "Thu", value: 70 },
{ label: "Fri", value: 55 },
{ label: "Sat", value: 80 },
{ label: "Sun", value: 95 }
]}
max={100}
/>
Pass labels + series for grouped clusters colored by the chart-1..chart-8 tokens, add stacked to accumulate those series within one column per category, or give a series its own success / destructive tone when it means success or failure; press or scrub a category to inspect it.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx2
--tx3

Related components