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

Gráficos

Area Chart

rx.recharts.area_chartrx.recharts.area

Documentación oficial

Pedido del taller

Apila las visitas mensuales de la web y de la app en un gráfico que muestre de un vistazo la tendencia total y la parte de cada una.

rx.recharts.area_chart es un gráfico de áreas: una línea con el espacio de debajo relleno de color. Sirve para mostrar cómo cambia una cantidad con el tiempo y, a la vez, el tamaño total cuando se suman varios valores. Al contenedor del gráfico (area_chart) le pasas los datos, y dentro colocas como hijos las series que quieres dibujar (area) y los ejes.

Los datos son una lista de dicts. Cada dict es una posición del eje x, y data_key es la clave que elige qué valor de ese dict se dibuja. Todos los ejemplos de esta página usan el areachart_data de abajo.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="web"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=areachart_data,
    width="100%",
    height=250,
)

width y height del gráfico solo aceptan números (píxeles) o cadenas de porcentaje como "100%". Las unidades CSS como "20em" se ponen en la caja que envuelve el gráfico. Los ejes (x_axis, y_axis), la cuadrícula, el tooltip y la leyenda se explican en detalle en las páginas de piezas de gráficos; aquí solo usamos lo necesario.

Prueba las propiedades

Las dos áreas están apiladas con stack_id="1". Cambia la forma de la curva, el color, el grosor de la línea, los puntos y el modo de apilado. Los datos son el areachart_data de arriba.

Prueba las propiedades

curve

color

stroke_width

dot

stack_offset

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        type_="monotone",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    stack_offset="none",
    width="100%",
    height=250,
)

type_ es la forma de unir un punto con el siguiente. Con stack_offset en expand, cada mes suma 100% y solo se ven las proporciones.

