CODEWITHSUNDEEP
javascriptjqueryhtmlchart.js
ruhi dağdelen
ruhi dağdelen

Reputation: 157

Doughnut chart adjusting problem in chart.js

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="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>

Upvotes: 4

Views: 1751

Answers (2)

Lash
Lash

Reputation: 11

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

Upvotes: 1

Aziz Kandemir
Aziz Kandemir

Reputation: 56

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

for example:

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

Upvotes: 4

Related Questions