Line

Properties

• activeDotfalse | true | Function | Partial<ActiveDotProps> | ReactNodeoptional

  The dot is shown when user enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. If object set, active dot 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 active dot element. If set a function, the function will be called to render 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} />

  Examples:

  • A line chart with customized active dot

• animateNewValuesbooleanoptional

  DEFAULT: true

• animationBeginnumberoptional

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

  DEFAULT: 0

• animationDurationnumberoptional

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

  DEFAULT: 1500

• animationEasing"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"optional

  The type of easing function.

  DEFAULT: "ease"

• childrenReactNodeoptional

• classNamestringoptional

• connectNullsbooleanoptional

  Whether to connect the curve across null points.

  DEFAULT: false

  Examples:

  • A lineChart connect nulls and a lineChart disconnect nulls

• dangerouslySetInnerHTMLObjectoptional

• dataArray<unknown>optional

• dataKeystring | number | Functionoptional

  Decides how to extract the value of this Line from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of this Line.

  If undefined, it will reuse the dataKey of YAxis.

• dotfalse | true | Function | Partial<Props> | ReactNodeoptional

  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} />

  Examples:

  • A line chart with customized dot

• hidebooleanoptional

  Hides the whole line when true. Useful when toggling the visibility of the line in a chart, for example through a legend.

  DEFAULT: false

• idstringoptional

  Unique identifier of this component. Used as a HTML attribute id, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.

• isAnimationActivefalse | true | "auto"optional

  If set false, animation of line will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.

  DEFAULT: "auto"

• labelfalse | true | ReactNode | Function | Propsoptional

  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.

  DEFAULT: false

  FORMAT:

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

  Examples:

  • A line chart with customized label

• legendType"none" | "circle" | "cross" | "diamond" | "line" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

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

  DEFAULT: "line"

• namestringoptional

  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.

• pathstringoptional

• shape(union of 5 variants)optional

  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={CustomizedShapeComponent} />
  <Line dataKey="value" shape={renderShapeFunction} />

• strokestringoptional

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

  DEFAULT: "#3182bd"

• strokeDasharraystring | numberoptional

  The pattern of dashes and gaps used to paint the line

  FORMAT:

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

• strokeWidthstring | numberoptional

  The width of the stroke

  DEFAULT: 1

• tooltipType"none"optional

• type"step" | "basis" | "basisClosed" | "basisOpen" | "bumpX" | "bumpY" | "bump" | "linear" | "linearClosed" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "stepBefore" | "stepAfter" | CurveFactoryoptional

  The interpolation type of curve. Allows custom interpolation function.

  DEFAULT: "linear"

  Examples:

  • An AreaChart which has two area with different interpolation.
  • https://github.com/d3/d3-shape#curves

• unitnull | string | numberoptional

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

• xAxisIdstring | numberoptional

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

  DEFAULT: 0

• yAxisIdstring | numberoptional

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

  DEFAULT: 0

• zIndexnumberoptional

  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.

  DEFAULT: 400

  Examples:

  • Z-Index and layers guide

• onAbortReactEventHandler<P, T>optional

• onAbortCaptureReactEventHandler<P, T>optional

• onAnimationEndAnimationEventHandler<P, T>optional

  The customized event handler of animation end

• onAnimationEndCaptureAnimationEventHandler<P, T>optional

• onAnimationIterationAnimationEventHandler<P, T>optional

• onAnimationIterationCaptureAnimationEventHandler<P, T>optional

• onAnimationStartAnimationEventHandler<P, T>optional

  The customized event handler of animation start

• onAnimationStartCaptureAnimationEventHandler<P, T>optional

• onAuxClickRechartsMouseEventHandler<P, T>optional

• onAuxClickCaptureRechartsMouseEventHandler<P, T>optional

• onBeforeInputFormEventHandler<P, T>optional

• onBeforeInputCaptureFormEventHandler<P, T>optional

• onBlurFocusEventHandler<P, T>optional

• onBlurCaptureFocusEventHandler<P, T>optional

• onCanPlayReactEventHandler<P, T>optional

• onCanPlayCaptureReactEventHandler<P, T>optional

• onCanPlayThroughReactEventHandler<P, T>optional

• onCanPlayThroughCaptureReactEventHandler<P, T>optional

• onChangeFormEventHandler<P, T>optional

• onChangeCaptureFormEventHandler<P, T>optional

• onClickCurveMouseEventHandleroptional

  The customized event handler of click on the curve

