[Chartjs]-Chartjs not following height when parent's height is 200px

by

2👍

✅

Since you haven’t provided a working example of your problem it can’t be directly solved.

The result you want is possible, so here’s a snippet showing a doughnut chart sized to exactly 200px by 200px (I’ve added a background-color to the div for clarity):

new Chart(document.getElementById("chart"), {
  type: "doughnut",
  data: {
    datasets: [{
      data: [1, 4]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    hover: {
      mode: false
    }
  }
});
div {
  background-color: #ccf;
  width: 200px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
  <canvas id="chart"></canvas>
</div>

Leave a comment