<Recharts />

Scatter

Properties

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

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

  DEFAULT: 'circle'

• 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

• zAxisIdString | Number

  The id of z-axis which is corresponding to the data.

  DEFAULT: 0

• lineBoolean | Object | ReactElement | Function

  If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. If object set, line 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 line element. If set a function, the function will be called to render Customized line.

  DEFAULT: false

  FORMAT:

  <Scatter data={data} line />
  <Scatter data={data} line={{stroke: 'red', strokeWidth: 2}} />
  <Scatter data={data} line={<CustomizedLine />} />

  Examples:

  • A scatter chart with joint line

• shape'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | ReactElement | Function

  If a string set, specified symbol will be used to show scatter item. If ReactElement set, the option can be the custom scatter item element. If set a function, the function will be called to render customized scatter item.

  DEFAULT: 'circle'

  FORMAT:

  <Scatter data={data} shape="cross" />
  <Scatter data={data} shape={<CustomizedShape/>} />
  <Scatter data={data} shape={<renderCustomizedShape/>} />

  Examples:

  • A scatter chart with joint line

• lineType'joint' , 'fitting'

  If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm.

  DEFAULT: 'joint'

• pointsArray

  The coordinates of all the scatters.

  FORMAT:

  [{ cx: 12, cy: 12, r: 4, payload: {x: 12, y: 45, z: 9 }}]

• isAnimationActiveBoolean

  If set false, animation of scatters 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'

• onClickFunctionoptional

  The customized event handler of click on the symbols in this group

• onMouseDownFunctionoptional

  The customized event handler of mousedown on the symbols in this group

• onMouseUpFunctionoptional

  The customized event handler of mouseup on the symbols in this group

• onMouseMoveFunctionoptional

  The customized event handler of mousemove on the symbols in this group

• onMouseOverFunctionoptional

  The customized event handler of mouseover on the symbols in this group

• onMouseOutFunctionoptional

  The customized event handler of mouseout on the symbols in this group

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the symbols in this group

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the symbols in this group

• 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.