• onClickCaptureRechartsMouseEventHandler<P, T>optional

• onCompositionEndCompositionEventHandler<P, T>optional

• onCompositionEndCaptureCompositionEventHandler<P, T>optional

• onCompositionStartCompositionEventHandler<P, T>optional

• onCompositionStartCaptureCompositionEventHandler<P, T>optional

• onCompositionUpdateCompositionEventHandler<P, T>optional

• onCompositionUpdateCaptureCompositionEventHandler<P, T>optional

• onContextMenuRechartsMouseEventHandler<P, T>optional

• onContextMenuCaptureRechartsMouseEventHandler<P, T>optional

• onCopyClipboardEventHandler<P, T>optional

• onCopyCaptureClipboardEventHandler<P, T>optional

• onCutClipboardEventHandler<P, T>optional

• onCutCaptureClipboardEventHandler<P, T>optional

• onDoubleClickRechartsMouseEventHandler<P, T>optional

• onDoubleClickCaptureRechartsMouseEventHandler<P, T>optional

• onDragDragEventHandler<P, T>optional

• onDragCaptureDragEventHandler<P, T>optional

• onDragEndDragEventHandler<P, T>optional

• onDragEndCaptureDragEventHandler<P, T>optional

• onDragEnterDragEventHandler<P, T>optional

• onDragEnterCaptureDragEventHandler<P, T>optional

• onDragExitDragEventHandler<P, T>optional

• onDragExitCaptureDragEventHandler<P, T>optional

• onDragLeaveDragEventHandler<P, T>optional

• onDragLeaveCaptureDragEventHandler<P, T>optional

• onDragOverDragEventHandler<P, T>optional

• onDragOverCaptureDragEventHandler<P, T>optional

• onDragStartDragEventHandler<P, T>optional

• onDragStartCaptureDragEventHandler<P, T>optional

• onDropDragEventHandler<P, T>optional

• onDropCaptureDragEventHandler<P, T>optional

• onDurationChangeReactEventHandler<P, T>optional

• onDurationChangeCaptureReactEventHandler<P, T>optional

• onEmptiedReactEventHandler<P, T>optional

• onEmptiedCaptureReactEventHandler<P, T>optional

• onEncryptedReactEventHandler<P, T>optional

• onEncryptedCaptureReactEventHandler<P, T>optional

• onEndedReactEventHandler<P, T>optional

• onEndedCaptureReactEventHandler<P, T>optional

• onErrorReactEventHandler<P, T>optional

• onErrorCaptureReactEventHandler<P, T>optional

• onFocusFocusEventHandler<P, T>optional

• onFocusCaptureFocusEventHandler<P, T>optional

• onGotPointerCapturePointerEventHandler<P, T>optional

• onGotPointerCaptureCapturePointerEventHandler<P, T>optional

• onInputFormEventHandler<P, T>optional

• onInputCaptureFormEventHandler<P, T>optional

• onInvalidFormEventHandler<P, T>optional

• onInvalidCaptureFormEventHandler<P, T>optional

• onKeyDownKeyboardEventHandler<P, T>optional

• onKeyDownCaptureKeyboardEventHandler<P, T>optional

• onKeyPressKeyboardEventHandler<P, T>optional

• onKeyPressCaptureKeyboardEventHandler<P, T>optional

• onKeyUpKeyboardEventHandler<P, T>optional

• onKeyUpCaptureKeyboardEventHandler<P, T>optional

• onLoadReactEventHandler<P, T>optional

• onLoadCaptureReactEventHandler<P, T>optional

• onLoadedDataReactEventHandler<P, T>optional

• onLoadedDataCaptureReactEventHandler<P, T>optional

• onLoadedMetadataReactEventHandler<P, T>optional

• onLoadedMetadataCaptureReactEventHandler<P, T>optional

• onLoadStartReactEventHandler<P, T>optional

• onLoadStartCaptureReactEventHandler<P, T>optional

• onLostPointerCapturePointerEventHandler<P, T>optional

• onLostPointerCaptureCapturePointerEventHandler<P, T>optional

• onMouseDownCurveMouseEventHandleroptional

  The customized event handler of mousedown on the curve

• onMouseDownCaptureRechartsMouseEventHandler<P, T>optional

• onMouseEnterCurveMouseEventHandleroptional

  The customized event handler of mouseenter on the curve

• onMouseLeaveCurveMouseEventHandleroptional

  The customized event handler of mouseleave on the curve

• onMouseMoveCurveMouseEventHandleroptional

  The customized event handler of mousemove on the curve

• onMouseMoveCaptureRechartsMouseEventHandler<P, T>optional

• onMouseOutCurveMouseEventHandleroptional

  The customized event handler of mouseout on the curve

• onMouseOutCaptureRechartsMouseEventHandler<P, T>optional

• onMouseOverCurveMouseEventHandleroptional

  The customized event handler of mouseover on the curve

• onMouseOverCaptureRechartsMouseEventHandler<P, T>optional

• onMouseUpCurveMouseEventHandleroptional

  The customized event handler of mouseup on the curve

• onMouseUpCaptureRechartsMouseEventHandler<P, T>optional

• onPasteClipboardEventHandler<P, T>optional

• onPasteCaptureClipboardEventHandler<P, T>optional

• onPauseReactEventHandler<P, T>optional

• onPauseCaptureReactEventHandler<P, T>optional

• onPlayReactEventHandler<P, T>optional

• onPlayCaptureReactEventHandler<P, T>optional

• onPlayingReactEventHandler<P, T>optional

• onPlayingCaptureReactEventHandler<P, T>optional

• onPointerCancelPointerEventHandler<P, T>optional

• onPointerCancelCapturePointerEventHandler<P, T>optional

• onPointerDownPointerEventHandler<P, T>optional

• onPointerDownCapturePointerEventHandler<P, T>optional

• onPointerEnterPointerEventHandler<P, T>optional

• onPointerEnterCapturePointerEventHandler<P, T>optional

• onPointerLeavePointerEventHandler<P, T>optional

• onPointerLeaveCapturePointerEventHandler<P, T>optional

• onPointerMovePointerEventHandler<P, T>optional

• onPointerMoveCapturePointerEventHandler<P, T>optional

• onPointerOutPointerEventHandler<P, T>optional

• onPointerOutCapturePointerEventHandler<P, T>optional

• onPointerOverPointerEventHandler<P, T>optional

• onPointerOverCapturePointerEventHandler<P, T>optional

• onPointerUpPointerEventHandler<P, T>optional

• onPointerUpCapturePointerEventHandler<P, T>optional

• onProgressReactEventHandler<P, T>optional

• onProgressCaptureReactEventHandler<P, T>optional

• onRateChangeReactEventHandler<P, T>optional

• onRateChangeCaptureReactEventHandler<P, T>optional

• onResetFormEventHandler<P, T>optional

• onResetCaptureFormEventHandler<P, T>optional

• onScrollUIEventHandler<P, T>optional

• onScrollCaptureUIEventHandler<P, T>optional

• onSeekedReactEventHandler<P, T>optional

• onSeekedCaptureReactEventHandler<P, T>optional

• onSeekingReactEventHandler<P, T>optional

• onSeekingCaptureReactEventHandler<P, T>optional

• onSelectReactEventHandler<P, T>optional

• onSelectCaptureReactEventHandler<P, T>optional

• onStalledReactEventHandler<P, T>optional

• onStalledCaptureReactEventHandler<P, T>optional

• onSubmitFormEventHandler<P, T>optional

• onSubmitCaptureFormEventHandler<P, T>optional

• onSuspendReactEventHandler<P, T>optional

• onSuspendCaptureReactEventHandler<P, T>optional

• onTimeUpdateReactEventHandler<P, T>optional

• onTimeUpdateCaptureReactEventHandler<P, T>optional

• onTouchCancelTouchEventHandler<P, T>optional

• onTouchCancelCaptureTouchEventHandler<P, T>optional

• onTouchEndTouchEventHandler<P, T>optional

• onTouchEndCaptureTouchEventHandler<P, T>optional

• onTouchMoveTouchEventHandler<P, T>optional

• onTouchMoveCaptureTouchEventHandler<P, T>optional

• onTouchStartTouchEventHandler<P, T>optional

• onTouchStartCaptureTouchEventHandler<P, T>optional

• onTransitionEndTransitionEventHandler<P, T>optional

• onTransitionEndCaptureTransitionEventHandler<P, T>optional

• onVolumeChangeReactEventHandler<P, T>optional

• onVolumeChangeCaptureReactEventHandler<P, T>optional

• onWaitingReactEventHandler<P, T>optional

• onWaitingCaptureReactEventHandler<P, T>optional

• onWheelWheelEventHandler<P, T>optional

• onWheelCaptureWheelEventHandler<P, T>optional