Гистограмма

Комплексная диаграмма для визуализации классифицированных количественных данных с поддержкой вертикального и горизонтального макетов, группирования, пользовательских легенд и динамической фильтрации состояний.

Рефлексные накладки Recharts под капотом. Это означает, что вы создаете свои собственные диаграммы, используя компоненты Recharts, и добавляете токены своей темы и пользовательские компоненты, такие какchart_tooltip, только тогда и там, где вам это нужно.

Примеры

Несколько

Вертикальная гистограмма из нескольких рядов, показывающая параллельное сравнение дискретных наборов данных.

Использованный реквизит: data_key, fill, radius, is_animation_active на bar; data_key, axis_line, tick_size, tick_line, tick на x_axis.

Bar Chart - Multiple

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
    {"month": "Mar", "desktop": 237, "mobile": 120},
    {"month": "Apr", "desktop": 73, "mobile": 190},
    {"month": "May", "desktop": 209, "mobile": 130},
    {"month": "Jun", "desktop": 214, "mobile": 140},
]


def bar_chart_multiple():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Multiple",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.bar(
                    data_key="mobile",
                    fill="var(--chart-2)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=data,
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1, 2], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Горизонтальный

Горизонтальная гистограмма идеально подходит для ранжирования категорий или отображения длинных текстовых меток.

Использованный реквизит: layout="vertical" на bar_chart; type_="number", hide=True по x_axis; type_="category", data_key по y_axis.

Bar Chart - Horizontal

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186},
    {"month": "Feb", "desktop": 305},
    {"month": "Mar", "desktop": 237},
    {"month": "Apr", "desktop": 73},
    {"month": "May", "desktop": 209},
    {"month": "Jun", "desktop": 214},
]


def bar_chart_horizontal():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Horizontal",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.bar(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    type_="number",
                    hide=True,
                    tick_size=0,
                ),
                rx.recharts.y_axis(
                    data_key="month",
                    type_="category",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=data,
                layout="vertical",
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Легенда

Составная вертикальная гистограмма со встроенной визуализацией легенды для сравнения нескольких рядов.

Использованный реквизит: stack_id, radius на bar; Контейнер компонентов legend.

Bar Chart - Legend

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
    {"month": "Mar", "desktop": 237, "mobile": 120},
    {"month": "Apr", "desktop": 73, "mobile": 190},
    {"month": "May", "desktop": 209, "mobile": 130},
    {"month": "Jun", "desktop": 214, "mobile": 140},
]


def bar_chart_with_legend():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Legend",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stack_id="a",
                    radius=[0, 0, 4, 4],
                    is_animation_active=False,
                ),
                rx.recharts.bar(
                    data_key="mobile",
                    fill="var(--chart-2)",
                    stack_id="a",
                    radius=[4, 4, 0, 0],
                    is_animation_active=False,
                ),
                rx.recharts.y_axis(
                    type_="number",
                    hide=True,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                rx.recharts.legend(),
                data=data,
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1, 2], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

с маркировкой

Отображает числовые или текстовые метки непосредственно над отдельными столбцами, используя встроенное отслеживание.

Использованный реквизит: label_list внутри контейнера компонента bar; position, offset, fill, font_size на label_list.

Bar Chart - Labeled

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186},
    {"month": "Feb", "desktop": 340},
    {"month": "Mar", "desktop": 237},
    {"month": "Apr", "desktop": 73},
    {"month": "May", "desktop": 209},
    {"month": "Jun", "desktop": 214},
]


def bar_chart_labeled():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Labeled",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    rx.recharts.label_list(
                        data_key="desktop",
                        position="top",
                        offset=10,
                        fill="var(--foreground)",
                        font_size=12,
                    ),
                    data_key="desktop",
                    fill="var(--chart-1)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.y_axis(
                    type_="number",
                    hide=True,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=data,
                width="100%",
                height=250,
                margin={"top": 20},
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Динамический

Демонстрирует динамическую потоковую передачу и фильтрацию данных с использованием интерактивных компонентов раскрывающегося списка и переменных состояния клиентского приложения.

Использованный реквизит: ClientStateVar, динамическая привязка data_key к bar.

Bar Chart - Dynamic

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

from datetime import datetime

