Recharts

Line

Parent Components

Child Components

<LabelList />
<ErrorBar />

Properties

type'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function
The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
DEFAULT: 'linear'
Examples:
- d3-shape interpolation
- An AreaChart which has two area with different interpolation.
dataKeyString | Number | Function
The key or getter of a group of data which should be unique in a LineChart.
xAxisIdString | Number
The id of x-axis which is corresponding to the data.
DEFAULT: 0
yAxisIdString | Number
The id of y-axis which is corresponding to the data.
DEFAULT: 0
legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional
The type of icon in legend. If set to 'none', no legend item will be rendered.
DEFAULT: 'line'
shapeReactElement | Functionoptional
If set a ReactElement, the shape of line can be customized. If set a function, the function will be called to render customized shape.
FORMAT:
```
<Line dataKey="value" shape={<CustomizedShape/>}/>
<Line dataKey="value" shape={renderShape}/>
```
dotBoolean | Object | ReactElement | Function
If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. If object set, dots will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom dot element.If set a function, the function will be called to render customized dot.
DEFAULT: true
FORMAT:
```
<Line dataKey="value" dot={false} />
<Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
<Line dataKey="value" dot={<CustomizedDot />} />
<Line dataKey="value" dot={renderDot} />
```
Examples:
- A line chart with customized dot
activeDotBoolean | Object | ReactElement | Function
The active dot is shown when a user enters a line chart and this chart has tooltip. If set to false, no active dot will be drawn. If set to true, active dot will be drawn with the props calculated internally. If passed an object, active dot will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object. If passed a ReactElement, the option can be the custom active dot element. If passed a function, the function will be called to render a customized active dot.
DEFAULT: true
FORMAT:
```
<Line dataKey="value" activeDot={false} />
<Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Line dataKey="value" activeDot={<CustomizedActiveDot />} />
<Line dataKey="value" activeDot={renderDot} />
```
Examples:
- A simple line chart
labelBoolean | Object | ReactElement | Function
If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.
DEFAULT: false
FORMAT:
```
<Line dataKey="value" label />
<Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Line dataKey="value" label={<CustomizedLabel />} />
<Line dataKey="value" label={renderLabel} />
```
Examples:
- A line chart with customized label
hideBooleanoptional
Hides the line when true, useful when toggling visibility state via legend
DEFAULT: false
pointsArray
The coordinates of all the points in the line, usually calculated internally.
FORMAT:
```
[{x: 12, y: 12, value: 240}]
```
strokeStringoptional
The color of the stroke
DEFAULT: #3182bd
FORMAT:
```
<Line dataKey="value" stroke="#ff0ff0" />
```

The width of the stroke

DEFAULT: 1

FORMAT:

<Line dataKey="value" strokeWidth={1} />
<Line dataKey="value" strokeWidth={3} />

layout'horizontal' | 'vertical'optional
The layout of line, usually inherited from parent.
connectNullsBoolean
Whether to connect a graph line across null points.
DEFAULT: false
Examples:
- A lineChart connect nulls and a lineChart disconnect nulls
unitString | Numberoptional
The unit of data. This option will be used in tooltip.
nameString | Numberoptional
The name of data. This option will be used in tooltip and legend to represent a line. If no value was set to this option, the value of dataKey will be used alternatively.
isAnimationActiveBoolean
If set false, animation of line will be disabled.
DEFAULT: true in CSR, and false in SSR
animationBeginNumber
Specifies when the animation should begin, the unit of this option is ms.
DEFAULT: 0
animationDurationNumber
Specifies the duration of animation, the unit of this option is ms.
DEFAULT: 1500
animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
The type of easing function.
DEFAULT: 'ease'
idStringoptional
The unique id of this component, which will be used to generate unique clip path id internally. This props is suggested to be set in SSR.
onAnimationStartFunctionoptional
The customized event handler of animation start
onAnimationEndFunctionoptional
The customized event handler of animation end
onClickFunctionoptional
The customized event handler of click on the area in this group
Examples:
- A BarChart with customized click event handler
onMouseDownFunctionoptional
The customized event handler of mousedown on the area in this group
onMouseUpFunctionoptional
The customized event handler of mouseup on the area in this group
onMouseMoveFunctionoptional
The customized event handler of mousemove on the area in this group
onMouseOverFunctionoptional
The customized event handler of mouseover on the area in this group
onMouseOutFunctionoptional
The customized event handler of mouseout on the area in this group
onMouseEnterFunctionoptional
The customized event handler of mouseenter on the area in this group
onMouseLeaveFunctionoptional
The customized event handler of mouseleave on the area in this group

The pattern of dashes and gaps used to paint the line

FORMAT:

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