> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Scatter

Renders a set of symbols representing individual data points in a Scatter chart.

## Usage

```tsx theme={null}
import { ScatterChart, Scatter, XAxis, YAxis } from 'recharts';

<ScatterChart width={600} height={300}>
  <XAxis dataKey="x" />
  <YAxis dataKey="y" />
  <Scatter data={data} fill="#8884d8" />
</ScatterChart>
```

## Props

<ParamField path="data" type="array">
  The source data which each element is an object.
</ParamField>

<ParamField path="dataKey" type="string | number | function">
  The key or getter function of a group of data.
</ParamField>

<ParamField path="fill" type="string">
  The fill color of symbols.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of symbols.
</ParamField>

<ParamField path="strokeWidth" type="number | string">
  The width of the stroke.
</ParamField>

<ParamField path="shape" type="string | ReactElement | function" default="circle">
  Determines the shape of individual data points.

  * Can be one of the predefined shapes as a string: 'circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye'
  * If set a ReactElement, the shape of point can be customized
  * If set a function, the function will be called to render customized shape

  <Expandable title="Example">
    ```tsx theme={null}
    <Scatter shape={CustomizedShapeComponent} />
    <Scatter shape="diamond" />
    ```
  </Expandable>
</ParamField>

<ParamField path="activeShape" type="string | ReactElement | function">
  This component is rendered when this graphical item is activated
  (could be by mouse hover, touch, keyboard, programmatically).

  <Expandable title="Example">
    ```tsx theme={null}
    <Scatter activeShape={{ fill: 'red' }} />
    ```
  </Expandable>
</ParamField>

<ParamField path="line" type="boolean | object | ReactElement | function" default="false">
  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.

  <Expandable title="Example">
    ```tsx theme={null}
    <Scatter line />
    <Scatter line={CustomizedLineComponent} />
    <Scatter line={{ strokeDasharray: '5 5' }} />
    ```
  </Expandable>
</ParamField>

<ParamField path="lineType" type="'fitting' | 'joint'" default="joint">
  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.

  <Expandable title="Example">
    ```tsx theme={null}
    <Scatter line lineType="fitting" />
    ```
  </Expandable>
</ParamField>

<ParamField path="lineJointType" type="CurveType" default="linear">
  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'.
</ParamField>

<ParamField path="label" type="boolean | object | ReactElement | function" default="false">
  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
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  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.
</ParamField>

<ParamField path="name" type="string">
  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.
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
</ParamField>

<ParamField path="zAxisId" type="string | number" default="0">
  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.
</ParamField>

<ParamField path="legendType" type="LegendType" default="circle">
  The type of icon in legend.
  If set to 'none', no legend item will be rendered.

  <Expandable title="Example">
    ```tsx theme={null}
    <Scatter legendType="diamond" />
    ```
  </Expandable>
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  The type of tooltip item.
</ParamField>

### Animation props

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If set false, animation of Scatter points will be disabled.
  If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="400">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="AnimationTiming" default="linear">
  The type of easing function.
</ParamField>

### Layout props

<ParamField path="id" type="string">
  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.
</ParamField>

<ParamField path="zIndex" type="number" default="600">
  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.

  @since 3.4
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/Scatter.tsx`