Line chart

Examples and usage of LineChart component

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.

Monotone

<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.

With gaps

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.