The Axis component in Recharts is a powerful tool for customizing and configuring the axes of your charts. It provides a wide range of props that allow you to control the appearance, behavior, and formatting of the axis. Whether you're working with an AreaChart, LineChart, or any other chart type, the Axis component enables you to create precise and informative visualizations.

Basic Example

Expand

Multiple Axes

Multiple axes can be used for displaying different data series with varying scales or units on the same chart. This allows for a more comprehensive comparison and analysis of the data.

Expand

Choosing Location of Labels for Axes

The axes label can take several positions. The example below allows you to try out different locations for the x and y axis labels.

X Label Position:

X Label Offset:

Y Label Position:

Y Label Offset:

Expand

API Reference

rx.recharts.XAxis

An XAxis component in Recharts.

Props

Prop	Type	Description
`data_key`	`Union[int, str]`	The key of data displayed in the axis.
`hide`	`bool`	If set true, the axis do not display in the chart.
`width`	`Union[int, str]`	The width of axis which is usually calculated internally.
`height`	`Union[int, str]`	The height of axis, which can be set by user.
`type_`	`"auto""number""category"`	The type of axis 'number' \| 'category'.
`interval`	`"preserveStart""preserveEnd""preserveStartEnd""equidistantPreserveStart"`	If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
`allow_decimals`	`bool`	Allow the ticks of Axis to be decimals or not.
`allow_data_overflow`	`bool`	When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
`allow_duplicated_category`	`bool`	Allow the axis has duplicated categorys or not when the type of axis is "category".
`domain`	`Sequence`	The range of the axis. Work best in conjunction with allow_data_overflow.
`axis_line`	`bool`	If set false, no axis line will be drawn.
`mirror`	`bool`	If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
`reversed`	`bool`	Reverse the ticks or not.
`label`	`Union[str, int, dict]`	The label of axis, which appears next to the axis.
`scale`	`"auto""linear""pow""sqrt""log""identity""time""band""point""ordinal""quantile""quantize""utc""sequential""threshold"`	If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' \| 'linear' \| 'pow' \| 'sqrt' \| 'log' \| 'identity' \| 'time' \| 'band' \| 'point' \| 'ordinal' \| 'quantile' \| 'quantize' \| 'utc' \| 'sequential' \| 'threshold'.
`unit`	`Union[int, str]`	The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
`name`	`Union[int, str]`	The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
`ticks`	`Sequence`	Set the values of axis ticks manually.
`tick`	`Union[bool, dict]`	If set false, no ticks will be drawn.
`tick_count`	`int`	The count of axis ticks. Not used if 'type' is 'category'.
`tick_line`	`bool`	If set false, no axis tick lines will be drawn.
`tick_size`	`int`	The length of tick line.
`min_tick_gap`	`int`	The minimum gap between two adjacent labels.
`stroke`	`Union[str, Color]`	The stroke color of axis.
`text_anchor`	`"start""middle""end"`	The text anchor of axis.
`orientation`	`"top""bottom"`	The orientation of axis 'top' \| 'bottom'.
`x_axis_id`	`Union[int, str]`	The id of x-axis which is corresponding to the data.
`include_hidden`	`bool`	Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden.
`angle`	`int`	The angle of axis ticks.
`padding`	`Dict[str, int]`	Specify the padding of x-axis.

Event Triggers

See the full list of default event triggers

rx.recharts.YAxis

A YAxis component in Recharts.

Props

Prop	Type	Description
`data_key`	`Union[int, str]`	The key of data displayed in the axis.
`hide`	`bool`	If set true, the axis do not display in the chart.
`width`	`Union[int, str]`	The width of axis which is usually calculated internally.
`height`	`Union[int, str]`	The height of axis, which can be set by user.
`type_`	`"auto""number""category"`	The type of axis 'number' \| 'category'.
`interval`	`"preserveStart""preserveEnd""preserveStartEnd""equidistantPreserveStart"`	If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
`allow_decimals`	`bool`	Allow the ticks of Axis to be decimals or not.
`allow_data_overflow`	`bool`	When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
`allow_duplicated_category`	`bool`	Allow the axis has duplicated categorys or not when the type of axis is "category".
`domain`	`Sequence`	The range of the axis. Work best in conjunction with allow_data_overflow.
`axis_line`	`bool`	If set false, no axis line will be drawn.
`mirror`	`bool`	If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
`reversed`	`bool`	Reverse the ticks or not.
`label`	`Union[str, int, dict]`	The label of axis, which appears next to the axis.
`scale`	`"auto""linear""pow""sqrt""log""identity""time""band""point""ordinal""quantile""quantize""utc""sequential""threshold"`	If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' \| 'linear' \| 'pow' \| 'sqrt' \| 'log' \| 'identity' \| 'time' \| 'band' \| 'point' \| 'ordinal' \| 'quantile' \| 'quantize' \| 'utc' \| 'sequential' \| 'threshold'.
`unit`	`Union[int, str]`	The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
`name`	`Union[int, str]`	The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
`ticks`	`Sequence`	Set the values of axis ticks manually.
`tick`	`Union[bool, dict]`	If set false, no ticks will be drawn.
`tick_count`	`int`	The count of axis ticks. Not used if 'type' is 'category'.
`tick_line`	`bool`	If set false, no axis tick lines will be drawn.
`tick_size`	`int`	The length of tick line.
`min_tick_gap`	`int`	The minimum gap between two adjacent labels.
`stroke`	`Union[str, Color]`	The stroke color of axis.
`text_anchor`	`"start""middle""end"`	The text anchor of axis.
`orientation`	`"left""right"`	The orientation of axis 'left' \| 'right'.
`y_axis_id`	`Union[int, str]`	The id of y-axis which is corresponding to the data.
`padding`	`Dict[str, int]`	Specify the padding of y-axis.

Event Triggers

See the full list of default event triggers

rx.recharts.ZAxis

A ZAxis component in Recharts.

Props

Prop	Type	Description
`data_key`	`Union[int, str]`	The key of data displayed in the axis.
`z_axis_id`	`Union[int, str]`	The unique id of z-axis.
`range`	`Sequence`	The range of axis.
`unit`	`Union[int, str]`	The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
`name`	`Union[int, str]`	The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
`scale`	`"auto""linear""pow""sqrt""log""identity""time""band""point""ordinal""quantile""quantize""utc""sequential""threshold"`	If 'auto' set, the scale function is decided by the type of chart, and the props type.

Event Triggers

See the full list of default event triggers

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

Custom Components

Axis

Basic Example

Multiple Axes

Choosing Location of Labels for Axes

API Reference

rx.recharts.XAxis

Props

Event Triggers

rx.recharts.YAxis

Props

Event Triggers

rx.recharts.ZAxis

Props

Event Triggers