How can I reduce the size of doughnut chart and fixed the doughnut size

by

👍:0

You can try two steps: height at HTML/CSS and aspectRation at JS.

The height will control de DIV where the graphic is, which may solve your issue. Also, please look for no missing DIV or something similar.

<div class="col-md-12">
    <script type="text/javascript" src="https://npmcdn.com/chart.js@latest/dist/chart.min.js"></script>
    <canvas id="graphicID" style="height:50vh;"></canvas>
</div>

After that you may notice the graphic size is too small, not filling all DIV space available. For this you will need review the aspectRation, which control the size of the graphic within the DIV. Default for doughnut is 1, but for me 1.4 was a good approach.

const config = {
    type: 'doughnut',
    data: data,
    options: {
        aspectRatio: 1.4,
    }
};

For additional information please check https://www.chartjs.org/docs/latest/configuration/responsive.html

Leave a comment