Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

General

/

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.

def tooltip_simple():
    return 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,
        width="100%",
        height=300,
    )

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.

def tooltip_custom_styling():
    return 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.graphing_tooltip(
            separator=" - ",
            view_box={"width": 675, " height": 300},
            allow_escape_view_box={"x": True, "y": False},
            wrapper_style={
                "backgroundColor": rx.color("accent", 3),
                "borderRadius": "8px",
                "padding": "10px",
            },
            content_style={
                "backgroundColor": rx.color("accent", 4),
                "borderRadius": "4px",
                "padding": "8px",
            },
            position={"x": 600, "y": 0},
            is_animation_active=False,
        ),
        data=data,
        height=300,
        width="100%",
    )

A Tooltip component in Recharts.

PropTypeDescriptionValues
separatorstr

The separator between name and value.

offsetint

The offset size of tooltip. Number

filter_nullbool

When an item of the payload has value null or undefined, this item won't be displayed.

cursorbool

If set false, no cursor will be drawn when tooltip is active.

view_boxDict

The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.

item_styleDict

The style of default tooltip content item which is a li element. DEFAULT: {}

wrapper_styleDict

The style of tooltip wrapper which is a dom element. DEFAULT: {}

content_styleDict

The style of tooltip content which is a dom element. DEFAULT: {}

label_styleDict

The style of default tooltip label which is a p element. DEFAULT: {}

allow_escape_view_boxDict

This option allows the tooltip to extend beyond the viewBox of the chart itself. DEFAULT: { x: false, y: false }

activebool

If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally.

positionDict

If this field is set, the tooltip position will be fixed and will not move anymore.

coordinateDict

The coordinate of tooltip which is usually calculated internally.

is_animation_activebool

If set false, animation of tooltip will be disabled. DEFAULT: true in CSR, and false in SSR

animation_durationint

Specifies the duration of animation, the unit of this option is ms. DEFAULT: 1500

animation_easingLiteral

The type of easing function. DEFAULT: 'ease'

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting