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

Bar Chart

rx.recharts.bar_chartrx.recharts.barrx.recharts.cell

Documentación oficial

Pedido del taller

Pon una al lado de otra las ventas de café y de té de cada sucursal, para comparar qué vende más cada una.

rx.recharts.bar_chart levanta una barra por elemento para comparar tamaños. Es el primer gráfico que se elige para comparar elementos separados, como las ventas por sucursal o el recuento por categoría. Al contenedor le das data y colocas un rx.recharts.bar(data_key=…) por cada serie que quieras dibujar.

Casi todos los ejemplos de esta página usan el barchart_data de abajo.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    width="100%",
    height=250,
)

Prueba las propiedades

Con dos bar, las barras de cada elemento quedan una junto a otra. Cambia el espacio entre elementos (bar_category_gap), el espacio entre barras del mismo elemento (bar_gap) y el fondo gris detrás de las barras (background).

Prueba las propiedades

color

bar_category_gap

bar_gap

background

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("indigo", 8),
        background=False,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill=rx.color("teal", 8),
        background=False,
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="10%",
    bar_gap="5%",
    width="100%",
    height=250,
)

Los espacios se indican con una cadena de porcentaje o un número de píxeles. Al activar background se pinta suavemente todo el hueco que ocupa cada barra.

Propiedad	Valores	Por defecto	Uso
`bar_chart(data=)`	lista de dicts	ninguno	Datos de todo el gráfico
`bar_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Barras verticales u horizontales
`bar_chart(bar_category_gap=)`	porcentaje o número	`"10%"`	Espacio entre un elemento y otro
`bar_chart(bar_gap=)`	porcentaje o número	`4`	Espacio entre barras del mismo elemento
`bar_chart(bar_size=, max_bar_size=)`	número	automático	Grosor de todas las barras; grosor máximo
`bar_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	`"none"`	Cómo se calcula la base de las barras apiladas
`bar_chart(reverse_stack_order=)`	`True` / `False`	`False`	Invierte el orden de apilado
`bar_chart(sync_id=, margin=)`	cadena / dict	ninguno	Sincronizar con otros gráficos; margen alrededor
`bar(data_key=)`	cadena	ninguno	Clave del valor que se dibuja. Si el valor es `[mín, máx]`, es una barra de rango
`bar(fill=, stroke=)`	color	accent 9 / ninguno	Color de la barra y del borde
`bar(stack_id=)`	cadena	ninguno	Las barras con el mismo valor se apilan
`bar(radius=)`	número o `[sup. izq., sup. der., inf. der., inf. izq.]`	`0`	Redondeo de las esquinas
`bar(background=)`	`True` / `False`	`False`	Fondo del hueco de la barra
`bar(min_point_size=)`	número	ninguno	Tamaño mínimo visible incluso para valores cercanos a 0
`bar(name=, unit=, label=)`	cadena / bool		Nombre en tooltip y leyenda, unidad, número encima de la barra
`on_click` `on_mouse_enter` …	eventos		Los reciben el gráfico, `bar` y `cell`

Barras apiladas y barras al 100%

Las bar con el mismo stack_id se apilan en una sola barra. La altura total de la barra es la suma. Si le das stack_offset="expand" al gráfico, todas las barras tienen la misma altura y solo queda la proporción de cada parte.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        width="100%",
        height=250,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        stack_offset="expand",
        width="100%",
        height=250,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Barras de rango

Si el valor al que apunta data_key no es un solo número sino dos, [mín, máx], la barra no empieza en 0: va del valor bajo al valor alto. Sirve para mostrar rangos, como la temperatura mínima y máxima de un día.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="temperature",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 7),
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "temperature": [-1, 10]},
        {"day": "Tue", "temperature": [2, 15]},
        {"day": "Wed", "temperature": [3, 12]},
        {"day": "Thu", "temperature": [4, 12]},
        {"day": "Fri", "temperature": [12, 16]},
        {"day": "Sat", "temperature": [5, 16]},
        {"day": "Sun", "temperature": [0, 8]},
    ],
    width="100%",
    height=250,
)

Grosor y espaciado de las barras

bar_size fija en píxeles el grosor de todas las barras y max_bar_size, el grosor máximo. En el ejemplo de abajo hay bar_size=100, pero gana max_bar_size=24, así que ninguna barra pasa de 24 píxeles. Viene bien para que las barras no salgan demasiado gordas cuando hay pocos elementos.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="15%",
    bar_gap=6,
    bar_size=100,
    max_bar_size=24,
    width="100%",
    height=250,
)

Esquinas redondeadas y degradado

