Multiple donut charts placed horizontally with same height of the donut charts

[JavianDev]

I have 3 donut charts placed horizontally with different datasets and 3 canvas. I want to set the same height of the donut after render. and labels to be placed at the bottom. Also if we have multiple labels the labels should increase at the bottom while maintaining the same donut size in the all the canvas. Also can we bind all the 3 charts?

[LeeLenaleee]

You are best off to use a HTML legend, then you can make all the canvases the same height and width so the doughnuts are the same

[JavianDev]

I am using the below config but this doesn't help
var ctx = document.getElementById("chartDonutAccounts").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: 'Accounts',
data: data,
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 0
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 5,
bottom: 0
}
},
plugins: {
legend: {
fullWidth: true,
position: 'bottom',
display: true,
positionDoughnutLabelExtended: 'bottomLeft',// (this align the legend at the left)
labels: {
fontSize: 10,
usePointStyle: true,
boxWidth: 20
}
}
},
//cutoutPercentage: 90,
//positionPDExtended: 'absolute',// (this put all the doughnuts on the same place)
responsive: true,
aspectRatio: 1,
maintainAspectRatio: false
}
});
My Accounts PieChart is smaller than the neighboring charts as we have more Labels in Accounts Pie Chart.

[Udemology]

By default the legend compresses the canvas. You need to create a HTML legend. Probably this video would help you: https://youtu.be/eIy8J-YhanU

[talk2coded]

has anyone been able to fix this in react?