Axis

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

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.

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:

API Reference

rx.recharts.XAxis

An XAxis component in Recharts.

Prop	Type \| Values	Default
`orientation`	`"top" \| "bottom"`	`"bottom"`
`x_axis_id`	`Union[str, int]`	`0`
`include_hidden`	`bool`	`False`
`angle`	`int`	`0`
`padding`	`Dict[str, int]`	`{"left": 0, "right": 0}`
`data_key`	`Union[str, int]`
`hide`	`bool`	`False`
`width`	`Union[str, int]`
`height`	`Union[str, int]`
`type_`	`"number" \| "category"`
`interval`	`"preserveStart" \| "preserveEnd" \| ...`	`"preserveEnd"`
`allow_decimals`	`bool`	`True`
`allow_data_overflow`	`bool`	`False`
`allow_duplicated_category`	`bool`	`True`
`domain`	`List`	`[0, "auto"]`
`axis_line`	`bool`	`True`
`mirror`	`bool`	`False`
`reversed`	`bool`	`False`
`label`	`Union[str, int, Dict]`
`scale`	`"auto" \| "linear" \| ...`	`"auto"`
`unit`	`Union[str, int]`
`name`	`Union[str, int]`
`ticks`	`List`
`tick`	`bool`
`tick_count`	`int`	`5`
`tick_line`	`bool`	`True`
`tick_size`	`int`	`6`
`min_tick_gap`	`int`	`5`
`stroke`	`Union[str, Color]`	`rx.color("gray", 9)`
`text_anchor`	`"start" \| "middle" \| ...`	`"middle"`

Event Triggers

See the full list of default event triggers

rx.recharts.YAxis

A YAxis component in Recharts.

Prop	Type \| Values	Default
`orientation`	`"left" \| "right"`	`"left"`
`y_axis_id`	`Union[str, int]`	`0`
`padding`	`Dict[str, int]`	`{"top": 0, "bottom": 0}`
`data_key`	`Union[str, int]`
`hide`	`bool`	`False`
`width`	`Union[str, int]`
`height`	`Union[str, int]`
`type_`	`"number" \| "category"`
`interval`	`"preserveStart" \| "preserveEnd" \| ...`	`"preserveEnd"`
`allow_decimals`	`bool`	`True`
`allow_data_overflow`	`bool`	`False`
`allow_duplicated_category`	`bool`	`True`
`domain`	`List`	`[0, "auto"]`
`axis_line`	`bool`	`True`
`mirror`	`bool`	`False`
`reversed`	`bool`	`False`
`label`	`Union[str, int, Dict]`
`scale`	`"auto" \| "linear" \| ...`	`"auto"`
`unit`	`Union[str, int]`
`name`	`Union[str, int]`
`ticks`	`List`
`tick`	`bool`
`tick_count`	`int`	`5`
`tick_line`	`bool`	`True`
`tick_size`	`int`	`6`
`min_tick_gap`	`int`	`5`
`stroke`	`Union[str, Color]`	`rx.color("gray", 9)`
`text_anchor`	`"start" \| "middle" \| ...`	`"middle"`

Event Triggers

See the full list of default event triggers

rx.recharts.ZAxis

A ZAxis component in Recharts.

Prop	Type \| Values	Default
`data_key`	`Union[str, int]`
`z_axis_id`	`Union[str, int]`	`0`
`range`	`List`	`[10, 10]`
`unit`	`Union[str, int]`
`name`	`Union[str, int]`
`scale`	`"auto" \| "linear" \| ...`	`"auto"`

Event Triggers

See the full list of default event triggers

Learn

Components

Recipes

API Reference

Axis

Basic Example

Multiple Axes

Choosing Location of Labels for Axes

API Reference

rx.recharts.XAxis

Event Triggers

rx.recharts.YAxis

Event Triggers

rx.recharts.ZAxis

Event Triggers