Tick Bar Chart
Order status, budget split or traffic sources as one row of thin ticks, sized to fit any width. Tap a colour (or its legend entry) to highlight it. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<TickBarChart />1 variantNew in 2.0.1
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
TickBarChart.tsx
<TickBarChart data={[ { label: "Completed", value: 1012, color: "#8B8CF6" }, { label: "Pending", value: 340, color: "#93D5BF" }, { label: "Canceled", value: 152, color: "#E58A93" }, ]} onSelect={(i, d) => setPicked(d)}/>Props
| Prop | Type | Default |
|---|---|---|
| data Categories. | { label, value, color? }[] | — |
| height / tickWidth / gap / radius Tick geometry; the count fills the width. | number | 44 / 4 / 3 / 2 |
| showLegend / legendValues Legend under the ticks, with values. | boolean | true / false |
| selectedIndex Controlled highlight. | number | null | — |
| onSelect Tap a category. | (index, datum) => void | — |
Did you like the content?