---
title: "Линейный график"
description: "Универсальная диаграмма для визуализации непрерывных тенденций количественных данных во времени или по категориям, поддерживающая пользовательские кривые, аннотации, отслеживание нескольких серий и интерактивные границы."
order: 2
---
# Линейный график

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

>Рефлекторные накладки **[Recharts](https://recharts.github.io/)** под капотом. Это означает, что вы создаете свои собственные диаграммы, используя компоненты Recharts, и добавляете токены своей темы и пользовательские компоненты, такие какchart_tooltip, только тогда и там, где вам это нужно.

# Примеры

## Базовый

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

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

```python
def line_chart_basic():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line 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.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="natural",
                    dot=False,
                    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",
                ),
                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_="linear"` на `line`.

```python
def line_chart_linear():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line 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.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="linear",
                    dot=False,
                    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",
                ),
                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",
    )
```

## Метка

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

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

```python
def line_chart_label():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line Chart - Label", 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.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    rx.recharts.label_list(
                        position="top",
                        offset=20,
                        fill="var(--foreground)",
                        font_size=12,
                    ),
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="linear",
                    dot=True,
                    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",
                ),
                data=data,
                width="100%",
                height=250,
                margin={"left": 20, "right": 20, "top": 25},
            ),
        ),
        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",
    )
```

## Несколько

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

**Использованный реквизит:** Несколько компонентов `line`; Конфигурации `data_key`, `stroke`, отображающие уникальные значения.

```python
def line_chart_multiple():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line 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.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="natural",
                    dot=False,
                    is_animation_active=False,
                ),
                rx.recharts.line(
                    data_key="mobile",
                    stroke="var(--chart-2)",
                    stroke_width=2,
                    type_="natural",
                    dot=False,
                    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",
                ),
                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` отображает определенный вторичный атрибут `data_key` из строк данных.

```python
def line_chart_custom_label():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line Chart - Title Label", 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.line_chart(
                chart_tooltip("hide"),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    rx.recharts.label_list(
                        position="top",
                        offset=20,
                        fill="var(--foreground)",
                        custom_attrs={"fontSize": 11},
                        data_key="browser",
                    ),
                    data_key="visitors",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="natural",
                    dot=True,
                    is_animation_active=False,
                    active_dot={"fill": "var(--chart-1)"},
                ),
                data=data,
                width="100%",
                height=250,
                margin={"left": 25, "right": 20, "top": 25},
            ),
        ),
        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",
    )
```

## Минимальный

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

**Использованный реквизит:** `dot=False` на `line`.

```python
def line_chart_minimal():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line Chart - Minimal", 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.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="visitors",
                    type_="natural",
                    dot=False,
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    is_animation_active=False,
                ),
                data=data,
                width="100%",
                height=250,
                margin={"left": 20, "right": 20, "top": 25},
            ),
        ),
        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",
    )
```

## Интерактивный

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

**Использованный реквизит:** `min_tick_gap`, `interval="preserveStartEnd"` на `x_axis`.

```python
def line_chart_interactive():
    return rx.el.div(
        rx.el.div(
            rx.el.h3("Line Chart - Interactive", class_name="text-lg font-semibold"),
            rx.el.p(
                "Showing total visitors for the last 3 months",
                class_name="text-sm text-muted-foreground",
            ),
            class_name="flex flex-col gap-y-1.5",
        ),
        rx.el.div(
            rx.recharts.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="natural",
                    is_animation_active=False,
                    dot=False,
                    active_dot={"fill": "var(--chart-1)"},
                ),
                rx.recharts.y_axis(type_="number", hide=True),
                rx.recharts.x_axis(
                    data_key="date",
                    axis_line=False,
                    min_tick_gap=32,
                    tick_size=10,
                    tick_line=False,
                    tick={"fill": "var(--foreground)", "fontSize": 10},
                    interval="preserveStartEnd",
                ),
                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], "line")
        + " w-full p-0 flex flex-col gap-y-6",
    )
```

## Легенда нижнего колонтитула

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

**Используемый реквизит:** Чистый Python `*[]` включает списки, а также контейнеры семантического отслеживания, отображающие идентификаторы серий.

```python
def line_chart_footer_legend():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.h3("Line 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",
            ),
            class_name="flex flex-row items-center justify-between w-full",
        ),
        rx.el.div(
            rx.recharts.line_chart(
                chart_tooltip(),
                rx.recharts.cartesian_grid(
                    horizontal=True,
                    vertical=False,
                    stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
                ),
                rx.recharts.line(
                    data_key="desktop",
                    stroke="var(--chart-1)",
                    stroke_width=2,
                    type_="natural",
                    dot=False,
                    is_animation_active=False,
                ),
                rx.recharts.line(
                    data_key="mobile",
                    stroke="var(--chart-2)",
                    stroke_width=2,
                    type_="natural",
                    dot=False,
                    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",
                ),
                data=data,
                width="100%",
                height=210,
            ),
            rx.el.div(
                *[
                    rx.el.div(
                        rx.el.div(
                            class_name=f"w-2.5 h-2.5 rounded-[2.5px] 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 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], "square")
        + " w-full p-0 flex flex-col gap-y-6",
    )
```


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

## линия_диаграмма

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

```python
rx.recharts.line_chart(
    rx.recharts.line(
        data_key="desktop",
    ),
    data=data,
    width="100%",
    height=250,
)
```

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

## строка

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

```python
rx.recharts.line(
    data_key="desktop",
    stroke="var(--chart-1)",
    stroke_width=2,
    type_="natural",
    dot=False,
    is_animation_active=False,
)
```

| Опора | Тип | По умолчанию |
| --- | --- | --- |
| `data_key` | `str` |  |
| `stroke` | `str` |  |
| `stroke_width` | `int` |  |
| `type_` | `str` | `"text"` |
| `dot` | `bool | dict` | `True` |
| `active_dot` | `dict` |  |
| `is_animation_active` | `bool` | `True` |

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

Добавляет контекстно-описательные плавающие теги сразу после узлов линейного графика.

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

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

## ось x

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

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

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

## ось_y

Строит вертикальные сетки отслеживания и пороговые значения значений.

```python
rx.recharts.y_axis(
    type_="number",
    hide=True,
)
```

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

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

Обеспечивает чистые пересечения сетки фона.

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

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

## подсказка

Действия при наведении вызывают красивые сводки макетов всплывающих окон.

```python
chart_tooltip()
```

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