ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Piezas de gráficos

Chart Tooltip

rx.recharts.graphing_tooltip

Documentación oficial

Pedido del taller

Al pasar el ratón por una barra, muestra un recuadro pequeño con el nombre y el valor, como «Sales - 4000 won».

rx.recharts.graphing_tooltip es el recuadro pequeño que aparece al pasar el ratón por un punto o una barra de la gráfica. Basta con ponerlo como hijo de la gráfica para que muestre el valor x bajo el ratón y los valores de todas las series en ese punto. rx.recharts.tooltip es el mismo componente.

Es un componente distinto de rx.tooltip (overlay), que se pega a textos o botones. Dentro de una gráfica se usa el de esta página.

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


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=ctooltip_data,
    width="100%",
    height=300,
)

Prueba las propiedades

Cambia los valores con el ratón sobre la gráfica. Desde el ejemplo de abajo se reutiliza tal cual el ctooltip_data creado arriba.

Prueba las propiedades

separator

cursor

is_animation_active

animation_easing

background

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="pv", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" : ",
        cursor=True,
        is_animation_active=True,
        animation_easing="ease",
        content_style={"background": rx.color("gray", 2), "borderRadius": "8px"},
    ),
    data=ctooltip_data,
    width="100%",
    height=260,
)

separator es el texto entre el nombre y el valor. Si desactivas cursor, desaparece la franja gris bajo el ratón.

Propiedad	Valores	Por defecto	Uso
`separator`	cadena	`":"`	Texto entre el nombre y el valor
`cursor`	`True` / `False`, dict	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`	Franja de resalte bajo el ratón. Con `False`, ninguna
`content_style`	dict de estilo	fondo gris, esquinas redondeadas	Decorar el interior del recuadro
`wrapper_style`	dict de estilo	`{}`	Decorar el elemento exterior que envuelve el recuadro
`item_style` · `label_style`	dict de estilo	texto gris 12 · gris 11	Decorar cada línea de valor (li) y el valor x de arriba (p)
`position`	`{"x": …, "y": …}`	-	Si se indica, queda fijo en ese sitio
`offset`	número	`10`	Distancia entre el ratón y el recuadro
`allow_escape_view_box`	`{"x": bool, "y": bool}`	ambos `False`	Si puede salirse del área de la gráfica
`view_box`	`{"x", "y", "width", "height"}`	automático	Área en la que se mueve el recuadro. Normalmente se calcula sola
`filter_null`	`True` / `False`	`True`	Si se quitan las series sin valor (None)
`active`	`True` / `False`	automático	Mostrar u ocultar a la fuerza
`is_animation_active` · `animation_duration` · `animation_easing`	bool · ms · nombre de easing	`True` · `1500` · `"ease"`	Animación del recuadro al seguir al ratón

Decorar y fijar la posición

wrapper_style decora la envoltura exterior y content_style, el recuadro interior. item_style es cada línea de valor y label_style, el valor x de arriba. Todos son dicts con propiedades CSS escritas en camelCase.

Si indicas position, el recuadro no sigue al ratón y se queda en ese sitio. allow_escape_view_box decide, para x e y por separado, si el recuadro puede salirse del área de la gráfica, y view_box es el tamaño del área en la que se mueve.

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"},
        item_style={"color": rx.color("accent", 11)},
        label_style={"fontWeight": "bold"},
        position={"x": 80, "y": 0},
        is_animation_active=False,
    ),
    data=ctooltip_data,
    width="100%",
    height=300,
)

Valores vacíos: filter_null

Si los datos tienen None, por defecto (filter_null=True) esa serie se quita del recuadro (izquierda). Con False, el nombre se queda y solo el valor aparece vacío (derecha). Pasa el ratón por Tue y Thu para comparar.

ctooltip_gaps = [
    {"day": "Mon", "shop": 120, "online": 80},
    {"day": "Tue", "shop": 150, "online": None},
    {"day": "Wed", "shop": 90, "online": 110},
    {"day": "Thu", "shop": None, "online": 130},
    {"day": "Fri", "shop": 170, "online": 140},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(filter_null=False),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Completar el pedido

Si das name a una serie, el recuadro muestra ese nombre en lugar de uv; si das unit, la unidad aparece tras el valor. Cambiamos el separador a " - " y la franja bajo el ratón a un color de resalte.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Sales", unit=" won", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        cursor={"fill": rx.color("accent", 3)},
        content_style={"background": rx.color("gray", 1), "border": "none", "borderRadius": "10px", "boxShadow": "0 4px 14px rgba(0,0,0,0.12)"},
        item_style={"color": rx.color("accent", 11), "fontWeight": "bold"},
    ),
    data=ctooltip_data,
    width="100%",
    height=280,
)

Notas del taller

Basta con poner graphing_tooltip (o recharts.tooltip) como hijo de la gráfica. No es lo mismo que rx.tooltip.
El nombre y la unidad del recuadro salen del name y el unit de la serie.
Se decora con separator, cursor, content_style, wrapper_style, item_style y label_style.
position lo fija, y allow_escape_view_box le deja salirse de la gráfica.
Con filter_null=False, las series con None conservan el nombre.

← Anterior

Piezas de gráficos · Cartesian Grid

Piezas de gráficos · Legend

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex