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

Renders a connected line in a Cartesian chart.

## Usage

```tsx theme={null}
import { LineChart, Line, XAxis, YAxis } from 'recharts';

<LineChart data={data} width={600} height={300}>
  <XAxis dataKey="name" />
  <YAxis />
  <Line dataKey="value" stroke="#8884d8" />
</LineChart>
```

## Props

<ParamField path="dataKey" type="string | number | function" required>
  The key or getter function of a group of data which should be displayed in the line.
</ParamField>

<ParamField path="stroke" type="string" default="#3182bd">
  The stroke color. If "none", no line will be drawn.
</ParamField>

<ParamField path="strokeWidth" type="string | number" default="1">
  The width of the stroke.
</ParamField>

<ParamField path="strokeDasharray" type="string | number">
  The pattern of dashes and gaps used to paint the line.

  ```tsx theme={null}
  <Line strokeDasharray="4" />
  <Line strokeDasharray="4 1" />
  <Line strokeDasharray="4 1 2" />
  ```
</ParamField>

<ParamField path="type" type="CurveType" default="linear">
  The interpolation type of curve. Allows custom interpolation function.

  See [d3-shape curves](https://d3js.org/d3-shape/curve) for available options.
</ParamField>

<ParamField path="connectNulls" type="boolean" default="false">
  Whether to connect the line across null points.
</ParamField>

<ParamField path="dot" type="boolean | object | ReactElement | function" default="true">
  Renders a circle element at each data point. Options:

  * `false`: no dots are drawn
  * `true`: renders the dots with default settings
  * `object`: the props of the dot, merged with internal calculated props
  * `ReactElement`: the custom dot element
  * `function`: a render function of the custom dot

  <Expandable title="Example">
    ```tsx theme={null}
    <Line dataKey="value" dot={false} />
    <Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
    <Line dataKey="value" dot={CustomizedDot} />
    ```
  </Expandable>
</ParamField>

<ParamField path="activeDot" type="boolean | object | ReactElement | function" default="true">
  The active dot is rendered on the closest data point when user interacts with the chart. Options:

  * `false`: dots do not change on user activity
  * `true`: renders the active dot with default settings
  * `object`: the props of the active dot, merged with internal calculated props
  * `ReactElement`: the custom active dot element
  * `function`: a render function of the custom active dot

  <Expandable title="Example">
    ```tsx theme={null}
    <Line dataKey="value" activeDot={false} />
    <Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
    <Line dataKey="value" activeDot={CustomizedActiveDot} />
    ```
  </Expandable>
</ParamField>

<ParamField path="label" type="boolean | object | ReactElement | function" default="false">
  Renders one label for each data point. Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object`: the props of LabelList component
  * `ReactElement`: a custom label element
  * `function`: a render function of custom label

  <Expandable title="Example">
    ```tsx theme={null}
    <Line dataKey="value" label />
    <Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
    <Line dataKey="value" label={CustomizedLabel} />
    ```
  </Expandable>
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart:
  Hidden graphical elements are still visible in Legend,
  and can be included in axis domain calculations,
  depending on `includeHidden` props of your XAxis/YAxis.
</ParamField>

<ParamField path="name" type="string | number">
  The name of data.
  This option will be used in tooltip and legend to represent this graphical item.
  If no value was set to this option, the value of dataKey will be used alternatively.
</ParamField>

<ParamField path="unit" type="string | number | null">
  The unit of data. This option will be used in tooltip.
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
</ParamField>

<ParamField path="legendType" type="LegendType" default="line">
  The type of icon in legend.
  If set to 'none', no legend item will be rendered.
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  The type of tooltip item.
</ParamField>

<ParamField path="data" type="array">
  If set, data will be read from this property instead of from the chart data context.
</ParamField>

<ParamField path="shape" type="ReactElement | function">
  If set a ReactElement, the shape of line can be customized.
  If set a function, the function will be called to render customized shape.

  <Expandable title="Example">
    ```tsx theme={null}
    <Line dataKey="value" shape={CustomizedShapeComponent} />
    <Line dataKey="value" shape={renderShapeFunction} />
    ```
  </Expandable>
</ParamField>

### Animation props

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If set false, animation of line will be disabled.
  If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="AnimationTiming" default="ease">
  The type of easing function.
</ParamField>

<ParamField path="animateNewValues" type="boolean" default="true">
  Whether to animate when new values appear.
</ParamField>

<ParamField path="onAnimationStart" type="function">
  The customized event handler of animation start.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  The customized event handler of animation end.
</ParamField>

### Layout props

<ParamField path="id" type="string">
  Unique identifier of this component.
  Used as an HTML attribute `id`, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.
</ParamField>

<ParamField path="zIndex" type="number" default="400">
  Z-Index of this component and its children. The higher the value,
  the more on top it will be rendered.
  Components with higher zIndex will appear in front of components with lower zIndex.
  If undefined or 0, the content is rendered in the default layer without portals.

  @since 3.4
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/Line.tsx`