Метки круговой диаграммы перекрываются и обрезаются в интерактивной диаграмме js 2 ⇐ CSS

[Anonymous]

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

Код: Выделить всё

import {Pie} from 'react-chartjs-2';
function getRandomColor() {
const digits = '0123456789ABCDEF';
const opacity_digits = 'CDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += digits[Math.floor(Math.random() * 16)];
}

for (let i = 0; i < 2; i++) {
color += opacity_digits[Math.floor(Math.random() * 4)];
}
return color;
}

const backgroundColors = sortedKeys.map(() => getRandomColor());

const shiftLegendPlugin = {
id: 'shiftLegend',
beforeInit(chart) {
const originalFit = chart.legend.fit;
chart.legend.fit = function fit() {
originalFit.bind(chart.legend)();
this.left += 40;
};
}
};

Chart.register(shiftLegendPlugin);

const pieOptions = {
layout: {
padding: 20
},
maintainAspectRatio: false,
responsive: false,
plugins: {
legend: {
display: true,
color: '#0000a0',
text: "Sales per category",
position: 'right',
borderWidth: 1,
borderColor: '#0000a0',
labels: {
color: '#000000',
font: {
family: 'Calibri',
size: 12
}
}
},
datalabels: {
textAlign: 'center',
font: {
family: 'Calibri',
color: '#000000',
size: 14
},
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
let label = ctx.chart.data.labels[ctx.dataIndex];
return label + ': ' + percentage;
},
anchor: 'end',
align: 'end',
offset: 10,
},
tooltip: {
enabled: true,
backgroundColor: '#ffffff',
titleColor: '#000000',
bodyColor: '#000000',
titleFont: {
family: 'Calibri',
size: 14,
},
bodyFont: {
family: 'Calibri',
size: 12,
},
displayColors: true,
mode: 'index',
caretPadding: 10,
caretSize: 5,
},
shiftLegendPlugin,

}
}

const pieData = {
labels: sortedKeys,
datasets: [{
data: sortedValues,
backgroundColor: backgroundColors,
borderWidth: 1,
borderColor: '#fffffff',
hoverOffset: 20
}]
};

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... chart-js-2