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

Question

[tattami]

Как в react-chartjs-2 задать отступ между круговой диаграммой и лейблами?
Диаграмма не встает по центру блока из-за лейблов. Как это можно исправить? Уже все перепробовал, если задавать margin-left, то при изменении лейблов она все равно сдвигается влево..

const DEFAULT_CHART_OPTIONS = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
        padding: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        }
    },
    plugins: {
        legend: {
            position: 'right',
            align: 'start',
            display: true,
            labels: {
                usePointStyle: true,
                pointStyle: 'circle',
                padding: 10,
                font: { size: 12 }
            }
        },
        tooltip: {
            displayColors: false,
            backgroundColor: 'rgba(0,0,0,0.8)',
            titleFont: { size: 14, weight: 'bold' },
            bodyFont: { size: 12 }
        }
    },
};

<div className="pie-chart-wrapper">
                                    {loading.clients ? (
                                        <div className="chart-loading-overlay">
                                            <ClipLoader color="#3b82f6" size={30} />
                                        </div>
                                    ) : (
                                        <Pie
                                            data={clientsChartData} 
                                            options={{ ...clientsChartOptions, layout: { padding: 15 } }}
                                        />
                                    )}
                                </div>

/* Стили для круговой диаграммы */
.chart-container {
    background: white;
    border-radius: 16px;
    margin: 20px 0;
    max-height: 20vh;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.chart-container:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.chart-header {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.pie-chart-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    margin-left: 11%;
    margin-right: 0;
}

Answer 1

[Андрей Прохоренко]

Самый простой способ - использовать layout.padding с динамическим вычислением отступов на основе количества и длины лейблов.

const calculatePadding = (labels) => {
    const labelCount = labels.length;
    const maxLabelLength = Math.max(...labels.map(label => label.length));
    
    return {
        left: 40,
        right: Math.max(100, labelCount * 20 + maxLabelLength * 3)
    };
};

Более гибкое решение - отключить встроенную легенду и создать собственную

<div className="pie-chart-grid-container">
    <div className="pie-chart-canvas">
        <Pie data={data} options={optionsWithoutLegend} />
    </div>
    <div className="custom-legend">
        {/* Кастомная легенда */}
    </div>
</div>

Убери фиксированные margin-left: 11% и используй flexbox или grid для центрирования:

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

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