Scatter

Props

• activeShape(union of 12 variants)optional

  This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).

  FORMAT:

  <Scatter activeShape={{ fill: 'red' }} />

  Examples:

  • Scatter chart with custom active shape
  • Simple Scatter Chart
  • Scatter Chart With Labels

• 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: 400

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

  The type of easing function.

  DEFAULT: "linear"

• childrenReactNodeoptional

  Examples:

  • Scatter Chart With Labels

• classNamestringoptional

• dataReadonlyArray<unknown>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  FORMAT:

  data={[{ name: 'a', value: 12 }]}
  data={[{ label: 'foo', measurements: [5, 12] }]}

  Examples:

  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells
  • Scatter Chart with many points (performance test)

• dataKeyFunction | number | stringoptional

  Decides how to extract the numerical value of this Scatter 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 Scatter.

  Examples:

  • Line Bar Area Composed Chart
  • Scatter And Line Of Best Fit

• hidebooleanoptional

  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.

  DEFAULT: false

• idstringoptional

  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.

• isAnimationActive"auto" | false | trueoptional

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

  DEFAULT: "auto"

  Examples:

  • Scatter Chart with many points (performance test)

• labelFunction | Props | ReactNode | false | trueoptional

  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

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

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

  DEFAULT: "circle"

  FORMAT:

  <Scatter legendType="diamond" />

• line(union of 5 variants)optional

  Renders line connecting individual points. Options:

  • false: no line is drawn.
  • true: a default line is drawn.
  • ReactElement: the option is the custom line element.
  • function: the function will be called to render customized line.
  • object: the option is the props of Curve element.

  Also see the lineType prop which controls how is this line calculated.

  DEFAULT: false

  FORMAT:

  <Scatter line />
  <Scatter line={CustomizedLineComponent} />
  <Scatter line={{ strokeDasharray: '5 5' }} />

  Examples:

  • Scatter chart with joint line
  • Scatter Chart with many points (performance test)

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

  Determines the shape of joint line. Same as type prop on Curve, Line and Area components.

  Has no effect if line prop is not set or is false or if lineType is 'fitting'.

  DEFAULT: "linear"

  Examples:

  • Scatter chart with joint line
  • Joint Line Scatter Chart

• lineType"fitting" | "joint"optional

  Determines calculation method of the line if the line prop is set. Options:

  • 'joint': line will be generated by connecting all the points.
  • 'fitting': line will be generated by fitting algorithm (linear regression).

  Has no effect if line prop is not set or is false.

  DEFAULT: "joint"

  FORMAT:

  <Scatter line lineType="fitting" />

  Examples:

  • Scatter chart with joint 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.

  Examples:

  • Scatter And Line Of Best Fit
  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells
  • Scatter Chart with many points (performance test)

• shape(union of 12 variants)optional

  Determines the shape of individual data points.

  • Can be one of the predefined shapes as a string, which will be passed to Symbols component.
  • If set a ReactElement, the shape of point can be customized.
  • If set a function, the function will be called to render customized shape.

  DEFAULT: "circle"

  FORMAT:

  <Scatter shape={CustomizedShapeComponent} />
  <Scatter shape="diamond" />

  Examples:

  • Scatter chart with custom shapes
  • Three Dim Scatter Chart
  • Scatter Chart With Cells

• tooltipType"none"optional

• xAxisIdnumber | stringoptional

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

  DEFAULT: 0

• yAxisIdnumber | stringoptional

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

  DEFAULT: 0

  Examples:

  • Multiple Y Axes Scatter Chart

• zAxisIdnumber | stringoptional

  The id of ZAxis which is corresponding to the data. Required when there are multiple ZAxes.

  ZAxis does not render directly, has no ticks and no tick line. It is used to control the size of each scatter point.

  DEFAULT: 0

  Examples:

  • Scatter chart with Z axis

• 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: 600

  Examples:

  • Z-Index and layers guide

• onAbortAdaptChildReactEventHandler<P, T>optional

• onAbortCaptureAdaptChildReactEventHandler<P, T>optional

• onAnimationEndAdaptChildAnimationEventHandler<P, T>optional

• onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAuxClickAdaptChildMouseEventHandler<P, T>optional

• onAuxClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onBeforeInputAdaptChildFormEventHandler<P, T>optional

• onBeforeInputCaptureAdaptChildFormEventHandler<P, T>optional

• onBlurAdaptChildFocusEventHandler<P, T>optional

• onBlurCaptureAdaptChildFocusEventHandler<P, T>optional

• onCanPlayAdaptChildReactEventHandler<P, T>optional

• onCanPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughCaptureAdaptChildReactEventHandler<P, T>optional

• onChangeAdaptChildFormEventHandler<P, T>optional

• onChangeCaptureAdaptChildFormEventHandler<P, T>optional

• onClickAdaptChildMouseEventHandler<P, T>optional

• onClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onCompositionEndAdaptChildCompositionEventHandler<P, T>optional

• onCompositionEndCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateCaptureAdaptChildCompositionEventHandler<P, T>optional

• onContextMenuAdaptChildMouseEventHandler<P, T>optional

• onContextMenuCaptureAdaptChildMouseEventHandler<P, T>optional

• onCopyAdaptChildClipboardEventHandler<P, T>optional

• onCopyCaptureAdaptChildClipboardEventHandler<P, T>optional

• onCutAdaptChildClipboardEventHandler<P, T>optional

• onCutCaptureAdaptChildClipboardEventHandler<P, T>optional

• onDoubleClickAdaptChildMouseEventHandler<P, T>optional

• onDoubleClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onDragAdaptChildDragEventHandler<P, T>optional

• onDragCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEndAdaptChildDragEventHandler<P, T>optional

• onDragEndCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEnterAdaptChildDragEventHandler<P, T>optional

• onDragEnterCaptureAdaptChildDragEventHandler<P, T>optional

• onDragExitAdaptChildDragEventHandler<P, T>optional

• onDragExitCaptureAdaptChildDragEventHandler<P, T>optional

• onDragLeaveAdaptChildDragEventHandler<P, T>optional

• onDragLeaveCaptureAdaptChildDragEventHandler<P, T>optional

• onDragOverAdaptChildDragEventHandler<P, T>optional

• onDragOverCaptureAdaptChildDragEventHandler<P, T>optional

• onDragStartAdaptChildDragEventHandler<P, T>optional

• onDragStartCaptureAdaptChildDragEventHandler<P, T>optional

• onDropAdaptChildDragEventHandler<P, T>optional

• onDropCaptureAdaptChildDragEventHandler<P, T>optional

• onDurationChangeAdaptChildReactEventHandler<P, T>optional

• onDurationChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onEmptiedAdaptChildReactEventHandler<P, T>optional

• onEmptiedCaptureAdaptChildReactEventHandler<P, T>optional

• onEncryptedAdaptChildReactEventHandler<P, T>optional

• onEncryptedCaptureAdaptChildReactEventHandler<P, T>optional

• onEndedAdaptChildReactEventHandler<P, T>optional

• onEndedCaptureAdaptChildReactEventHandler<P, T>optional

• onErrorAdaptChildReactEventHandler<P, T>optional

• onErrorCaptureAdaptChildReactEventHandler<P, T>optional

• onFocusAdaptChildFocusEventHandler<P, T>optional

• onFocusCaptureAdaptChildFocusEventHandler<P, T>optional

• onGotPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onGotPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onInputAdaptChildFormEventHandler<P, T>optional

• onInputCaptureAdaptChildFormEventHandler<P, T>optional

• onInvalidAdaptChildFormEventHandler<P, T>optional

• onInvalidCaptureAdaptChildFormEventHandler<P, T>optional

• onKeyDownAdaptChildKeyboardEventHandler<P, T>optional

• onKeyDownCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onLoadAdaptChildReactEventHandler<P, T>optional

• onLoadCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedDataAdaptChildReactEventHandler<P, T>optional

• onLoadedDataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadStartAdaptChildReactEventHandler<P, T>optional

• onLoadStartCaptureAdaptChildReactEventHandler<P, T>optional

• onLostPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onLostPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onMouseDownAdaptChildMouseEventHandler<P, T>optional

• onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseEnterAdaptChildMouseEventHandler<P, T>optional

• onMouseLeaveAdaptChildMouseEventHandler<P, T>optional

• onMouseMoveAdaptChildMouseEventHandler<P, T>optional

• onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOutAdaptChildMouseEventHandler<P, T>optional

• onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOverAdaptChildMouseEventHandler<P, T>optional

• onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseUpAdaptChildMouseEventHandler<P, T>optional

• onMouseUpCaptureAdaptChildMouseEventHandler<P, T>optional

• onPasteAdaptChildClipboardEventHandler<P, T>optional

• onPasteCaptureAdaptChildClipboardEventHandler<P, T>optional

• onPauseAdaptChildReactEventHandler<P, T>optional

• onPauseCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayAdaptChildReactEventHandler<P, T>optional

• onPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayingAdaptChildReactEventHandler<P, T>optional

• onPlayingCaptureAdaptChildReactEventHandler<P, T>optional

• onPointerCancelAdaptChildPointerEventHandler<P, T>optional

• onPointerCancelCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerDownAdaptChildPointerEventHandler<P, T>optional

• onPointerDownCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOutAdaptChildPointerEventHandler<P, T>optional

• onPointerOutCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOverAdaptChildPointerEventHandler<P, T>optional

• onPointerOverCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerUpAdaptChildPointerEventHandler<P, T>optional

• onPointerUpCaptureAdaptChildPointerEventHandler<P, T>optional

• onProgressAdaptChildReactEventHandler<P, T>optional

• onProgressCaptureAdaptChildReactEventHandler<P, T>optional

• onRateChangeAdaptChildReactEventHandler<P, T>optional

• onRateChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onResetAdaptChildFormEventHandler<P, T>optional

• onResetCaptureAdaptChildFormEventHandler<P, T>optional

• onScrollAdaptChildUIEventHandler<P, T>optional

• onScrollCaptureAdaptChildUIEventHandler<P, T>optional

• onSeekedAdaptChildReactEventHandler<P, T>optional

• onSeekedCaptureAdaptChildReactEventHandler<P, T>optional

• onSeekingAdaptChildReactEventHandler<P, T>optional

• onSeekingCaptureAdaptChildReactEventHandler<P, T>optional

• onSelectAdaptChildReactEventHandler<P, T>optional

• onSelectCaptureAdaptChildReactEventHandler<P, T>optional

• onStalledAdaptChildReactEventHandler<P, T>optional

• onStalledCaptureAdaptChildReactEventHandler<P, T>optional

• onSubmitAdaptChildFormEventHandler<P, T>optional

• onSubmitCaptureAdaptChildFormEventHandler<P, T>optional

• onSuspendAdaptChildReactEventHandler<P, T>optional

• onSuspendCaptureAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateCaptureAdaptChildReactEventHandler<P, T>optional

• onTouchCancelAdaptChildTouchEventHandler<P, T>optional

• onTouchCancelCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchEndAdaptChildTouchEventHandler<P, T>optional

• onTouchEndCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchStartAdaptChildTouchEventHandler<P, T>optional

• onTouchStartCaptureAdaptChildTouchEventHandler<P, T>optional

• onTransitionEndAdaptChildTransitionEventHandler<P, T>optional

• onTransitionEndCaptureAdaptChildTransitionEventHandler<P, T>optional

• onVolumeChangeAdaptChildReactEventHandler<P, T>optional

• onVolumeChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onWaitingAdaptChildReactEventHandler<P, T>optional

• onWaitingCaptureAdaptChildReactEventHandler<P, T>optional

• onWheelAdaptChildWheelEventHandler<P, T>optional

• onWheelCaptureAdaptChildWheelEventHandler<P, T>optional