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
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.
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.
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%",
)API Reference
rx.recharts.XAxis
An XAxis component in Recharts.
Event Triggers
See the full list of default event triggersrx.recharts.YAxis
A YAxis component in Recharts.
Event Triggers
See the full list of default event triggersrx.recharts.ZAxis
A ZAxis component in Recharts.