Bar Chart
Vertical or horizontal bars with rounded corners, grouped or stacked (including 100%), hatched / duotone / striped fills, glow, lollipop shape, negative colours and a hatched buffer bar for in-progress periods.
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
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.
import { BarSeriesChart } from "expo-charts"; <BarSeriesChart data={data} config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile", variant: "hatched" } }} xKey="month" radius={8} glow bufferLast showLabels/>Props
| Prop | Type | Default |
|---|---|---|
| layout Bar direction. | "vertical" | "horizontal" | "vertical" |
| stacked Stack series. | boolean | false |
| stackOffset 100% stacked bars. | "none" | "expand" | "none" |
| radius Corner radius (outer ends only when stacked). | number | 6 |
| barShape Thin stem with a round head. | "bar" | "lollipop" | "bar" |
| fillVariant gradient, gradient-reverse, solid, dotted, lines, hatched, striped, duotone, duotone-reverse. | FillVariant | area: "gradient", bar: "solid" |
| glow Glowing bars. | boolean | false |
| bufferLast Hatch the last bar. | boolean | false |
| barGap / categoryGap / maxBarSize Spacing controls. | number | 4 / 0.25 / 56 |
| negativeColor Colour for negative values. | string | — |
| getColor Per-bar colour. | (value, index, key) => string | — |
| labelInside Horizontal: category label inside the bar. | boolean | false |
Shared cartesian props
Every Area, Bar, Line and Combo chart also accepts these — this is where axes, grid, legend, tooltip, brush and loading live.
| Prop | Type | Default |
|---|---|---|
| data Rows, e.g. [{ month: "Jan", desktop: 186 }]. | Datum[] | — |
| config Series keys → { label, color, variant, strokeVariant, glow }. | ChartConfig | — |
| xKey Key of the category / x value in each row. | string | — |
| keys Subset and order of series to draw. | string[] | all config keys |
| width Omit to fill the parent and re-flow on rotation. | number | parent width |
| height Chart height in points. | number | 220 |
| showGrid Horizontal grid lines. | boolean | true |
| gridStyle Grid line style. | "solid" | "dashed" | "solid" |
| gridVertical Vertical grid lines at categories. | boolean | false |
| showXAxis Category labels under the chart. | boolean | true |
| showYAxis Value ticks. | boolean | false |
| yAxisPosition Side for the value axis. | "left" | "right" | "left" |
| yTickCount Approximate number of ticks. | number | 4 |
| backgroundVariant dots, grid, cross-hatch, diagonal-lines, plus, tiny-checkers, wiggle-lines, bubbles. | BackgroundVariant | "none" |
| showLegend Legend under (or above) the chart. | boolean | false |
| legendVariant square, circle, circle-outline, rounded-square, rounded-square-outline, vertical-bar, horizontal-bar. | LegendVariant | "rounded-square" |
| legendPosition Where the legend sits. | "top" | "bottom" | "bottom" |
| legendAlign Legend alignment. | "left" | "center" | "right" | "center" |
| legendMode Tap to hide a series, or highlight it and dim the rest. | "toggle" | "select" | "none" | "toggle" |
| showTooltip Floating tooltip while scrubbing / after a tap. | boolean | true |
| tooltipIndicator Colour marker in tooltip rows. | "dot" | "line" | "dashed" | "dot" |
| tooltipVariant Tooltip surface. | "default" | "frosted-glass" | "default" |
| tooltipRoundness Tooltip corner radius. | "sm" | "md" | "lg" | "xl" | "lg" |
| showTooltipTotal Adds a Total row. | boolean | false |
| showLabels Value labels on points / bars. | boolean | false |
| animationType rise, left-to-right, right-to-left, center-out, edges-in, none. | AnimationType | "left-to-right" (bars: "rise") |
| isLoading Pulsing skeleton with a Loading badge. | boolean | false |
| showBrush Range selector under the chart for long series. | boolean | false |
| formatValue Formats values in axes, labels and tooltip. | (v, key) => string | compact (1.2k) |
| formatLabel Formats category labels. | (x, index) => string | String(x) |
| onSelect Fires while scrubbing and on tap (great for haptics). | (index, datum) => void | — |
| onScrubStart / onScrubEnd Pause your ScrollView while the finger scrubs. | () => void | — |
Did you like the content?