Как в react-chartjs-2 задать отступ между круговой диаграммой и лейблами

При работе с react-chartjs-2 и круговыми диаграммами часто возникает проблема: подписи (лейблы) сдвигают диаграмму влево, и она не центрируется в блоке. Это связано с тем, что пространство для легенды не учитывается при расчете отступов. В этой статье разберём несколько способов решения: через настройки layout.padding, параметры плагина legend и корректировку CSS.

Настройка layout.padding в options

Самый прямой способ - задать внутренние отступы через layout.padding. Это свойство добавляет пустое пространство вокруг всей диаграммы, включая область с лейблами. Например:

options={{  layout: { padding: { top: 10, bottom: 10, left: 20, right: 20 } } }}

Увеличьте left или right в зависимости от положения легенды. Если легенда справа, добавьте padding справа, чтобы сдвинуть диаграмму левее.

Использование плагина legend с кастомным отступом

Плагин legend позволяет управлять отступами между элементами. Параметр labels.padding задаёт расстояние между подписями, а labels.boxWidth и labels.boxHeight - размеры маркеров. Для увеличения отступа от диаграммы до легенды используйте labels.padding (в пикселях). Пример:

plugins: { legend: { position: 'right', labels: { padding: 20, usePointStyle: true } } }

Увеличение padding до 20-30 пикселей часто решает проблему смещения.

Корректировка CSS контейнера

Если настройки chart.js не дают нужного результата, используйте CSS. Ваш контейнер .pie-chart-wrapper уже содержит margin-left: 11% - это временное решение, которое ломается при изменении длины лейблов. Лучше применить flexbox для центрирования:

.pie-chart-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

Также можно задать padding-left и padding-right в процентах, чтобы компенсировать ширину легенды. Например, если легенда справа, добавьте padding-right: 15%.

Автоматический расчет отступа через chartArea

Для динамического решения используйте событие afterDraw или resize. Внутри колбэка можно получить chart.chartArea и вычислить фактические координаты диаграммы, а затем скорректировать layout.padding. Пример:

options: { responsive: true, plugins: { legend: { position: 'right' } }, layout: { padding: { left: 0 } } }, plugins: [{ id: 'customPadding', afterDraw(chart) { const legendWidth = chart.legend.width; chart.options.layout.padding.left = legendWidth * 0.1; chart.update(); } }]

Этот подход требует доп. кода, но гарантирует центрирование при любых данных.

Проверка размера контейнера

Убедитесь, что родительский элемент .chart-container имеет фиксированную высоту и ширину, либо использует aspectRatio. Если контейнер слишком мал, диаграмма будет сжиматься вместе с лейблами. Рекомендуемые стили:

.chart-container { width: 100%; max-width: 500px; height: auto; aspect-ratio: 1; }

Это гарантирует, что диаграмма остаётся квадратной, а лейблы не выходят за границы.

Резюме

Для решения проблемы с отступом между круговой диаграммой и лейблами в react-chartjs-2 используйте комбинацию: увеличьте layout.padding, настройте legend.labels.padding и примените flexbox в CSS. Если данные динамические, добавьте кастомный плагин для автоматического расчета. Избегайте жёстких margin-left - они не адаптируются под разную длину подписей.