The LineChart component visualizes data as a series of points connected by line segments. It’s ideal for showing trends over time or continuous data.
Basic line chart
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
{ name: 'Page A', uv: 590, pv: 800, amt: 1400 },
{ name: 'Page B', uv: 868, pv: 967, amt: 1506 },
{ name: 'Page C', uv: 1397, pv: 1098, amt: 989 },
{ name: 'Page D', uv: 1480, pv: 1200, amt: 1228 },
{ name: 'Page E', uv: 1520, pv: 1108, amt: 1100 },
{ name: 'Page F', uv: 1400, pv: 680, amt: 1700 },
];
function Example() {
return (
<LineChart width={600} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
}
Line types
Different line interpolation types for varied visual styles.
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
Customized dots and labels
<LineChart width={600} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="uv"
stroke="#8884d8"
strokeWidth={2}
dot={{ stroke: 'green', strokeWidth: 2, r: 4 }}
activeDot={{ r: 8 }}
label={{ fill: 'red', fontSize: 12 }}
/>
</LineChart>
Dashed line
<Line
type="monotone"
dataKey="uv"
stroke="#8884d8"
strokeDasharray="5 5"
/>
Connect nulls
Control how null values are handled in the line.
const dataWithNull = [
{ name: 'Page A', uv: 590 },
{ name: 'Page B', uv: null },
{ name: 'Page C', uv: 1397 },
{ name: 'Page D', uv: 1480 },
];
<Line type="monotone" dataKey="uv" connectNulls={false} />
Multiple lines with legend
<LineChart width={600} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" name="Page Views" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" name="Unique Visitors" />
<Line type="monotone" dataKey="amt" stroke="#ffc658" name="Amount" />
</LineChart>
With animations
<Line
type="monotone"
dataKey="uv"
stroke="#8884d8"
isAnimationActive={true}
animationDuration={1500}
animationEasing="ease-in-out"
/>
The default tooltip event type for LineChart is 'axis', which displays all data points at the current x-axis position.
Common pitfalls
- Missing dataKey: Always specify
dataKey on both the Line component and the XAxis to ensure proper rendering.
- Null handling: Use
connectNulls={true} if you want to bridge gaps in your data, otherwise gaps will appear.
- Performance: For datasets with thousands of points, consider using
isAnimationActive={false} to improve rendering performance.
- Responsive sizing: Use
ResponsiveContainer to make charts adapt to parent container size instead of fixed width/height.