Search code examples
angularjschart.jsangular-chart

angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?

I am using angular-chart.js library(https://jtblin.github.io/angular-chart.js/ ) for implementing doughnut chart.

How do I change width of the arc of a doughnut?

Solution

  • 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>