Позиция легенды: top, bottom, left, right, chartArea

Легенда в библиотеке Chart.js отображает список наборов данных (datasets) и позволяет визуально идентифицировать элементы графика. По умолчанию легенда располагается сверху (top), однако система конфигурации поддерживает несколько вариантов размещения:

• top
• bottom
• left
• right
• chartArea

Настройка выполняется через объект options.plugins.legend.position.

Базовый пример:

const config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
};

---

Размещение легенды сверху — top

Позиция top используется по умолчанию. Легенда отображается над областью построения графика.

const config = {
    type: 'line',
    data: {
        labels: ['Январь', 'Февраль', 'Март'],
        datasets: [
            {
                label: 'Продажи',
                data: [120, 190, 150],
                borderColor: 'blue'
            },
            {
                label: 'Расходы',
                data: [80, 100, 90],
                borderColor: 'red'
            }
        ]
    },
    options: {
        plugins: {
            legend: {
                position: 'top'
            }
        }
    }
};

Особенности позиции top

• подходит для большинства графиков;
• хорошо воспринимается при горизонтальной ориентации экрана;
• экономит место по ширине;
• оптимальна при небольшом количестве элементов.

Визуальная схема

┌───────────────────────┐
│       Легенда         │
├───────────────────────┤
│                       │
│      Область          │
│      графика          │
│                       │
└───────────────────────┘

---

Размещение легенды снизу — bottom

Позиция bottom переносит легенду под график.

const config = {
    type: 'pie',
    data: data,
    options: {
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
};

Когда использовать bottom

Позиция удобна в следующих случаях:

• круговые диаграммы (pie, doughnut);
• ограниченная высота контейнера сверху;
• необходимость визуально отделить график от легенды;
• мобильные интерфейсы.

Схема расположения

┌───────────────────────┐
│                       │
│      График           │
│                       │
├───────────────────────┤
│       Легенда         │
└───────────────────────┘

Практический пример

options: {
    responsive: true,
    plugins: {
        legend: {
            position: 'bottom'
        }
    }
}

---

Размещение легенды слева — left

Позиция left переносит легенду в левую часть контейнера.

const config = {
    type: 'radar',
    data: data,
    options: {
        plugins: {
            legend: {
                position: 'left'
            }
        }
    }
};

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

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

┌────────────┬──────────┐
│            │          │
│            │          │
│  Легенда   │  График  │
│            │          │
│            │          │
└────────────┴──────────┘

Преимущества

• подходит для длинных названий;
• сохраняет высоту области графика;
• удобно при большом количестве наборов данных.

Недостатки

• уменьшает ширину графика;
• может вызывать сжатие элементов на маленьких экранах.

---

Размещение легенды справа — right

Позиция right аналогична left, но располагает легенду справа.

const config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                position: 'right'
            }
        }
    }
};

Визуальная структура

┌───────────────┬───────┐
│               │       │
│    График     │       │
│               │Legend │
│               │       │
└───────────────┴───────┘

Типичные сценарии

• аналитические панели;
• дашборды;
• графики с множеством категорий;
• широкоформатные контейнеры.

---

Позиция chartArea

Значение chartArea размещает легенду непосредственно внутри области построения графика.

const config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                position: 'chartArea'
            }
        }
    }
};

Поведение chartArea

В отличие от остальных вариантов:

• легенда не резервирует отдельное пространство;
• элементы отображаются внутри области графика;
• часть данных может перекрываться легендой.

Схематичное представление

┌───────────────────────┐
│                       │
│     График            │
│                       │
│        Легенда        │
│                       │
└───────────────────────┘

Ограничения

Позиция chartArea используется значительно реже, поскольку:

• может ухудшать читаемость;
• перекрывает данные;
• требует аккуратного проектирования интерфейса.

---

Сравнение всех позиций

Позиция	Направление	Экономия места	Подходит для
top	горизонтальное	по ширине	стандартных графиков
bottom	горизонтальное	по ширине	pie/doughnut
left	вертикальное	по высоте	длинных подписей
right	вертикальное	по высоте	dashboard-интерфейсов
chartArea	свободное	максимальная	компактных схем

