Диаграмма площади

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

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

Примеры

Базовый

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

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

Area Chart

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 area_chart_basic_type():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area Chart",
                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.area_chart(
                chart_tooltip(label="show"),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    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], "border")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Линейный

Использует кривую линейной интерполяции между точками.

Использованный реквизит: type_="linear" на area.

Area Chart - Linear

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 area_chart_linear_type():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area Chart - Linear",
                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.area_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="linear",
                    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], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Шаг

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

Использованный реквизит: type_="step" на area.

Area Chart - Step

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 area_chart_step_type():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area Chart - Step",
                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.area_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="step",
                    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], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Сложено

Отображает несколько наборов данных, наложенных друг на друга, чтобы показать объединенные итоги.

Использованный реквизит: stack_id на area.

Area Chart - Stacked

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 area_chart_stacked():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area Chart - Stacked",
                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.area_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    stack_id="a",
                    is_animation_active=False,
                ),
                rx.recharts.area(
                    data_key="mobile",
                    fill="var(--chart-2)",
                    stroke="var(--chart-2)",
                    stroke_width=2,
                    stack_id="a",
                    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",
    )

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

Демонстрирует обновление данных диаграммы из состояния приложения.

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

Area Chart - Dynamic

Showing total visitors for the last 6 months

Desktop

Mobile

import datetime
import random

import reflex as rx
from reflex.experimental import ClientStateVar

from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content

start_date = datetime.date(2024, 4, 1)

data = [
    {
        "date": (start_date + datetime.timedelta(days=i)).strftime("%b %d"),
        "desktop": random.randint(80, 500),
        "mobile": random.randint(100, 550),
    }
    for i in range(91)
]

SelectedRange = ClientStateVar.create("area_selected", data)


def gradient(id_: str, color: str):
    return rx.el.svg.linear_gradient(
        rx.el.svg.stop(
            stop_color=f"var(--{color})",
            offset="5%",
            stop_opacity=0.8,
        ),
        rx.el.svg.stop(
            stop_color=f"var(--{color})",
            offset="95%",
            stop_opacity=0.1,
        ),
        x1=0,
        x2=0,
        y1=0,
        y2=1,
        id=id_,
    )


def area(data_key: str, color: str):
    return rx.recharts.area(
        data_key=data_key,
        fill=f"url(#{data_key})",
        stack_id="a",
        stroke=f"var(--{color})",
        animation_easing="linear",
        is_animation_active=False,
        active_dot={"fill": f"var(--{color})"},
    )


def area_chart_dynamic():
    select_options = [
        ("Last 3 Months", data),
        ("Last 30 Days", data[-30:]),
        ("Last 7 Days", data[-7:]),
    ]

    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    rx.el.h3(
                        "Area 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(
                            label,
                            on_click=SelectedRange.set_value(value),
                        )
                        for label, value in select_options
                    ],
                    default_value="Last 3 Months",
                    class_name="relative flex items-center whitespace-nowrap justify-center gap-2 py-2 rounded-lg shadow-sm px-3 bg-secondary border border-input",
                ),
                class_name="flex flex-row flex-wrap gap-y-4 items-center justify-between",
            ),
        ),
        rx.el.div(
            rx.recharts.area_chart(
                rx.el.svg.defs(
                    gradient("desktop", "chart-1"),
                    gradient("mobile", "chart-2"),
                ),
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                area("mobile", "chart-2"),
                area("desktop", "chart-1"),
                rx.recharts.x_axis(
                    data_key="date",
                    axis_line=False,
                    min_tick_gap=32,
                    tick_size=10,
                    tick_line=False,
                    interval="preserveStartEnd",
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                ),
                data=SelectedRange.value,
                width="100%",
                height=250,
            ),
            rx.el.div(
                *[
                    rx.el.div(
                        rx.el.div(
                            class_name=f"h-2 w-2 shrink-0 rounded-[2px] bg-chart-{index + 1}"
                        ),
                        rx.el.p(
                            device,
                            class_name="text-sm text-foreground",
                        ),
                        class_name="flex flex-row items-center gap-x-2",
                    )
                    for index, device in enumerate(["Desktop", "Mobile"])
                ],
                class_name="py-4 px-4 flex w-full justify-center gap-8",
            ),
            class_name="flex flex-col items-center",
        ),
        class_name=chart_tooltip_content([1, 2], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )

Легенда

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

Использованный реквизит: legend, несколько компонентов area.

Area 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 area_chart_with_legend():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area 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-1.5",
        ),
        rx.el.div(
            rx.recharts.area_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="mobile",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    stack_id="a",
                    is_animation_active=False,
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-2)",
                    stroke="var(--chart-2)",
                    stroke_width=2,
                    stack_id="a",
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                    interval="preserveStartEnd",
                ),
                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",
    )

