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
filter_null
bool
cursor
Union[Dict, bool]
LiteralVar.create( { "strokeWidth": 1, "fill": rx.color("gray", 3), } )
view_box
Dict[str, Any]
item_style
Dict[str, Any]
LiteralVar.create( { "color": rx.color("gray", 12), } )
wrapper_style
Dict[str, Any]
content_style
Dict[str, Any]
LiteralVar.create( { "background": rx.color("gray", 1), "borderColor": rx.color("gray", 4), "borderRadius": "8px", } )
label_style
Dict[str, Any]
LiteralVar.create({"color": rx.color("gray", 11)})
allow_escape_view_box
Dict[str, bool]
LiteralVar.create( {"x": False, "y": False} )
active
bool
position
Dict[str, Any]
coordinate
Dict[str, Any]
is_animation_active
bool
animation_duration
int
animation_easing
"ease" | "ease-in" | ...

Event Triggers

See the full list of default event triggers