---

Динамическое изменение позиции

Позицию легенды можно менять во время работы приложения.

chart.options.plugins.legend.position = 'left';
chart.update();

Переключение на другую сторону:

chart.options.plugins.legend.position = 'bottom';
chart.update();

---

Комбинация с выравниванием align

Положение легенды определяет сторону размещения, а параметр align — внутреннее выравнивание.

Пример

options: {
    plugins: {
        legend: {
            position: 'top',
            align: 'start'
        }
    }
}

Возможные значения align

• start
• center
• end

Пример поведения

top + start

┌───────────────────────┐
│ Legend                │
├───────────────────────┤
│       График          │
└───────────────────────┘

top + center

┌───────────────────────┐
│        Legend         │
├───────────────────────┤
│       График          │
└───────────────────────┘

top + end

┌───────────────────────┐
│                Legend │
├───────────────────────┤
│       График          │
└───────────────────────┘

---

Влияние позиции на адаптивность

При включённой адаптивности (responsive: true) позиция легенды влияет на перерасчёт размеров графика.

options: {
    responsive: true,
    plugins: {
        legend: {
            position: 'right'
        }
    }
}

Важные особенности

Горизонтальные позиции

• уменьшают высоту области графика;
• подходят для мобильных экранов.

Вертикальные позиции

• уменьшают ширину графика;
• лучше работают на широких контейнерах.

---

Работа с большими легендами

При большом количестве наборов данных легенда может занимать значительную часть пространства.

Пример проблемы

datasets: [
    { label: 'Dataset 1' },
    { label: 'Dataset 2' },
    { label: 'Dataset 3' },
    { label: 'Dataset 4' },
    { label: 'Dataset 5' },
]

Решение через смену позиции

legend: {
    position: 'right'
}

Вертикальное расположение часто эффективнее для длинных списков.

---

Использование вместе с отключением легенды

Легенду можно полностью скрыть:

options: {
    plugins: {
        legend: {
            display: false
        }
    }
}

После повторного включения позиция снова начинает применяться:

legend: {
    display: true,
    position: 'bottom'
}

---

Настройка позиции для разных типов диаграмм

Линейные графики

Обычно используются:

position: 'top'

или

position: 'bottom'

---

Круговые диаграммы

Часто применяются:

position: 'right'

или

position: 'bottom'

---

Radar-графики

Удобны вертикальные варианты:

position: 'left'

---

Полный пример конфигурации

const config = {
    type: 'line',

    data: {
        labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт'],

        datasets: [
            {
                label: 'Доход',
                data: [120, 150, 180, 170, 210],
                borderColor: 'green',
                backgroundColor: 'rgba(0,255,0,0.2)'
            },
            {
                label: 'Расход',
                data: [90, 110, 130, 120, 160],
                borderColor: 'red',
                backgroundColor: 'rgba(255,0,0,0.2)'
            }
        ]
    },

    options: {
        responsive: true,

        plugins: {
            legend: {
                position: 'right',
                align: 'center',

                labels: {
                    boxWidth: 20,
                    padding: 15
                }
            }
        }
    }
};

new Chart(ctx, config);

---

Наиболее распространённые ошибки

Использование неверного значения

Неправильно:

position: 'center'

Правильно:

position: 'top'

---

Размещение вертикальной легенды в узком контейнере

position: 'left'

На маленьких экранах график может стать слишком узким.

---

Использование chartArea без учёта перекрытия

position: 'chartArea'

Легенда может закрывать линии, столбцы и подписи.

---

Рекомендации по выбору позиции

top

• универсальный вариант;
• лучший выбор по умолчанию.

bottom

• подходит для мобильных интерфейсов;
• удобен для круговых диаграмм.

left

• хорош для длинных текстов;
• эффективен при большом количестве элементов.

right

• часто используется в аналитических панелях;
• подходит для широких контейнеров.

chartArea

• применяется в редких случаях;
• требует аккуратной компоновки интерфейса.