LineChart

Chart
Categorical-x series lines with nice y ticks, gridlines, and a legend for multiple series.
src/charts/line-chart
View in Charts

Playground

Every control sets a real prop of LineChartProps. The JSX below updates as you go.
Active users
Web
Mobile
Props
dots
boolean
fade
boolean
compact
boolean
hideGrid
boolean
JSX · LineChartProps
<LineChart fade />

Variants

8 examples from src/charts/line-chart/line-chart.md, each rendered live from its own JSX.
Signups
Curved
<LineChart
title="Signups"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[{ label: "Signups", values: [24, 31, 28, 42, 39, 47, 51] }]}
curved
/>
Signups
Dots
<LineChart
title="Signups"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[{ label: "Signups", values: [24, 31, 28, 42, 39, 47, 51] }]}
dots
/>
Signups
Compact
<LineChart
compact
title="Signups"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[{ label: "Signups", values: [24, 31, 28, 42, 39, 47, 51] }]}
/>
Sign-ins
Granted
Denied
Success vs failure
<LineChart
title="Sign-ins"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[
{ label: "Granted", values: [812, 905, 874, 961, 1024, 640, 588], success: true },
{ label: "Denied", values: [41, 38, 56, 47, 62, 29, 24], destructive: true }
]}
/>
Sessions by platform
Web
iOS
Gradient fade, multi-series
<LineChart
title="Sessions by platform"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
series={[
{ label: "Web", values: [42, 48, 45, 61, 58, 71, 84] },
{ label: "iOS", values: [28, 31, 36, 34, 41, 49, 56] }
]}
fade
/>
OLY · today
Price vs previous close
<LineChart
title="OLY · today"
labels={["9:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "1:00"]}
series={[{ label: "Price", values: [186.1, 187.5, 186.8, 187.4, 188.1, 188.9, 190.5, 191.7] }]}
baseline={188}
fade
/>
Monthly recurring revenue
Formatted values
<LineChart
title="Monthly recurring revenue"
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
series={[{ label: "MRR", values: [112, 118, 127, 125, 138, 151] }]}
formatValue={(v) => `$${v}k`}
/>
Active users
Web
Mobile
Press to inspect
<LineChart
title="Active users"
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}
series={[
{ label: "Web", values: [204, 229, 252, 254, 271, 275, 272, 274] },
{ label: "Mobile", values: [128, 155, 167, 183, 185, 199, 220, 228] }
]}
defaultSelected={5}
/>

Anatomy

Active users
Web
Mobile
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

3 props on LineChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
dots
boolean
false
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
false
Soft gradient fade under the lead (first) series' line (the price-chart look).
CartesianSeriesProps · the shared labels · series · title · max · min · success · destructive · curved · compact · plain · hideLegend · hideGrid · hideAxes · formatValue · selected · defaultSelected · onSelect · testID · style props.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Active users
Web
Mobile
Web
control 10 · field 10 · card 16 · Instrument Sans
Active users
Web
Mobile
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Active users
Web
Mobile
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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] }
]}
/>
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx2
--tx3

Related components