> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.recharts.XAxis
  - rx.recharts.YAxis
  - rx.recharts.ZAxis
---

```python exec
import reflex as rx
```

# 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

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def axis_simple():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(
            data_key="name",
            label={"value": "Pages", "position": "bottom"},
        ),
        rx.recharts.y_axis(
            data_key="uv",
            label={"value": "Views", "angle": -90, "position": "left"},
        ),
        data=data,
        width="100%",
        height=300,
        margin={
            "bottom": 40,
            "left": 40,
            "right": 40,
        },
    )
```

## 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.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def multi_axis():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
            y_axis_id="left",
        ),
        rx.recharts.area(
            data_key="pv",
            y_axis_id="right",
            type_="monotone",
            stroke="#82ca9d",
            fill="#82ca9d",
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
        rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
        rx.recharts.graphing_tooltip(),
        rx.recharts.legend(),
        data=data,
        width="100%",
        height=300,
    )
```

## 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.

```python demo graphing
class AxisState(rx.State):
    label_positions: list[str] = [
        "center",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomRight",
        "insideBottomLeft",
        "insideTop",
        "insideBottom",
        "insideLeft",
        "insideRight",
        "outside",
        "top",
        "bottom",
        "left",
        "right",
    ]

    label_offsets: list[str] = ["-30", "-20", "-10", "0", "10", "20", "30"]

    x_axis_position: str = "bottom"

    x_axis_offset: int

    y_axis_position: str = "left"

    y_axis_offset: int

    @rx.event
    def set_y_axis_position(self, position: str):
        self.y_axis_position = position

    @rx.event
    def set_x_axis_position(self, position: str):
        self.x_axis_position = position

    @rx.event
    def set_x_axis_offset(self, offset: str):
        self.x_axis_offset = int(offset)

    @rx.event
    def set_y_axis_offset(self, offset: str):
        self.y_axis_offset = int(offset)


data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def axis_labels():
    return rx.vstack(
        rx.recharts.area_chart(
            rx.recharts.area(
                data_key="uv",
                stroke=rx.color("accent", 9),
                fill=rx.color("accent", 8),
            ),
            rx.recharts.x_axis(
                data_key="name",
                label={
                    "value": "Pages",
                    "position": AxisState.x_axis_position,
                    "offset": AxisState.x_axis_offset,
                },
            ),
            rx.recharts.y_axis(
                data_key="uv",
                label={
                    "value": "Views",
                    "angle": -90,
                    "position": AxisState.y_axis_position,
                    "offset": AxisState.y_axis_offset,
                },
            ),
            data=data,
            width="100%",
            height=300,
            margin={
                "bottom": 40,
                "left": 40,
                "right": 40,
            },
        ),
        rx.hstack(
            rx.text("X Label Position: "),
            rx.select(
                AxisState.label_positions,
                value=AxisState.x_axis_position,
                on_change=AxisState.set_x_axis_position,
            ),
            rx.text("X Label Offset: "),
            rx.select(
                AxisState.label_offsets,
                value=AxisState.x_axis_offset.to_string(),
                on_change=AxisState.set_x_axis_offset,
            ),
            rx.text("Y Label Position: "),
            rx.select(
                AxisState.label_positions,
                value=AxisState.y_axis_position,
                on_change=AxisState.set_y_axis_position,
            ),
            rx.text("Y Label Offset: "),
            rx.select(
                AxisState.label_offsets,
                value=AxisState.y_axis_offset.to_string(),
                on_change=AxisState.set_y_axis_offset,
            ),
        ),
        width="100%",
    )
```

## API Reference

### rx.recharts.XAxis

