Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

General

/

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.

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

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,
    )

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:

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_postion,
                    "offset": AxisState.x_axis_offset,
                },
            ),
            rx.recharts.y_axis(
                data_key="uv",
                label={
                    "value": "Views",
                    "angle": -90,
                    "position": AxisState.y_axis_postion,
                    "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_postion,
                on_change=AxisState.set_x_axis_postion,
            ),
            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_postion,
                on_change=AxisState.set_y_axis_postion,
            ),
            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%",
    )

An XAxis component in Recharts.

PropTypeDescriptionValues
x_axis_idUnion

The id of x-axis which is corresponding to the data.

include_hiddenbool

Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden

data_keyUnion

The key of a group of data which should be unique in an area chart.

hidebool

If set true, the axis do not display in the chart.

widthUnion

The width of axis which is usually calculated internally.

heightUnion

The height of axis, which can be setted by user.

orientationLiteral

The orientation of axis 'top' | 'bottom'

type_Literal

The type of axis 'number' | 'category'

allow_decimalsbool

Allow the ticks of XAxis to be decimals or not.

allow_data_overflowbool

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_categorybool

Allow the axis has duplicated categorys or not when the type of axis is "category".

axis_linebool

If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.

mirrorbool

If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.

reversedbool

Reverse the ticks or not.

labelUnion

The label of axis, which appears next to the axis.

scaleLiteral

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' | Function

unitUnion

The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.

nameUnion

The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.

ticksList

Set the values of axis ticks manually.

tickbool

If set false, no ticks will be drawn.

tick_countint

The count of axis ticks.

tick_linebool

If set false, no axis tick lines will be drawn.

tick_sizeint

The length of tick line.

min_tick_gapint

The minimum gap between two adjacent labels

strokeUnion

The stroke color of axis

text_anchorstr

The text anchor of axis

Event Triggers

See the full list of default event triggers

A YAxis component in Recharts.

PropTypeDescriptionValues
orientationLiteral

The orientation of axis 'left' | 'right'

data_keyUnion

The key of data displayed in the axis.

y_axis_idUnion

The id of y-axis which is corresponding to the data.

data_keyUnion

The key of a group of data which should be unique in an area chart.

hidebool

If set true, the axis do not display in the chart.

widthUnion

The width of axis which is usually calculated internally.

heightUnion

The height of axis, which can be setted by user.

orientationLiteral

The orientation of axis 'top' | 'bottom'

type_Literal

The type of axis 'number' | 'category'

allow_decimalsbool

Allow the ticks of XAxis to be decimals or not.

allow_data_overflowbool

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_categorybool

Allow the axis has duplicated categorys or not when the type of axis is "category".

axis_linebool

If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.

mirrorbool

If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.

reversedbool

Reverse the ticks or not.

labelUnion

The label of axis, which appears next to the axis.

scaleLiteral

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' | Function

unitUnion

The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.

nameUnion

The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.

ticksList

Set the values of axis ticks manually.

tickbool

If set false, no ticks will be drawn.

tick_countint

The count of axis ticks.

tick_linebool

If set false, no axis tick lines will be drawn.

tick_sizeint

The length of tick line.

min_tick_gapint

The minimum gap between two adjacent labels

strokeUnion

The stroke color of axis

text_anchorstr

The text anchor of axis

A ZAxis component in Recharts.

PropTypeDescriptionValues
data_keyUnion

The key of data displayed in the axis.

rangeList

The range of axis.

unitUnion

The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.

nameUnion

The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.

scaleLiteral

If 'auto' set, the scale function is decided by the type of chart, and the props type.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting