Doughnut chart adjusting problem in chart.js

Question

Whenever I change the page resolution or size or zooming in the page chartjs adjust charts, its okay. But when undo my last action it doesn't come back its original size. Actually its get bigger in every action that I made on the page.

This is what i want:

this is what happens when i zoom:

 function doughnut_config(data, labels, center_text, tooltip_enabled = true) { const config = { type: 'doughnut', data: { datasets: [{ data: data, backgroundColor: backgroundColor, borderWidth: 0.3 }], labels: labels }, options: { legend: false, responsive: true, maintainAspectRatio: false, elements: { center: { text: center_text } }, tooltips: { enabled: tooltip_enabled } } }; return config; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div class="col-lg-6" style="text-align: center;"> <canvas id="my_chart" style="height: 160px; "></canvas> </div>

Answer 1

Please make sure to use max-height style on your canvas.

for example:

<canvas id=“my_chart" style="max-height: 160px;"></canvas>

Answer 2

还尝试以 % 值而不是像素给出高度和宽度。