-5

I have a doughnut chart built using chart js. I want a fixed-size of doughnut chart no matter how much data it has. check the image how bad it is looking It has 371 legends. How can I fix the size of the doughnut chart?

Doughnut Chart

Mohsin Shaikh
  • 1
  • 4

1 Answers1

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

rd1218
  • 134
  • 12