Propiedad	Valores	Por defecto	Uso
`area_chart(data=)`	lista de dicts	ninguno	Datos de todo el gráfico
`area_chart(width=, height=)`	número o `"100%"`	`"100%"`	Tamaño del gráfico. Para la altura, lo seguro es un número
`area_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Flujo horizontal o vertical
`area_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	ninguno	Cómo se calcula la línea base de las áreas apiladas
`area_chart(sync_id=)`	cadena	ninguno	Los gráficos con el mismo valor mueven juntos tooltip y brush
`area_chart(margin=)`	`{"top": 5, ...}`	ninguno	Margen alrededor del gráfico
`area_chart(base_value=)`	número, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	Valor de fondo desde el que empieza el área
`area(data_key=)`	cadena	ninguno	Clave del valor que se dibuja
`area(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	`"monotone"`	Interpolación de la curva
`area(stroke=, fill=)`	color	accent 9 / accent 5	Color de la línea y del relleno
`area(stroke_width=)`	número	`1`	Grosor de la línea
`area(dot=, active_dot=)`	`True` / `False` / dict	`False` / punto accent	Mostrar puntos; punto al pasar el ratón
`area(stack_id=)`	cadena	ninguno	Las áreas con el mismo valor se apilan
`area(name=, unit=)`	cadena	`data_key`	Nombre y unidad que se ven en tooltip y leyenda
`area(connect_nulls=)`	`True` / `False`	`False`	Salta los valores vacíos (`None`) y sigue la línea
`area(x_axis_id=, y_axis_id=)`	cadena o número	`0`	A qué eje se asocia
`on_click` `on_mouse_enter` …	eventos		Los reciben el gráfico y las áreas. `area` también tiene `on_animation_start` y `on_animation_end`

Áreas apiladas (stack_id)

Las area con el mismo stack_id se apilan una sobre otra empezando desde abajo. El borde superior es el total, así que puedes leer a la vez el tamaño completo y cada parte. stack_offset define la base del apilado: normalmente "none", y "expand" cuando solo te interesan las proporciones.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 6),
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 6),
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=areachart_data,
    stack_offset="none",
    margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

Relleno con degradado

Si pintas el área intensa arriba y transparente abajo, la línea se lee mejor. Define un degradado SVG dentro del gráfico con rx.el.svg.defs y apúntalo con fill="url(#id)". Elige un id de degradado que no se repita en la página.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.8),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0),
            id="areachart_gradient",
            x1=0,
            x2=0,
            y1=0,
            y2=1,
        ),
    ),
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill="url(#areachart_gradient)",
        type_="natural",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    width="100%",
    height=280,
)

Varios ejes

Para dibujar en un mismo gráfico dos valores de magnitudes muy distintas, usa dos ejes. Ponle nombre a cada eje con y_axis_id y conecta cada area dándole el mismo y_axis_id. El eje x funciona igual con x_axis_id. Eso sí, dos escalas confunden con facilidad a quien lee el gráfico: úsalas solo cuando las unidades sean de verdad diferentes.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 5),
        y_axis_id="left",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=280,
)

Gráfico en vertical (layout)

Con layout="vertical" el área fluye de arriba abajo. Los ejes también cambian de papel: el eje x pasa a ser numérico (type_="number") y el eje y, de categorías (type_="category"). Conviene dar margin en los cuatro lados para que no se corten los textos.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 3),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="month", type_="category"),
    data=areachart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "bottom": 20, "left": 20},
    width="100%",
    height=300,
)

Gráficos sincronizados (sync_id)

Los gráficos con el mismo sync_id comparten la posición del tooltip y el rango del brush. Si pasas el ratón por el gráfico de arriba, el de abajo muestra el tooltip del mismo mes; si acortas el rango con el brush de abajo, el de arriba también se acorta. También se pueden sincronizar con gráficos de barras, de líneas y compuestos.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.vstack(
    rx.recharts.area_chart(
        rx.recharts.area(data_key="web", stroke=rx.color("accent", 9), fill=rx.color("accent", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=180,
    ),
    rx.recharts.area_chart(
        rx.recharts.area(data_key="app", stroke=rx.color("teal", 9), fill=rx.color("teal", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        rx.recharts.brush(data_key="month", height=24),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=210,
    ),
    width="100%",
)

Un gráfico que se mueve con State

Si pasas un valor de State a data, el gráfico se vuelve a dibujar con animación cada vez que cambia. Aquí, al pulsar el botón o un área, cambian los números, y el selector cambia también type_ desde State. Asignar una lista nueva entera garantiza que el cambio se transmita.

import random
from typing import Any


class AreaChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"month": "Jan", "web": 4000, "app": 2400},
        {"month": "Feb", "web": 3000, "app": 1398},
        {"month": "Mar", "web": 2000, "app": 5800},
        {"month": "Apr", "web": 2780, "app": 3908},
        {"month": "May", "web": 1890, "app": 4800},
        {"month": "Jun", "web": 2390, "app": 3800},
    ]
    curve: str = "monotone"

    @rx.event
    def shuffle(self):
        self.data = [
            {**row, "web": random.randint(500, 6000), "app": random.randint(500, 6000)}
            for row in self.data
        ]

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=AreaChartLiveState.shuffle),
        rx.select(
            ["monotone", "linear", "natural", "step", "basis"],
            value=AreaChartLiveState.curve,
            on_change=AreaChartLiveState.set_curve,
        ),
    ),
    rx.recharts.area_chart(
        rx.recharts.area(
            data_key="web",
            type_=AreaChartLiveState.curve,
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.area(
            data_key="app",
            type_=AreaChartLiveState.curve,
            stroke=rx.color("teal", 9),
            fill=rx.color("teal", 5),
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.legend(),
        data=AreaChartLiveState.data,
        width="100%",
        height=300,
    ),
    width="100%",
)

Completar el pedido

Apilamos las dos áreas con el mismo stack_id y aclaramos la parte de abajo con un degradado. Con name damos los nombres que se ven en la leyenda y el tooltip, y dejamos solo la cuadrícula horizontal para un aspecto sereno.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.1),
            id="areachart_order_web",
            x1=0, x2=0, y1=0, y2=1,
        ),
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("teal", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("teal", 9), stop_opacity=0.1),
            id="areachart_order_app",
            x1=0, x2=0, y1=0, y2=1,
        ),
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.area(
        data_key="web",
        name="Web",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        fill="url(#areachart_order_web)",
        stack_id="visits",
    ),
    rx.recharts.area(
        data_key="app",
        name="App",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        fill="url(#areachart_order_app)",
        stack_id="visits",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=300,
)

Notas del taller

Dentro de area_chart(data=lista) van como hijos area(data_key=…) y x_axis/y_axis.
width/height solo admiten números o cadenas de porcentaje. Las unidades CSS van en la caja exterior.
Con el mismo stack_id se apilan, y con stack_offset="expand" sale un gráfico de proporciones al 100%.
El degradado se define en rx.el.svg.defs y se usa con fill="url(#id)".
sync_id sincroniza los tooltips entre gráficos; un valor de State en data le da vida.

← Anterior

Tablas y cuadrículas de datos · Data Editor

Gráficos · Bar Chart

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