[Chartjs]-Angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?

by

7👍

✅

You just need to set the “cutoutPercentage” option in your chart-options. The default value for a doughnut chart is 50. Numbers closer to 100 will have more empty space in the middle, numbers closer to 0 will have less empty space in the middle of the doughnut.

In your controller:

$scope.options = {cutoutPercentage: 75};
$scope.data = [213, 546];
$scope.labels = ['Label 1', 'Label 2'];

In you html:

<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options"> </canvas>

Leave a comment