Chartjs-Gap between half doughnut chart and container div

by

1👍

✅

It’s a bit of a hacky solution, but setting layout.padding to -10 fits your doughnut more neatly in your container:

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      label: "Dataset #1",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 20, 81, 56, 55, 40]
    }
  ]
};

var option = {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  responsive: true,
  aspectRatio: 2,
  title: { display: false },
  legend: { display: false },
  layout: {
    padding: -10
  },
  scales: {
    xAxes: [
      {
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks: {
          display: false
        }
      }
    ],
    yAxes: [
      {
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks: {
          display: false
        }
      }
    ]
  }
};

Chart.Doughnut("chart_0", {
  options: option,
  data: data
});
body {  
  background: white;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<div class="chart-container" style="position: relative; height:16vh; width:32vh">
<canvas id="chart_0"></canvas>
</div>

-1👍

I got it centered by removing the inline styles and adding them to the class attached to the div.

I also added the layout.padding into your options.

layout: {
  padding: {
   left: 0,
   top: 10,
   right: 10,
   bottom: 0
}},

Adding codepen for reference. https://codepen.io/robert9111/pen/abNVxWY

Leave a comment