Line

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

• strokeStringoptional

  The color of the stroke

  DEFAULT: #3182bd

  FORMAT:

  <Line dataKey="value" stroke="#ff0ff0" />

• strokeWidthString | Numberoptional

  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

• strokeDasharrayString

  The pattern of dashes and gaps used to paint the line

  FORMAT:

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