How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart

Question

I want to remove the space between two Doughnut charts so they can touch each other.

Notice that width of canvas of the chart is bigger than the doughnut. Seems like the canvas keeps using the width of a full-size doughnut. How to remove the padding inside the canvas so that the canvas has same width as the chart?

the image highlights the canvas

  <div id="containter">
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>
    <div id="canvas-holder-2" style="width:40%">
        <canvas id="chart-area-2" />
    </div>
  </div>

https://jsfiddle.net/chan24092005/d128ks5q/3/

Burhan Burhan · Accepted Answer · 2018-12-28T06:16:03

You can use the padding property to "push" the doughnuts towards each other.

For left doughnut:

options: {
    legend: {
        display: false
    },
    circumference:1 * Math.PI,
    rotation: -1.5 * Math.PI,
    layout: {
        padding: {
            left: 150
        }
    }
}

For right doughnut:

options: {
    legend: {
        display: false
    },
    circumference:1 * Math.PI,
    rotation: -0.5 * Math.PI,
    layout: {
        padding: {
            right: 150
        }
    }
}

Result:

JSFiddle

How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart

1 Answers