Solution 1 :

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

for example:

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

Solution 2 :

Also try giving height and width in % values rather than pixels.

Problem :

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 i want

this is what happens when i zoom:
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=""></script>
<div class="col-lg-6" style="text-align: center;">
  <canvas id="my_chart" style="height: 160px; "></canvas>


Comment posted by

Here we love to see some code. Please can you provide yours? Also please take a momant to read this guide “How to ask a good question?” here :

Comment posted by HeadhunterKev

Look at the