LineChart

Categorical-x series lines with nice y ticks, gridlines, and a legend for multiple series.
curved draws a monotone cubic that never overshoots the data, dots marks each datum, and baseline + fade give the trading-app price idiom (dashed previous close, gain/loss auto tone, gradient fill). A series that means success or failure carries its own success / destructive tone instead of a ramp color. Press or scrub the plot to inspect a category.
Active users
Web
Mobile
iOS
Active users
Web
Mobile
Android
Active users
Web
Mobile
Web
tsx
<LineChart
title="Active users"
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
series={[
{ label: "Web", values: [119, 122, 131, 147, 157, 176, 182] },
{ label: "Mobile", values: [63, 93, 101, 121, 162, 207, 251] }
]}
/>

Props

Prop
Description
dots
boolean
Mark each datum with a dot.
baseline
number
Reference value (e.g. previous close) drawn as a dashed line. A single series with no explicit tone auto-tones success/destructive by whether its last value sits above or below the baseline - the trading-app gain/loss idiom.
fade
boolean
Soft gradient fade under each line (the price-chart look).
labels
required
string[]
Category labels along the x axis, one per data column.
series
required
ChartSeries[]
The series to plot; colors follow the chart-1..8 tokens in fixed order, or a series' own `success`/`destructive` tone.
title
string
Optional heading shown above the plot.
max
number
Y-axis maximum override. Defaults to a nice bound above the data max.
min
number
Y-axis minimum override. Defaults to 0 (or the data min when negative).
success
boolean
Tone (single-series only; pick one; default is the primary fill).
destructive
boolean
Tone (single-series only; pick one; default is the primary fill).
curved
boolean
Curve (omit for straight segments).
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility.
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels and accessible values (data formatting, not styling).
selected
number | null
Scrub-to-inspect: the selected category index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected category (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a category (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Line

Don’t
Revenue vs conversion
Revenue
Conversion rate
Mix measures of different scales on one axis: the smaller series flatlines against the baseline and reads as noise. Normalize, or use two charts.
Do
Signups
Web
Mobile
Compare series that share one scale, and let the legend plus the fixed series colors carry identity.
← Histogram
MetricBreakdown →