import reflex as rx
from reflex.experimental import ClientStateVar

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"date": "2024-04-01", "desktop": 222, "mobile": 150},
    {"date": "2024-04-02", "desktop": 97, "mobile": 180},
    {"date": "2024-04-03", "desktop": 167, "mobile": 120},
    {"date": "2024-04-04", "desktop": 242, "mobile": 260},
    {"date": "2024-04-05", "desktop": 373, "mobile": 290},
    {"date": "2024-04-06", "desktop": 301, "mobile": 340},
    {"date": "2024-04-07", "desktop": 245, "mobile": 180},
    {"date": "2024-04-08", "desktop": 409, "mobile": 320},
    {"date": "2024-04-09", "desktop": 59, "mobile": 110},
    {"date": "2024-04-10", "desktop": 261, "mobile": 190},
    {"date": "2024-04-11", "desktop": 327, "mobile": 350},
    {"date": "2024-04-12", "desktop": 292, "mobile": 210},
    {"date": "2024-04-13", "desktop": 342, "mobile": 380},
    {"date": "2024-04-14", "desktop": 137, "mobile": 220},
    {"date": "2024-06-02", "desktop": 470, "mobile": 410},
    {"date": "2024-06-03", "desktop": 103, "mobile": 160},
    {"date": "2024-06-04", "desktop": 439, "mobile": 380},
    {"date": "2024-06-05", "desktop": 88, "mobile": 140},
    {"date": "2024-06-06", "desktop": 294, "mobile": 250},
    {"date": "2024-06-07", "desktop": 323, "mobile": 370},
    {"date": "2024-06-08", "desktop": 385, "mobile": 320},
    {"date": "2024-06-09", "desktop": 438, "mobile": 480},
    {"date": "2024-06-10", "desktop": 155, "mobile": 200},
    {"date": "2024-06-11", "desktop": 92, "mobile": 150},
    {"date": "2024-06-12", "desktop": 492, "mobile": 420},
    {"date": "2024-06-13", "desktop": 81, "mobile": 130},
    {"date": "2024-06-14", "desktop": 426, "mobile": 380},
    {"date": "2024-06-15", "desktop": 307, "mobile": 350},
]

formatted_data = [
    {
        "date": datetime.strptime(item["date"], "%Y-%m-%d").strftime("%b %d"),
        "desktop": item["desktop"],
        "mobile": item["mobile"],
    }
    for item in data
]

SelectedType = ClientStateVar.create("bar_selected", "mobile")


def bar_chart_dynamic():

    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.h3(
                    "Bar Chart - Dynamic",
                    class_name="text-lg font-semibold",
                ),
                rx.el.p(
                    "Showing total visitors for the last 6 months",
                    class_name="text-sm text-muted-foreground",
                ),
                class_name="flex flex-col gap-y-1.5",
            ),
            rx.el.select(
                rx.el.option("Mobile", on_click=SelectedType.set_value("mobile")),
                rx.el.option("Desktop", on_click=SelectedType.set_value("desktop")),
                default_value="Mobile",
                class_name="relative flex items-center whitespace-nowrap justify-center gap-2 py-2 rounded-lg shadow-sm px-3",
            ),
            class_name="w-full flex flex-row items-center justify-between",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip("hide"),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    data_key=SelectedType.value,
                    fill="var(--chart-1)",
                    radius=[2, 2, 0, 0],
                    is_animation_active=False,
                ),
                rx.recharts.y_axis(
                    type_="number",
                    hide=True,
                ),
                rx.recharts.x_axis(
                    data_key="date",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=formatted_data,
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Активен

Выделяет отдельный узел стержня, используя различные атрибуты штриха на основе интерактивного выбора или активных флагов фильтрации данных.

Используемые реквизиты: stroke, stroke_width динамически отображаются на bar.

Bar Chart - Active

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186},
    {"month": "Feb", "desktop": 340},
    {"month": "Mar", "desktop": 237, "active": True},
    {"month": "Apr", "desktop": 73},
    {"month": "May", "desktop": 209},
    {"month": "Jun", "desktop": 214},
]

modified_data = [
    {
        **item,
        "stroke": ("var(--chart-3)" if item.get("active", False) else "none"),
    }
    for item in data
]


def bar_chart_active():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Active",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stack_id="a",
                    radius=4,
                    stroke="stroke",
                    stroke_width=2,
                    is_animation_active=False,
                ),
                rx.recharts.y_axis(
                    type_="number",
                    hide=True,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=modified_data,
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Смешанный

Применяет явные уникальные цветовые конфигурации для каждого экземпляра панели, непосредственно анализируемые из свойств, сопоставленных внутри отдельных структур данных.

Используемые реквизиты: fill привязаны непосредственно к ключу словаря данных, а не к статической строке.

Bar Chart - Mixed

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"browser": "Chrome", "visitors": 275, "fill": "var(--chart-1)"},
    {"browser": "Safari", "visitors": 200, "fill": "var(--chart-2)"},
    {"browser": "Firefox", "visitors": 187, "fill": "var(--chart-3)"},
    {"browser": "Edge", "visitors": 173, "fill": "var(--chart-4)"},
    {"browser": "Other", "visitors": 90, "fill": "var(--chart-5)"},
]


def bar_chart_mixed():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Mixed",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.bar(
                    data_key="visitors",
                    fill="fill",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    type_="number",
                    hide=True,
                    tick_size=0,
                ),
                rx.recharts.y_axis(
                    data_key="browser",
                    type_="category",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=data,
                layout="vertical",
                width="100%",
                height=250,
            ),
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Несколько треков

Одновременно отображает несколько наборов данных отслеживания с индивидуальным цветом и интегрирует настраиваемую легенду нижнего колонтитула, выровненную по сетке и реагирующую на несколько устройств.

Использованный реквизит: Тройные треки bar с соответствующими утилитами отслеживания bg-chart-*.

