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

Line Chart

rx.recharts.line_chartrx.recharts.line

Documentación oficial

Pedido del taller

Dibuja en dos líneas la evolución semanal de visitantes de las tiendas de Seúl y de Busan, para comparar en qué se diferencian sus tendencias.

rx.recharts.line_chart une puntos con líneas para mostrar cómo cambia algo con el tiempo. Se usa cuando importan más las subidas, las bajadas y la tendencia que el tamaño en sí. Al contenedor le das data y pones un rx.recharts.line(data_key=…) por serie.

Los ejemplos de abajo usan este linechart_data. Aunque no indiques un color, se dibuja con el color accent del tema.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul"),
    rx.recharts.line(data_key="busan"),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    data=linechart_data,
    width="100%",
    height=250,
)

Prueba las propiedades

Casi todo el aspecto de la línea se decide en line. El miércoles tiene el valor None, así que al activar y desactivar connect_nulls verás cómo el hueco se une o queda vacío.

Prueba las propiedades

curve

color

stroke_width

dash

dot

connect_nulls

hide

rx.recharts.line_chart(
    rx.recharts.line(
        data_key="sales",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        stroke_width=2,
        stroke_dasharray="",
        dot=True,
        connect_nulls=False,
        hide=False,
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "sales": 12},
        {"day": "Tue", "sales": 18},
        {"day": "Wed", "sales": None},
        {"day": "Thu", "sales": 15},
        {"day": "Fri", "sales": 24},
        {"day": "Sat", "sales": 20},
    ],
    width="100%",
    height=250,
)

stroke_dasharray es una cadena con «longitud del trazo longitud del hueco» en píxeles. hide oculta solo la línea y deja los ejes como están.

Propiedad	Valores	Por defecto	Uso
`line_chart(data=)`	lista de dicts	ninguno	Datos de todo el gráfico
`line_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Flujo horizontal o vertical
`line_chart(margin=, sync_id=)`	dict / cadena	ninguno	Margen alrededor; sincronizar con otros gráficos
`line(data_key=)`	cadena	ninguno	Clave del valor que se dibuja
`line(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	ninguno (recta)	Cómo se unen los puntos
`line(stroke=, stroke_width=)`	color / número	accent 9 / `1`	Color y grosor de la línea
`line(stroke_dasharray=)`	cadena como `"5 5"`	ninguno	Línea discontinua
`line(dot=, active_dot=)`	`True` / `False` / dict	punto accent	Puntos de datos; punto al pasar el ratón
`line(connect_nulls=)`	`True` / `False`	`False`	Salta los valores vacíos y sigue la línea
`line(hide=)`	`True` / `False`	`False`	Oculta la línea
`line(name=, unit=, legend_type=)`	cadena		Nombre en tooltip y leyenda, unidad, icono de la leyenda
`line(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 líneas. `line` también tiene `on_animation_start` y `on_animation_end`

Cuadrícula, tooltip y leyenda

Las piezas del gráfico se añaden simplemente como hijos. cartesian_grid es la cuadrícula de fondo, graphing_tooltip muestra el valor donde está el ratón y legend es la etiqueta con el nombre de cada serie. Si das type_="monotone" a cada línea, los quiebros se convierten en curvas suaves.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", type_="monotone", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", type_="monotone", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=280,
)

Títulos de los ejes

Si metes un rx.recharts.label como hijo de un eje, el eje lleva título. El título del eje y se pone de pie con custom_attrs={"angle": 270}. Deja sitio para los títulos con un height generoso en el eje x y un buen margin en el gráfico. Los valores de posición de la etiqueta se ven en detalle en la página de Label de las piezas de gráficos.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(
        data_key="seoul",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        type_="natural",
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Week", position="center"),
        data_key="week",
        height=60,
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Visits", position="left", custom_attrs={"angle": 270}),
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=linechart_data,
    margin={"left": 20, "right": 20, "top": 20},
    width="100%",
    height=300,
)

Gráfico en vertical (layout)

Con layout="vertical" la línea fluye de arriba abajo. Cambia el eje x a numérico (type_="number") y el eje y a categorías (type_="category"), y da margin en los cuatro lados para que no se corten los textos.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="week", type_="category"),
    data=linechart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=300,
)

Datos que cambian con State

Hemos conectado valores de State a data y a type_. Al pulsar el botón los valores oscilan un poco, y con los dos selectores cambias por separado la forma de cada línea. State existe por separado en cada pestaña del navegador, así que no afecta a la pantalla de nadie más. Dos ejes con y_axis_id y gráficos sincronizados con sync_id se tratan en la página del gráfico de áreas.

import random
from typing import Any


class LineChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"week": "W1", "seoul": 4000, "busan": 2400},
        {"week": "W2", "seoul": 3000, "busan": 1398},
        {"week": "W3", "seoul": 2000, "busan": 5800},
        {"week": "W4", "seoul": 2780, "busan": 3908},
        {"week": "W5", "seoul": 1890, "busan": 4800},
    ]
    seoul_type: str = "monotone"
    busan_type: str = "monotone"

    @rx.event
    def set_seoul_type(self, value: str):
        self.seoul_type = value

    @rx.event
    def set_busan_type(self, value: str):
        self.busan_type = value

    @rx.event
    def munge(self):
        self.data = [
            {**row, "seoul": row["seoul"] + random.randint(-500, 500), "busan": row["busan"] + random.randint(-1000, 1000)}
            for row in self.data
        ]


rx.vstack(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="seoul", type_=LineChartLiveState.seoul_type, stroke=rx.color("accent", 9)),
        rx.recharts.line(data_key="busan", type_=LineChartLiveState.busan_type, stroke=rx.color("teal", 9)),
        rx.recharts.x_axis(data_key="week"),
        rx.recharts.y_axis(),
        data=LineChartLiveState.data,
        margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
        width="100%",
        height=280,
    ),
    rx.hstack(
        rx.button("Munge data", on_click=LineChartLiveState.munge),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.seoul_type,
            on_change=LineChartLiveState.set_seoul_type,
        ),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.busan_type,
            on_change=LineChartLiveState.set_busan_type,
        ),
        wrap="wrap",
    ),
    width="100%",
)

Completar el pedido

Distinguimos las líneas de las dos tiendas a la vez por color y por trazo (continuo y discontinuo). Si no te limitas al color, el gráfico también se lee en una impresión en blanco y negro o con daltonismo.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.line(data_key="seoul", name="Seoul", type_="monotone", stroke=rx.color("accent", 9), stroke_width=2),
    rx.recharts.line(
        data_key="busan",
        name="Busan",
        type_="monotone",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
    ),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=300,
)

Notas del taller

Dentro de line_chart(data=…) pon un line(data_key=…) por serie.
type_ decide cómo se unen los puntos (monotone, linear, step…); stroke, stroke_width y stroke_dasharray, el trazo.
dot para los puntos, connect_nulls para saltar valores vacíos, hide para ocultar.
El título del eje es un rx.recharts.label dentro del eje; el sitio lo dan margin y el height del eje.
Con valores de State en data y type_, el gráfico cambia con botones y selectores.

← Anterior

Gráficos · Bar Chart

Gráficos · Composed 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