[Chartjs]-Chartjs small offset on top

by

2👍

✅

This is because you did not disable the legend, title or tooltip. If you hover your chart you can see the tooltip is still working, title is hidden by default. Why the legend does not show I dont really know, should still show 1 item with undefined as text. But if you disable it in the correct space with is the plugins namespace you see your extra padding goes away.

Also cutout and responsive have to be configured in the options not in the root of new Chart:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;

var options = {
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false
    }
  },
  animation: {
    duration: 0
  },
  cutout: 100 * radius,
  responsive: true,
}

var data = {
  datasets: [{
    data: [50, 50],
    backgroundColor: ["blue", "red"],
    borderWidth: 0,
  }]
}


var chart =
  new Chart(context, {
    type: "doughnut",
    data: data,
    options: options

  });
<body>
  <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
    <div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
      <canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Leave a comment