Bar Chart - Multiple

Showing total visitors for the last 6 months

Desktop

Mobile

Tablet

Trending up by 5.2% this month

January - June 2024

import reflex as rx

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80, "tablet": 50},
    {"month": "Feb", "desktop": 305, "mobile": 200, "tablet": 120},
    {"month": "Mar", "desktop": 237, "mobile": 120, "tablet": 70},
    {"month": "Apr", "desktop": 73, "mobile": 190, "tablet": 30},
    {"month": "May", "desktop": 209, "mobile": 130, "tablet": 80},
]


def bar_chart_multiple_tracks():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Bar Chart - Multiple",
                class_name="text-lg font-semibold",
            ),
            rx.el.p(
                "Showing total visitors for the last 6 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.bar_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.bar(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.bar(
                    data_key="mobile",
                    fill="var(--chart-2)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.bar(
                    data_key="tablet",
                    fill="var(--chart-3)",
                    radius=4,
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=data,
                width="100%",
                height=230,
            ),
            rx.el.div(
                *[
                    rx.el.div(
                        rx.el.div(
                            class_name=f"h-3 w-3 rounded-sm bg-chart-{index + 1}"
                        ),
                        rx.el.p(device, class_name="text-xs text-foreground"),
                        class_name="flex flex-row items-center gap-x-2",
                    )
                    for index, device in enumerate(["Desktop", "Mobile", "Tablet"])
                ],
                class_name="flex items-center gap-4 justify-center",
            ),
            class_name="flex flex-col gap-y-4",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    "Trending up by 5.2% this month ",
                    class_name="flex items-center gap-2 leading-none font-medium",
                ),
                rx.el.div(
                    "January - June 2024",
                    class_name="flex items-center gap-2 leading-none text-muted-foreground",
                ),
                class_name="grid gap-2",
            ),
            class_name="flex w-full items-start gap-2 text-sm",
        ),
        class_name=chart_tooltip_content([1, 2, 3], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Справочник по API

бар_диаграмма

Основной контейнер-оболочка, обрабатывающий сопоставления координат выравнивания сетки и адаптивные границы для гистограмм.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="desktop",
    ),
    data=data,
    width="100%",
    height=250,
)

Опора	Тип	По умолчанию
`data`	`list[dict]`
`width`	`str \| int`
`height`	`str \| int`
`margin`	`dict`
`layout`	`str`	`"horizontal"`

бар

Определяет отдельные геометрические прямоугольные полосы, сопоставленные с определенной серией.

rx.recharts.bar(
    data_key="desktop",
    fill="var(--chart-1)",
    radius=4,
    is_animation_active=False,
)

Опора	Тип	По умолчанию
`data_key`	`str`
`fill`	`str`
`stroke`	`str`
`stroke_width`	`int`
`radius`	`int \| list`
`stack_id`	`str`
`is_animation_active`	`bool`	`True`

список_меток

Включает встроенные аннотации, автоматически отображаемые рядом или внутри узлов стержня.

rx.recharts.label_list(
    data_key="desktop",
    position="top",
    offset=10,
    fill="var(--foreground)",
    font_size=12,
)

Опора	Тип	По умолчанию
`data_key`	`str`
`position`	`str`
`offset`	`int`
`fill`	`str`
`font_size`	`int`

ось x

Отрисовывает горизонтальные метаданные базовой линии и текстовые строки категорий.

rx.recharts.x_axis(
    data_key="month",
    axis_line=False,
    tick={"fill": "var(--foreground)", "fontSize": 10},
)

Опора	Тип	По умолчанию
`data_key`	`str`
`type_`	`str`	`"category"`
`hide`	`bool`	`False`
`axis_line`	`bool`	`True`
`tick_line`	`bool`	`True`
`tick_size`	`int`
`tick`	`dict`
`interval`	`str \| int`

ось_y

Отрисовывает вертикальные оси отслеживания и диапазоны базовых линий.

rx.recharts.y_axis(
    data_key="month",
    type_="category",
    axis_line=False,
)

Опора	Тип	По умолчанию
`data_key`	`str`
`type_`	`str`	`"number"`
`hide`	`bool`	`False`
`axis_line`	`bool`	`True`
`tick_line`	`bool`	`True`
`tick_size`	`int`
`tick`	`dict`

декартова_сетка

Добавляет направляющие линии выравнивания координат на фон области просмотра диаграммы.

rx.recharts.cartesian_grid(
    horizontal=True,
    vertical=False,
)

Опора	Тип	По умолчанию
`horizontal`	`bool`	`True`
`vertical`	`bool`	`True`
`class_name`	`str`

легенда

Добавляет стандартные серии, автоматически идентифицирующие поля отслеживания.

rx.recharts.legend()

Опора	Тип	По умолчанию
`align`	`str`	`"center"`
`layout`	`str`	`"horizontal"`

подсказка

Вводит богатые интерактивные всплывающие элементы во время событий наведения элемента.

chart_tooltip()

Опора	Тип	По умолчанию
`label`	`str`
`cursor`	`bool`