Area Chart
Filled series with eight fill patterns, stacked / 100% / streamgraph stacking, glow, animated dashes, a brush for long ranges and a finger-following tooltip.
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 { AreaSeriesChart } from "expo-charts"; const data = [ { month: "Jan", desktop: 186, mobile: 80 }, { month: "Feb", desktop: 305, mobile: 200 }, { month: "Mar", desktop: 237, mobile: 120 },]; const config = { desktop: { label: "Desktop" }, mobile: { label: "Mobile", variant: "hatched" },}; export function Visitors() { return ( <AreaSeriesChart data={data} config={config} xKey="month" stacked curve="natural" fillVariant="gradient" backgroundVariant="dots" showLegend /> );}Props
| Prop | Type | Default |
|---|---|---|
| fillVariant gradient, gradient-reverse, solid, dotted, lines, hatched, striped, duotone, duotone-reverse. | FillVariant | area: "gradient", bar: "solid" |
| stacked Stack series. | boolean | false |
| stackOffset 100% stacking or a centred streamgraph. | "none" | "expand" | "silhouette" | "none" |
| curve Interpolation. | "monotone" | "natural" | "linear" | "step" | "monotone" |
| strokeWidth Line thickness. | number | 2 |
| strokeVariant Stroke style; animated dashes march. | "solid" | "dashed" | "animated-dashed" | "solid" |
| glow Soft neon glow under the stroke. | boolean | false |
| showDots Point markers. | boolean | line: true |
| dotVariant Point marker style. | "default" | "border" | "colored-border" | "none" | "default" |
| activeDotVariant Marker at the scrubbed point. | DotVariant | "default" |
| bufferLast Draws the last segment dashed (projection). | 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?