Native

BarChart

The native counterpart of the web BarChart, with the same data and colours. Tapping a bar shows its values beneath the chart; with onPress, long-press does.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md; setup for every native component is on React Native.

Component	Notes
`BarChart`	Native counterpart of web `BarChart` — same props, but `onPress` per bar instead of `href`/`onSelect`. Tapping a bar shows its values beneath the chart; with `onPress`, long-press does.

The same layout as the web BarChart, with Views — no SVG needed.

import { BarChart } from 'achery-ui/native'

<BarChart
  label="Entities by status"
  orientation="horizontal"
  scale="ordinal"
  series={['Stub', 'Draft', 'Complete']}
  data={[{ label: 'NPCs', values: [12, 9, 4], onPress: () => router.push('/npcs') }]}
/>

Props are as on the web, except onPress?: () => void per datum and style?: ViewStyle.
Each bar announces its label, total and every series' value.
Legend, axis and labels are hidden from screen readers, since the bars already say it all.