React ChartsAxis Domain

The axis domain is the extent of displayed values along the axis.

For a continuous axis, such as the Number or Time axis, the domain is calculated automatically from the minimum and maximum values of the data.

For the Category axis, the domain consists of the discrete values in the data.

Nice Domain Copy Link

By default, a continuous axis is extended to have start and stop values that are visually pleasing, intuitive, and aligned with the tick interval.

To use the exact data bounds without extending to nice round numbers, set the axis.nice property to false:

{
    axes: {
        y: {
            type: 'number',
            nice: false, // Use the exact data bounds as the axis domain
        },
    },
}

The axis.nice configuration is demonstrated in the example below. Use the button to toggle the nice property:

• When nice is set to false, the axis ranges from the minimum data value of 1.87 to the maximum data value of 88.07.
• When nice is set to true, the axis domain is extended to nice round numbers, starting from 0 and stopping at 100.

Domain Min & Max Copy Link

Use the axis.min and axis.max properties to set absolute domain bounds. These are fixed values that will not be extended by the nice algorithm or the data.

{
    axes: {
        y: {
            type: 'number',
            min: -50,
            max: 150,
        },
    },
}

The example below shows how to use the axis.min and axis.max configurations.

Use the buttons to set a specific domain minimum and maximum, or use the reset button to apply the automatically calculated domain.

Preferred Domain Bounds Copy Link

For more flexible domain configuration, use the axis.preferredMin and axis.preferredMax properties. These set preferred bounds that can be extended by the nice algorithm or by data bounds.

{
    axes: {
        y: {
            type: 'number',
            preferredMin: -50,
            preferredMax: 150,
            nice: true, // Domain may extend beyond preferred bounds
        },
    },
}

With preferredMin and preferredMax:

• If the data extends beyond the preferred bounds, the axis domain expands to accommodate the data.
• The nice algorithm can extend the domain to nice round numbers.
• If the data is within the preferred bounds, the axis domain is bounded by the preferred values.

Reversed Domain Copy Link

To invert the display of data items in a chart, you can reverse the domain of an axis by setting the axis.reverse property to true.

{
    axes: {
        y: {
            type: 'number',
            reverse: true,
        },
    },
}

The visual impact of using a reversed axis varies depending on the specific series type.

The example below shows the contrasting data representation in a Bar series when the axis.reverse property is applied.

Use the button to toggle the value of axis.reverse.

Next Up Copy Link

Continue to the next section to learn about Axis Labels.