Ось

Настраивает внешний вид оси и форматирование отметок.

Использованный реквизит: x_axis, y_axis, tick, min_tick_gap, tick_size.

Area Chart - Axes

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 area_chart_with_axis():
    return rx.el.div(
        rx.el.div(
            rx.el.h3(
                "Area Chart - Axes",
                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-1.5",
        ),
        rx.el.div(
            rx.recharts.area_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.area(
                    data_key="mobile",
                    fill="var(--chart-1)",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    stack_id="a",
                    is_animation_active=False,
                ),
                rx.recharts.area(
                    data_key="desktop",
                    fill="var(--chart-2)",
                    stroke="var(--chart-2)",
                    stroke_width=2,
                    stack_id="a",
                    is_animation_active=False,
                ),
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                    interval="preserveStartEnd",
                ),
                rx.recharts.y_axis(
                    width=30,
                    axis_line=False,
                    min_tick_gap=50,
                    tick_size=10,
                    tick_line=False,
                    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",
    )

Градиент

Использует градиенты SVG для создания эффектов заполненной области.

Использованный реквизит: svg.defs, svg.linear_gradient, fill="url(#...)".

Area Chart - Gradient

Showing total visitors for the last 6 months

Desktop

Mobile

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 area_chart_with_gradient():
    series = [
        ("desktop", "Desktop", "--chart-1"),
        ("mobile", "Mobile", "--chart-2"),
    ]

    def create_gradient(var_name):
        return rx.el.svg.linear_gradient(
            rx.el.svg.stop(
                stop_color=f"var({var_name})",
                offset="5%",
                stop_opacity=0.8,
            ),
            rx.el.svg.stop(
                stop_color=f"var({var_name})",
                offset="95%",
                stop_opacity=0.1,
            ),
            x1=0,
            x2=0,
            y1=0,
            y2=1,
            id=var_name.strip("-"),
        )

    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    rx.el.h3(
                        "Area Chart - Gradient",
                        class_name="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.el.div(
                            rx.el.div(
                                class_name="h-2 w-2 shrink-0 rounded-[2px]",
                                style={
                                    "backgroundColor": f"var({s[2]})",
                                },
                            ),
                            rx.el.p(
                                s[1],
                                class_name="text-xs font-medium",
                            ),
                            class_name="flex items-center gap-2",
                        )
                        for s in series
                    ],
                    class_name="flex items-center gap-4 w-full justify-end",
                ),
                class_name="flex flex-row flex-wrap gap-4 items-center justify-between w-full",
            ),
        ),
        rx.el.div(
            rx.recharts.area_chart(
                rx.el.svg.defs(
                    *(create_gradient(s[2]) for s in series),
                ),
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                *[
                    rx.recharts.area(
                        data_key=s[0],
                        fill=f"url(#{s[2].strip('-')})",
                        stroke=f"var({s[2]})",
                        stroke_width=2,
                        stack_id="1",
                        is_animation_active=False,
                    )
                    for s in series
                ],
                rx.recharts.x_axis(
                    data_key="month",
                    axis_line=False,
                    tick_size=10,
                    tick_line=False,
                    tick={
                        "fill": "var(--foreground)",
                        "fontSize": 10,
                    },
                    interval="preserveStartEnd",
                ),
                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",
    )

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

область_диаграмма

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

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

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

область

Представляет заполненный ряд данных.

rx.recharts.area(
    data_key="desktop",
    fill="var(--chart-1)",
    stroke="var(--chart-1)",
    stroke_width=2,
)

Опора	Тип	По умолчанию
`data_key`	`str`
`fill`	`str`
`stroke`	`str`
`stroke_width`	`int`
`type_`	`str`	`"monotone"`
`stack_id`	`str`
`is_animation_active`	`bool`	`True`
`active_dot`	`dict`

ось x

Управляет отрисовкой и метками по горизонтальной оси.

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

Опора	Тип	По умолчанию
`data_key`	`str`
`axis_line`	`bool`	`True`
`tick_line`	`bool`	`True`
`tick_size`	`int`
`tick`	`dict`
`interval`	`str`
`min_tick_gap`	`int`

ось_y

Управляет рендерингом по вертикальной оси.

rx.recharts.y_axis(
    width=30,
    axis_line=False,
)

Опора	Тип	По умолчанию
`width`	`int`
`axis_line`	`bool`	`True`
`tick_line`	`bool`	`True`
`tick_size`	`int`
`tick`	`dict`
`min_tick_gap`	`int`

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

Добавляет линии сетки фона.

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

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

подсказка

Отображает информацию при наведении.

chart_tooltip()

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