Cartesian Grid

A cartesian axis adds in reference axes to the cartesian graphs.

rx.recharts.composed_chart(
    rx.recharts.area(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.bar(
        data_key="amt", bar_size=20, fill="#413ea0"
    ),
    rx.recharts.line(
        data_key="pv", type_="monotone", stroke="#ff7300"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=data,
)

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},
]

API Reference

CartesianGrid

A CartesianGrid component in Recharts.

Prop	Type	Description
`horizontal`	Dict	The horizontal line configuration.
`vertical`	Dict	The vertical line configuration.
`fill`	str	The background of grid.
`fill_opacity`	float	The opacity of the background used to fill the space between grid lines
`stroke_dasharray`	str	The pattern of dashes and gaps used to paint the lines of the grid
`x`	int	The x-coordinate of grid.
`y`	int	The y-coordinate of grid.
`width`	int	The width of grid.
`height`	int	The height of grid.

Event Triggers

See the full list of default event triggers

CartesianAxis

A CartesianAxis component in Recharts.

Prop	Type	Description
`orientation`	Literal	The orientation of axis 'top' \| 'bottom' \| 'left' \| 'right'
`axis_line`	bool	If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
`tick_line`	bool	If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
`tick_size`	int	The length of tick line.
`interval`	Literal	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.
`ticks`	bool	If set false, no ticks will be drawn.
`label`	str	If set a string or a number, default label will be drawn, and the option is content.
`mirror`	bool	If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
`tick_margin`	int	The margin between tick line and tick.
`x`	int	The x-coordinate of grid.
`y`	int	The y-coordinate of grid.
`width`	int	The width of grid.
`height`	int	The height of grid.

Event Triggers

See the full list of default event triggers

← Brush Composedchart →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Cartesian Grid

API Reference

CartesianGrid

CartesianAxis