Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

Tooltip

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.

PropType | ValuesDefault
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