Line
Lines through one value per point, with straight, monotone or step curves.
A line chart shows how a value changes along a continuous x axis: time series, measurements, trends. Use it when the shape of the change matters more than individual values.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { LineSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair, LastValueLabel } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { weather, type WeatherDay } from "@/lib/data-general";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function LineExample() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={weather} theme={theme} barSpacing={2}>
<Pane>
<Grid />
<LineSeries<WeatherDay> name="Mean temperature" y="temp" curve="monotone" />
<LastValueLabel />
<YAxis tickFormat={(t) => `${t.label}°`} />
<Legend />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
<LineSeries y="temperature" />
<LineSeries y={(d) => d.temperature * 1.8 + 32} color="#f59e0b" width={1.5} />y defaults to "close" and color to the theme's line color. Missing values (undefined, NaN) leave a gap
unless connectGaps is set.
Curves, dashes and points
curve is "linear" (default), "monotone" (a smooth spline that never overshoots), "step" / "stepAfter" or
"stepBefore". dash takes "solid", "dashed", "dotted", "longDash" or a dash array. points draws a dot at
every value ("auto": only when bars are far enough apart).
See the curves & steps example →
Straight lines
<StraightLine> draws a horizontal line at a value or a vertical line at an x value (a Date, a number or a category
index). Horizontal lines can take part in autoscale. For labelled reference lines and areas see
Annotations.
See the straight lines example →
Numeric x axes
With xMode="linear" the same series draws classic x / y line charts. See Data & x modes.