Chartjs-Angular js pie chart styling

by

2👍

✅

First off, your $scope.data array should be …

$scope.data = [
   [100]
];

To set / change the color of pie / doughnut chart, set backgroundColor property to an array of color value­(s), in $scope.datasetOverride

$scope.datasetOverride = [{
   backgroundColor: ['#67d2c4']
}];

and, to make the line thinner, set cutoutPercentage property to a number­(thinness) in $scope.options

$scope.options = {
   cutoutPercentage: 80
}

also, make sure to add the chart-dataset-override directive in your HTML markup.

:: working example ::

var app = angular.module('app', ['chart.js']);

app.controller("DashboardController", function($scope) {
   $scope.labels = ["Download Sales"];
   $scope.data = [
      [100]
   ];
   $scope.options = {
      cutoutPercentage: 80 //set as you wish
   }
   $scope.datasetOverride = [{
      backgroundColor: ['#67d2c4']
   }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="DashboardController">
   <canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>

Leave a comment