ZAxis

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

Usage

import { ScatterChart, Scatter, ZAxis } from 'recharts';

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

Props

dataKey · string | number | function

The key or getter function of a group of data.

zAxisId · string | number · default: "0"

The unique id of z-axis.

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.

range · [number, number] · default: "[64, 64]"

The range of axis. Unlike other axes, the range of z-axis is not informed by chart dimensions.

domain · 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.

Show Examples

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

scale · 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.

Show Examples

<ZAxis scale="log" />

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

name · string

The name of axis data.

unit · string

The unit of axis data.

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