Is there a way to adjust the size of the pie chart or reduce the white space at the bottom? In the mobile view after inspecting with Chrome dev tools, it seems like the chart is not displaying as desired. Here is the screenshot
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">Pie chart</div>
<div class="card-body" style="height: 400px">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
</div>
<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
</div>
</div>
<canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
</div>
</div>
</div>
I managed to achieve the desired layout using media queries, but when manually resizing the Chrome window, the pie chart gets misaligned and looks unappealing. This is the ideal outcome and the CSS code changes are:
@media (max-width:991.98px) {
.padding {
padding: 1.5rem;
}
}
@media (max-width:767px) {
.padding {
padding: 1rem ;
}
.card{
height: 20rem; /* this code makes it possible */
}
}
`