Two pie charts in one flexbox container - flexbox

Question

I'm designing a dashboard in which I want to put two pie charts in one flexbox container ... it shows the second and the one is hidden and sometimes when I hover on the second the first appear on the top of the second ... my code
<section id="pie-charts">
<canvas id="trans-status-chart" width="400" height="300"></canvas>
<canvas id="targeted-gender-chart" width="400" height="300"></canvas>
</section>
My css:
#pie-charts{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#trans-status-chart{
width: 45% !important;
height: auto !important;
}
#targeted-gender-chart{
width: 45% !important;
height: auto !important;
}

Answer 1

Chart.js needs an 'exclusive' parent element to ensure that it can size itself correctly. This effectively means you need to wrap all canvas elements in a relatively positioned div.
Here's an example:
new Chart(document.getElementById('trans-status-chart'), {
type: 'pie',
data: {
datasets: [{
data: [43, 20, 44]
}]
},
options: {}
});
new Chart(document.getElementById('targeted-gender-chart'), {
type: 'pie',
data: {
datasets: [{
data: [55, 82, 32]
}]
},
options: {}
});
#pie-charts {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#pie-charts>div {
width: 45% !important;
height: auto !important;
position: relative;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<section id="pie-charts">
<div><canvas id="trans-status-chart" width="400" height="300"></canvas></div>
<div><canvas id="targeted-gender-chart" width="400" height="300"></canvas></div>
</section>