/

Tooltips are the little boxes that pop up when you hover over something. Tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.

Custom Styling

The rx.recharts.graphing_tooltip component allows for customization of the tooltip's style, position, and layout. separator sets the separator between the data key and value. view_box prop defines the dimensions of the chart's viewbox while allow_escape_view_box determines whether the tooltip can extend beyond the viewBox horizontally (x) or vertically (y). wrapper_style prop allows you to style the outer container or wrapper of the tooltip. content_style prop allows you to style the inner content area of the tooltip. is_animation_active prop determines if the tooltip animation is active or not.

API Reference

rx.recharts.GraphingTooltip

A Tooltip component in Recharts.

Prop	Type \| Values	Default
`separator`	`str`	`":"`
`offset`	`int`	`10`
`filter_null`	`bool`	`True`
`cursor`	`Union[dict, bool]`	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`
`view_box`	`Dict[str, Any]`
`item_style`	`Dict[str, Any]`	`{"color": rx.color("gray", 12)}`
`wrapper_style`	`Dict[str, Any]`	`{}`
`content_style`	`Dict[str, Any]`	`{"background": rx.color("gray", 1), "borderColor": rx.color("gray", 4), "borderRadius": "8px"}`
`label_style`	`Dict[str, Any]`	`{"color": rx.color("gray", 11)}`
`allow_escape_view_box`	`Dict[str, bool]`	`{"x": False, "y": False}`
`active`	`bool`	`False`
`position`	`Dict[str, Any]`
`coordinate`	`Dict[str, Any]`	`{"x": 0, "y": 0}`
`is_animation_active`	`bool`	`True`
`animation_duration`	`int`	`1500`
`animation_easing`	`"ease" \| "ease-in" \| ...`	`"ease"`

Event Triggers

See the full list of default event triggers