LineChart

Updated: May 14, 2025

The LineChart component provides a way to display line charts with interactive features, including hover effects, click events, and custom styling options. It supports various customization options including different chart types, color schemes, and interactive features.

Live (morph animation)

Live streaming dataViewport streaming (smooth pan). New samples every 1000ms.

This example uses the useStreamingViewport hook to smoothly pan the x-axis domain (viewport) while streaming new samples, then passes the resulting data into LineChart.

Live (animation disabled)

Live streaming dataViewport streaming (smooth pan) with animation disabled. New samples every 1000ms.

Static example

Dachstein Glacier Retreat vs. Global WarmingSurface area of the Dachstein glacier and global temperature anomaly over time

Curve

curve is Recharts' interpolation, and it is a claim about the data between your points. natural and monotone draw a smooth line, which implies the value moved continuously; step holds each value until the next reading, which is honest for something that changes in jumps — a price tier, a headcount, a setting. linear sits between the two.

Same data, held between readingscurve: step

Numeric x axis

By default the x axis is categorical: each data point gets an equal slot, whatever its value. For readings that are not evenly spaced — samples arriving at irregular times, a measurement against a continuous quantity — set xAxisType="number" so the spacing reflects the actual values, and pass xDomain to pin the visible range.

Numeric axis

<LineChart
xAxisType="number"
xDomain={[0, 100]}
series={{ key: "Response" }}
data={samples}
/>

A fixed xDomain is also what keeps a streaming chart from rescaling on every sample — see the live example above, which drives it from useStreamingViewport.

Animation

Animation is on by default. The three animation* props are passed through to Recharts, so they take its values. Turn animation off for a chart that updates faster than the animation runs: each new sample restarts the transition, so a streaming line spends its time animating rather than showing the data. The second live example above is the same chart with animation={false}.

API reference

Prop	Type	Default
curve Recharts interpolation: natural, linear, step, stepBefore, stepAfter, monotone, basis, bump and their variants.	curveType	natural
reverseY Move the y axis to the right.	boolean	false
reverseX Move the x axis to the top.	boolean	false
animation Animate the line on data change. Turn it off for a chart that updates faster than the animation runs.	boolean	true
animationBegin Delay before the animation starts, in milliseconds.	number	—
animationDuration Animation length, in milliseconds.	number	—
animationEasing Recharts easing name.	unknown	—
xAxisType Treat x values as numbers rather than equally spaced categories.	numbercategory	—
xDomain Visible x range. Requires xAxisType="number".	[number, number]	—
legend Legend position and visibility.	LegendConfig	{}
error Render the error state instead of the chart.	boolean	false
tooltip Show a tooltip on hover.	boolean	true
grid Which grid lines to draw.	xybothnone	both
axis Which axes to label.	xybothnone	both
loading Render the loading state instead of the chart.	boolean	false
border Panel border colour. false removes it.	Colorssurfacetransparentboolean	neutral-alpha-weak
…and every ChartProps prop	inherited	—
…and every FlexProps prop	inherited	—

DataSetup

DataBarChart

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club