API

Charts

General Components

Cartesian Components

Polar Components

Shapes

ZAxis

Virtual axis, does not render anything itself. Has no ticks, grid lines, or labels. Useful for dynamically setting Scatter point size, based on data.

Related Links

Parent Components

ZAxis consumes context provided by these components:

Props

  • dataKeyFunction | number | stringoptional

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

    If undefined, it will reuse the dataKey of graphical items.

    Examples:

  • domainArray<readonly number> | Array<readonly string> | Function | readonly [AxisDomainItem, AxisDomainItem]optional

    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.

    If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks. If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.

    FORMAT: 

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

    Examples:

  • namestringoptional

    The name of data. This option will be used in tooltip. If no value was set to this option, the value of dataKey will be used alternatively.

    Examples:

  • rangeAxisRangeoptional

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

    DEFAULT: [64,64]

    Examples:

  • scale(union of 20 variants)optional

    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.

    DEFAULT: "auto"

    FORMAT: 

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

  • type"category" | "number"optional

    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.

    DEFAULT: "number"

    Examples:

  • unitstringoptional

    The unit of data. This option will be used in tooltip.

    Examples:

  • zAxisIdnumber | stringoptional

    The unique id of z-axis.

    DEFAULT: 0