Chart

A single- or multi-series bar chart: vertical columns (or horizontal rows) sized against the axis max, with per-category values and labels.
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.
Signups
Mon
Tue
Wed
Thu
Fri
Sat
Sun
iOS
Signups
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Android
Signups
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Web
tsx
<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}
/>

Props

Prop
Description
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
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`).
success
boolean
Tone (pick one; default is the primary fill). Single-series only.
destructive
boolean
Tone (pick one; default is the primary fill). Single-series only.
horizontal
boolean
Orientation (default is a vertical column chart). Single-series only.
compact
boolean
Density (default is the standard plot size).
hideLegend
boolean
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).
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.

Do & Don’t

Bar

Don’t
Every bar the same full-strength fill and no labels: nothing is emphasized and the axis is unreadable.
Do
Signups
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Keep a labelled axis row and a single bar tone so the buckets read at a glance.
← CandlestickChart
ComposedChart →