> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```jsx theme={null}
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.

<CodeGroup>
  ```jsx Monotone theme={null}
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  ```

  ```jsx Linear theme={null}
  <Line type="linear" dataKey="uv" stroke="#8884d8" />
  ```

  ```jsx Step theme={null}
  <Line type="step" dataKey="uv" stroke="#8884d8" />
  ```

  ```jsx Natural theme={null}
  <Line type="natural" dataKey="uv" stroke="#8884d8" />
  ```
</CodeGroup>

## Customized dots and labels

```jsx theme={null}
<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

```jsx theme={null}
<Line 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8"
  strokeDasharray="5 5"
/>
```

## Connect nulls

Control how null values are handled in the line.

<CodeGroup>
  ```jsx With gaps theme={null}
  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} />
  ```

  ```jsx Connected theme={null}
  <Line type="monotone" dataKey="uv" connectNulls={true} />
  ```
</CodeGroup>

## Multiple lines with legend

```jsx theme={null}
<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

```jsx theme={null}
<Line 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8"
  isAnimationActive={true}
  animationDuration={1500}
  animationEasing="ease-in-out"
/>
```

<Note>
  The default tooltip event type for `LineChart` is `'axis'`, which displays all data points at the current x-axis position.
</Note>

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