Skip to content
misoto22 design

Charts

LineChart

Several series compared over a continuous axis.

When to reach for it

The reader is comparing series against each other. When the area under one line is the point, fill it — that is an AreaChart.

Examples

default

Visitors per month
Visitors per month
monthDesktopMobile
Jan18680
Feb305200
Mar237120
Apr273190
May209130
Jun314240

stroke dot curve

Visitors per month
Visitors per month
Desktop
186
305
237
273
209
314

legend variants

Visitors per month
Visitors per month
DesktopMobile
18680
305200
237120
273190

backgrounds

Visitors per month — dots plate
Visitors per month — dots plate
Desktop
186
305
237
273
209
314

emphasis

Glowing — one series is the point
Glowing — one series is the point
DesktopMobile
18680
305200
237120
273190
209130
314240
Buffer — the last leg is a projection
Buffer — the last leg is a projection
DesktopMobile
18680
305200
237120
273190
209130
314240

brush

Visitors per day
Visitors per day
dayDesktopMobile
D1160140
D2177139
D3194136
D4208131
D5219125
D6226117
D7230108
D822998
D922489
D1021479
D1120269
D1218761
D1317053
D1415247
D1513543
D1612041
D1710740
D189742
D199245
D209050
D219357
D2210065
D2311175
D2412484
D2514094
D26158104
D27175113
D28192122
D29206129
D30218134
D31226138
D32230140
D33229140
D34225138
D35216133
D36204128
D37189120
D38172112
D39155103
D4013893

loading

Visitors per month
Loading

axis labels and format

p95 latency
p95 latency
p95 latency
1.42
1.61
2.04
1.88
1.34
Ad spend
Ad spend
Ad spend
4,210
5,180
4,890
6,320
7,010

sonify

Latency per week, milliseconds
Latency per week, milliseconds
weekp95 latencyp50 latency
W114261
W216164
W320466
W418863
W513458
W612957

toolbar

Visitors per day

Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span.

Showing D1 to D90, 90 of 90 points

Visitors per day
dayDesktopMobile
D1160140
D2172140
D3183139
D4194137
D5203135
D6212132
D7219129
D8224126
D9228122
D10230117
D11230112
D12228107
D13224102
D1421896
D1521191
D1620285
D1719280
D1818174
D1917069
D2015864
D2114760
D2213555
D2312552
D2411548
D2510746
D2610043
D279542
D289241
D299040
D309140
D319341
D329742
D3310344
D3411147
D3512050
D3613053
D3714057
D3815262
D3916466
D4017571
D4118677
D4219782
D4320688
D4421493
D4522199
D46226104
D47229109
D48230114
D49229119
D50227123
D51222127
D52216131
D53208134
D54199136
D55189138
D56178139
D57166140
D58155140
D59143139
D60132138
D61122136
D62113134
D63105131
D6498128
D6594124
D6691120
D6790115
D6891110
D6994105
D709999
D7110594
D7211388
D7312283
D7413377
D7514472
D7615567
D7716762
D7817858
D7918954
D8020050
D8120947
D8221644
D8322242
D8422741
D8522940
D8623040
D8722940
D8822541
D8922043
D9021445

Notes

Several series compared over a continuous axis — the shape for "which of these is going where".

The difference from <AreaChart> is what the reader is asked to do: an area says "read the magnitude under this", a line says "compare these against each other". Filling four overlapping series makes the second question unanswerable, which is why a line chart has no fill variant to offer.

Props

LineChart props
PropTypeDefaultDescription
childrenrequiredReactNodeThe composed parts — axes, grid, tooltip, legend, and the marks themselves.
configrequiredTConfig & ValidateKeys<TData, TConfig>—
datarequiredTData[]The rows the chart draws. One entry per point, bar or category.
titlerequiredstringWhat the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
animationTypeChartRevealType'forward'—
chartPropsComponentProps<typeof RechartsLineChart>Escape hatch onto the raw Recharts chart element.
classNamestringMerged onto the figure, last, so a call site can size or space it.
curveTypeChartCurveType'linear'How the line between two points is interpolated. Every mark inherits it unless it says otherwise.
defaultSelectedDataKeystring | nullnullThe series lit on first render. Selection dims every other series.
descriptionReactNodeA line under the title — the unit, the window, the caveat.
emptyChartEmptyProps | falseWhat the chart shows when it has nothing to draw. Rendered instead of the plot whenever `data` is empty and the chart is not loading — the state a real dashboard reaches within a week, and the one an empty pair of axes is indistinguishable from a failed load. `false` keeps the axes, for a chart whose emptiness is itself the reading.
hideDataTablebooleanfalseDrops the hidden table view. Only correct when the page prints the data itself.
isLoadingbooleanfalseSwaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands.
loadingPointsnumberHow many points the skeleton draws.
onSelectionChange(selectedDataKey: string | null) => voidFires when the selection changes, and with null when it is cleared.
showTitlebooleanPrints the title above the plot instead of hiding it from sight.
xDataKeykeyof TData & stringThe row field on the category axis. Needed by the brush and by the table view.

Types

TSX
export type LineStrokeVariant = AreaStrokeVariant

Accessibility

  • title is required; the rows are also rendered as a visually hidden table.
  • A clickable line gets a 15px transparent line underneath it, because a 1.6px stroke is not a pointer target.
  • buffer draws the last segment dashed by measuring the real path length, so a projection is visibly a different kind of fact at any curve type.

Related

AreaChartComposedChart