Con un solo número en radius se redondean las cuatro esquinas; con una lista como [8, 8, 0, 0] las defines por separado en este orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda. Si redondeas solo la parte de arriba, la barra parece apoyada en el suelo. Como en el gráfico de áreas, el relleno puede ser un degradado de rx.el.svg.defs usado con url(#id).

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_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.9),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.2),
            id="barchart_gradient",
            x1=0,
            y1=0,
            x2=0,
            y2=1,
        ),
    ),
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("teal", 8),
        radius=8,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill="url(#barchart_gradient)",
        radius=[8, 8, 0, 0],
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=barchart_data,
    width="100%",
    height=250,
)

Barras horizontales (layout)

Con layout="vertical" obtienes un gráfico de barras horizontales que crecen de izquierda a derecha. Cambia el eje x a numérico (type_="number") y el eje y a categorías (type_="category"). Se lee mejor cuando los nombres de los elementos son largos.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 4),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="store", type_="category"),
    data=barchart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=280,
)

State y clics

Si conectas un valor de State a data, las barras crecen con animación cuando cambia. En el gráfico de abajo, al pulsar en cualquier sitio (el on_click de bar_chart) se generan números nuevos.

import random
from typing import Any


class BarChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"store": "North", "coffee": 4000, "tea": 2400},
        {"store": "South", "coffee": 3000, "tea": 1398},
        {"store": "East", "coffee": 2000, "tea": 5800},
        {"store": "West", "coffee": 2780, "tea": 3908},
    ]

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


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    on_click=BarChartLiveState.shuffle,
    data=BarChartLiveState.data,
    width="100%",
    height=280,
)

Para dar un comportamiento distinto a cada barra se usa rx.recharts.cell. Si dentro de bar creas con rx.foreach tantas cell como datos haya, cada cell se encarga de la barra en la misma posición. Pasando el nombre del elemento al on_click de esa cell, construimos un drill-down que deja solo la barra pulsada. Si vuelves a pulsar la misma barra, regresas a la vista completa.

La función de foreach recibe (item, index) y devuelve una cell.
El manejador de clic queda ligado al valor de ese elemento cuando se construye la pantalla (toggle(item["name"].to(str))).
Con rx.cond se pinta de otro color solo la barra elegida.
El propio data del gráfico es una variable calculada (rows), así que al elegir, el gráfico vuelve a dibujar solo ese elemento.

El mismo método funciona en el gráfico circular (se ponen las cell dentro de pie).

barchart_genres = [
    {"name": "Fiction", "count": 42},
    {"name": "History", "count": 28},
    {"name": "Science", "count": 35},
    {"name": "Biography", "count": 17},
    {"name": "Fantasy", "count": 24},
]

barchart_colors = ["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"]


class BarChartDrillState(rx.State):
    picked: str = ""

    @rx.var
    def rows(self) -> list[dict[str, str | int]]:
        if self.picked:
            return [g for g in barchart_genres if g["name"] == self.picked]
        return barchart_genres

    @rx.event
    def toggle(self, name: str):
        self.picked = "" if self.picked == name else name


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.x_axis(data_key="name", tick_line=False, axis_line=False),
    rx.recharts.y_axis(allow_decimals=False, axis_line=False, tick_line=False),
    rx.recharts.bar(
        rx.foreach(
            BarChartDrillState.rows,
            lambda item, index: rx.recharts.cell(
                on_click=BarChartDrillState.toggle(item["name"].to(str)),
                custom_attrs={"cursor": "pointer"},
                fill=rx.cond(
                    BarChartDrillState.picked == item["name"],
                    "#1D4ED8",
                    rx.Var.create(barchart_colors)[index % 5],
                ),
            ),
        ),
        data_key="count",
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.graphing_tooltip(),
    data=BarChartDrillState.rows,
    width="100%",
    height=280,
)

Completar el pedido

Ponemos en cada sucursal las barras de café y de té una al lado de otra y redondeamos solo la parte de arriba. Con max_bar_size evitamos que las barras engorden demasiado, y el tooltip y la leyenda permiten leer valores y nombres.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="coffee", name="Coffee", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.bar(data_key="tea", name="Tea", fill=rx.color("teal", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=barchart_data,
    bar_gap=2,
    max_bar_size=32,
    width="100%",
    height=300,
)

Notas del taller

Dentro de bar_chart(data=…), un bar(data_key=…) por serie las pone en paralelo; con el mismo stack_id se apilan.
stack_offset="expand" da barras al 100%; si el valor de data_key es [mín, máx], es una barra de rango.
Espacios: bar_category_gap y bar_gap; grosor: bar_size y max_bar_size; esquinas: radius.
Con layout="vertical" las barras son horizontales. Cambia también el type_ de los ejes.
Para dar a cada barra su color o su clic, pon rx.recharts.cell dentro de bar con foreach.

← Anterior

Gráficos · Area Chart

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