Cylinder Bar Chart
Shaded round columns with lit tops that rise out of the floor, a glass track to the max and a value bubble.
<CylinderBarChart />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.
CylinderBarChart.tsx
<CylinderBarChart data={[{ label: "Jan", value: 42 }, { label: "Feb", value: 58 }]} max={100}/>Props
| Prop | Type | Default |
|---|---|---|
| data Columns. | { label, value, color? }[] | — |
| height / max / gap / barWidth Layout. | number | 200 / largest / 14 / 48 |
| color / activeColor / inactiveOpacity Colours. | string / string / number | theme / color / 0.45 |
| showTrack / showLabels / showTooltip Glass track, labels, bubble. | boolean | true |
| formatValue Bubble text. | (v, datum) => string | compact |
| onScrubStart / onScrubEnd Pause your ScrollView while dragging. | () => void | — |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag (haptics via ChartProvider). | (index, datum) => void | — |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?