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

# ZAxis

Virtual axis that controls the size of scatter points. Does not render anything itself.

## Usage

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

<ScatterChart>
  <ZAxis dataKey="z" range={[50, 500]} />
  <Scatter data={data} />
</ScatterChart>
```

## Props

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

<ParamField path="zAxisId" type="string | number" default="0">
  The unique id of z-axis.
</ParamField>

<ParamField path="type" type="'number' | 'category'" default="number">
  The type of axis.

  * `category`: Treats data as distinct values. Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
  * `number`: Treats data as continuous range. Values that are numerically closer are placed closer together on the axis.
</ParamField>

<ParamField path="range" type="[number, number]" default="[64, 64]">
  The range of axis.
  Unlike other axes, the range of z-axis is not informed by chart dimensions.
</ParamField>

<ParamField path="domain" type="AxisDomain">
  Specify the domain of axis when the axis is a number axis.

  If undefined, then the domain is calculated based on the data and dataKeys.

  The length of domain should be 2, and we will validate the values in domain.

  Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
  or a function that accepts a single argument and returns a number.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ZAxis type="number" domain={['dataMin', 'dataMax']} />
    <ZAxis type="number" domain={[0, 'dataMax']} />
    <ZAxis type="number" domain={['auto', 'auto']} />
    <ZAxis type="number" domain={[0, 'dataMax + 1000']} />
    <ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
    <ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
    <ZAxis type="number" domain={([dataMin, dataMax]) => {
      const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax));
      return [-absMax, absMax];
    }} />
    <ZAxis type="number" domain={[0, 100]} allowDataOverflow />
    ```
  </Expandable>
</ParamField>

<ParamField path="scale" type="ScaleType | CustomScaleDefinition" default="auto">
  Scale function determines how data values are mapped to visual values.
  In other words, decided the mapping between data domain and coordinate range.

  If undefined, or 'auto', the scale function is created internally according to the type of axis and data.

  You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ZAxis scale="log" />

    import { scaleLog } from 'd3-scale';
    const scale = scaleLog().base(Math.E);
    <ZAxis scale={scale} />
    ```
  </Expandable>
</ParamField>

<ParamField path="name" type="string">
  The name of axis data.
</ParamField>

<ParamField path="unit" type="string">
  The unit of axis data.
</ParamField>

## Notes

ZAxis is a virtual axis component:

* It has no ticks, grid lines, or labels
* It does not render anything visible on the chart
* It is used only to control the size of Scatter points based on data values
* The `range` prop determines the minimum and maximum size of scatter points in pixels

## Source

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