Display multiple chart with same height and width

Hello
I am displaying multiple doughnut chart is same page. Issue is they both showing different height and width due to different size of there labels.

So is there any way to display both chart same size?
I have attached screenshot of chart and bellow is the JS code and also here is the [codepen](https://codepen.io/anon/pen/KyRdOg)

var Chart1 = '';
function myfunctionChart(positions, chartId, chartdata1) {
var ChartDataTitle = [];
var ChartDataColor = [];
var ChartDataValue = [];
$('.' + chartdata1 + ' span').each(function() {
ChartDataTitle.push($(this).data('title'));
ChartDataColor.push($(this).data('color'));
ChartDataValue.push($(this).data('value'));
});
var config = {
type: 'doughnut',
data: {
datasets: [{
data: ChartDataValue,
backgroundColor: ChartDataColor,
label: 'Dataset 1'
}],
labels: ChartDataTitle
},
options: {
responsive: false,
maintainAspectRatio: true,
legend: {
position: positions,
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
},
};
var elem1 = document.getElementById("mychart1");
if (typeof elem1 !== 'undefined' && elem1 !== null) {
var ctx = document.getElementById(chartId).getContext("2d");
// window.myDoughnut = new Chart(ctx, config);
Chart1 = new Chart(ctx, config);
return Chart1;
}
}
myfunctionChart('right', 'mychart1', 'chartdata1');
myfunctionChart('right', 'mychart2', 'chartdata2');

if ($(window).width() < 1024) {
Chart1.destroy();
myfunctionChart('bottom', 'mychart1', 'chartdata1');
myfunctionChart('bottom', 'mychart2', 'chartdata2');
}