BetaCharts

BarChart

A bar per row, and a bar per series inside it once there is more than one.

Overview

A bar per row, and a bar per series inside it once there is more than one.

import { BarChart } from '@xaui/native/bar-chart'

<BarChart data={rows} xKey="month" yKeys={['units']} />
<BarChart data={rows} xKey="month" yKeys={['organic', 'paid']} isGrouped />

Everything shared is in chart.md.

First example

import { BarChart } from '@xaui/native/bar-chart'

export function Example() {
  return <BarChart />
}

Anatomy

BarChart is a standalone component with no public slots.

Usage

import { BarChart } from '@xaui/native/bar-chart'

Root props

BarChartProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
isGrouped	`boolean \| undefined`	No	Whether several series stand side by side in one group rather than stacking. Grouped compares; stacked totals. The `AreaChart` says the same thing about its own pair, and for the same reason: a stack of numbers that are not parts of one whole is a chart that adds unrelated things together.
radius	`number \| undefined`	No	The bar's corner, in points, and a raw number rather than a `RadiusKey`: a bar's corner is bounded by its own width, not by the container scale, and a `2xl` on a six-point bar would be a circle. Unset, it is half the bar — the capsule, and the only value that follows the data rather than the theme.
gap	`number \| undefined`	No	The share of a slot left empty either side of a bar.

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

The source defines no extra rule. Keep the React Native labels, roles, states and focus order your case needs, then check the result with VoiceOver and TalkBack.

Migration from legacy

This component declares no rule of its own. The migration guide covers variants, colours and slots.

Implementation notes

Grouped compares, stacked totals

Stacked is the default, because a bar chart with two series is usually one quantity split. The AreaChart makes the same distinction in the same words.

Grouped divides the slot the row already has, rather than introducing a second scale: the group is the slot, and each series takes an equal share of it.

Only the topmost segment of a stack is rounded. A corner between two segments is a gap in a bar that is meant to read as one.

The corner is a capsule, and it is computed

radius is a raw number in points, not a RadiusKey: a bar's corner is bounded by its own width, not by the container scale, and a 2xl on a six-point bar would be a circle.

Unset, it is under a third of the bar's width, computed from the slot the scale gave it so it holds at four bars and at forty.

A third rather than a half, and the half is what a capsule is: a capsule reads as a shape rather than as a measurement — the eye stops at the dome instead of at the value it marks — and a narrow bar, one of three in a group, becomes a pill with no flat top at all.

barPath clamps it to the bar's own height as well, which is what keeps the shortest bar a stadium rather than a shape whose two arcs cross and render as a knot. That case is not exotic: it is the first bar of every chart that starts near zero.

Its own props

Prop	Type	Default	Notes
`isGrouped`	`boolean`	`false`	Side by side rather than stacked
`radius`	`number`	half the bar	Points, clamped to the bar's own box
`gap`	`number`	`0.4`	The share of a slot left empty