An XAxis component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data_key` | str, int | - | The key of data displayed in the axis. |
| `hide` | bool | `False` | If set true, the axis do not display in the chart. |
| `width` | str, int | - | The width of axis which is usually calculated internally. |
| `height` | str, int | - | The height of axis, which can be set by user. |
| `type_` | Literal["auto", "number", "category"] | - | The type of axis 'number', 'category'. |
| `interval` | Literal["preserveStart", "preserveEnd", "preserveStartEnd", "equidistantPreserveStart"], int | `"preserveEnd"` | 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 | `True` | Allow the ticks of Axis to be decimals or not. |
| `allow_data_overflow` | bool | `False` | 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 | `True` | Allow the axis has duplicated categorys or not when the type of axis is "category". |
| `domain` | Sequence | `[0, "auto"]` | The range of the axis. Work best in conjunction with allow_data_overflow. |
| `axis_line` | bool | `True` | If set false, no axis line will be drawn. |
| `mirror` | bool | `False` | If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. |
| `reversed` | bool | `False` | Reverse the ticks or not. |
| `label` | str, int, dict[str, Any] | - | The label of axis, which appears next to the axis. |
| `scale` | Literal["auto", "linear", "pow", "sqrt", "log", "identity", "time", "band", "point", "ordinal", "quantile", "quantize", "utc", "sequential", "threshold"] | `"auto"` | 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` | str, int | - | The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart. |
| `name` | str, int | - | The name of data displayed in the axis. This option will be used to represent an index in a scatter chart. |
| `ticks` | Sequence[str, int] | - | Set the values of axis ticks manually. |
| `tick` | bool, dict | - | If set false, no ticks will be drawn. |
| `tick_count` | int | `5` | The count of axis ticks. Not used if 'type' is 'category'. |
| `tick_line` | bool | `True` | If set false, no axis tick lines will be drawn. |
| `tick_size` | int | `6` | The length of tick line. |
| `min_tick_gap` | int | `5` | The minimum gap between two adjacent labels. |
| `stroke` | str, Color | `rx.color("gray", 9)` | The stroke color of axis. |
| `text_anchor` | Literal["start", "middle", "end"] | `"middle"` | The text anchor of axis. |
| `orientation` | Literal["top", "bottom"] | `"bottom"` | The orientation of axis 'top', 'bottom'. |
| `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. |
| `include_hidden` | bool | `False` | Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden. |
| `angle` | int | `0` | The angle of axis ticks. |
| `padding` | dict[str, int] | `{"left": 0, "right": 0}` | Specify the padding of x-axis. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.recharts.YAxis

A YAxis component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data_key` | str, int | - | The key of data displayed in the axis. |
| `hide` | bool | `False` | If set true, the axis do not display in the chart. |
| `width` | str, int | - | The width of axis which is usually calculated internally. |
| `height` | str, int | - | The height of axis, which can be set by user. |
| `type_` | Literal["auto", "number", "category"] | - | The type of axis 'number', 'category'. |
| `interval` | Literal["preserveStart", "preserveEnd", "preserveStartEnd", "equidistantPreserveStart"], int | `"preserveEnd"` | 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 | `True` | Allow the ticks of Axis to be decimals or not. |
| `allow_data_overflow` | bool | `False` | 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 | `True` | Allow the axis has duplicated categorys or not when the type of axis is "category". |
| `domain` | Sequence | `[0, "auto"]` | The range of the axis. Work best in conjunction with allow_data_overflow. |
| `axis_line` | bool | `True` | If set false, no axis line will be drawn. |
| `mirror` | bool | `False` | If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. |
| `reversed` | bool | `False` | Reverse the ticks or not. |
| `label` | str, int, dict[str, Any] | - | The label of axis, which appears next to the axis. |
| `scale` | Literal["auto", "linear", "pow", "sqrt", "log", "identity", "time", "band", "point", "ordinal", "quantile", "quantize", "utc", "sequential", "threshold"] | `"auto"` | 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` | str, int | - | The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart. |
| `name` | str, int | - | The name of data displayed in the axis. This option will be used to represent an index in a scatter chart. |
| `ticks` | Sequence[str, int] | - | Set the values of axis ticks manually. |
| `tick` | bool, dict | - | If set false, no ticks will be drawn. |
| `tick_count` | int | `5` | The count of axis ticks. Not used if 'type' is 'category'. |
| `tick_line` | bool | `True` | If set false, no axis tick lines will be drawn. |
| `tick_size` | int | `6` | The length of tick line. |
| `min_tick_gap` | int | `5` | The minimum gap between two adjacent labels. |
| `stroke` | str, Color | `rx.color("gray", 9)` | The stroke color of axis. |
| `text_anchor` | Literal["start", "middle", "end"] | `"middle"` | The text anchor of axis. |
| `orientation` | Literal["left", "right"] | `"left"` | The orientation of axis 'left', 'right'. |
| `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. |
| `padding` | dict[str, int] | `{"top": 0, "bottom": 0}` | Specify the padding of y-axis. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.recharts.ZAxis

A ZAxis component in Recharts.

#### Props

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

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/