Line

Renders a connected line in a Cartesian chart.

Usage

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

dataKey · string | number | function · required

The key or getter function of a group of data which should be displayed in the line.

stroke · string · default: "#3182bd"

The stroke color. If “none”, no line will be drawn.

strokeWidth · string | number · default: "1"

The width of the stroke.

strokeDasharray · string | number

The pattern of dashes and gaps used to paint the line.

<Line strokeDasharray="4" />
<Line strokeDasharray="4 1" />
<Line strokeDasharray="4 1 2" />

type · CurveType · default: "linear"

The interpolation type of curve. Allows custom interpolation function.

See d3-shape curves for available options.

connectNulls · boolean · default: "false"

Whether to connect the line across null points.

dot · 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

Show Example

<Line dataKey="value" dot={false} />
<Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
<Line dataKey="value" dot={CustomizedDot} />

activeDot · 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

Show Example

<Line dataKey="value" activeDot={false} />
<Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Line dataKey="value" activeDot={CustomizedActiveDot} />

label · 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

Show Example

<Line dataKey="value" label />
<Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Line dataKey="value" label={CustomizedLabel} />

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

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

unit · string | number | null

The unit of data. This option will be used in tooltip.

xAxisId · string | number · default: "0"

The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.

yAxisId · string | number · default: "0"

The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.

legendType · LegendType · default: "line"

The type of icon in legend. If set to ‘none’, no legend item will be rendered.

tooltipType · TooltipType

The type of tooltip item.

data · array

If set, data will be read from this property instead of from the chart data context.

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

Show Example

<Line dataKey="value" shape={CustomizedShapeComponent} />
<Line dataKey="value" shape={renderShapeFunction} />

Animation props

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

animationBegin · number · default: "0"

Specifies when the animation should begin, the unit of this option is ms.

animationDuration · number · default: "1500"

Specifies the duration of animation, the unit of this option is ms.

animationEasing · AnimationTiming · default: "ease"

The type of easing function.

animateNewValues · boolean · default: "true"

Whether to animate when new values appear.

onAnimationStart · function

The customized event handler of animation start.

onAnimationEnd · function

The customized event handler of animation end.

Layout props

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

zIndex · 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

className · string

CSS class name for styling.

Source

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