Styling AngularJS Pie Charts

Question

Styling AngularJS Pie Charts

Is it possible to customize the appearance of a pie chart created with angularjs-chart in order to achieve a design similar to this:

https://i.sstatic.net/xYcu9.png

While there are some examples available on the angularjs-chart website, one particular example stands out:https://i.sstatic.net/XXRqb.png

This specific design would suit my requirements perfectly, but I need to adjust the color and make the lines thinner to match the image above.

I attempted to use chart-colors and chart-options. However, the former does not seem to be effective and I am unsure how to utilize the options feature.

Below is the code snippet:

In the controller:

app.controller('DashboardController', function DashboardController ($scope) {
    $scope.labels = ["Download Sales"];
    $scope.data = [100];
});

In HTML:

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

However, the resulting chart differs from my expectations:https://i.sstatic.net/KI5r9.png

javascript html css angularjs chart.js

Answer 1

Answer №1

Initially, ensure that your $scope.data array is set up like this...

$scope.data = [
   [100]
];

To customize the color of a pie or doughnut chart, specify the backgroundColor property with an array of color values in $scope.datasetOverride

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

If you want to adjust the thickness of the line, assign a number to the cutoutPercentage property in $scope.options

$scope.options = {
   cutoutPercentage: 80
}

Don't forget to include the chart-dataset-override directive in your HTML markup.

:: See a demonstration below ::

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

app.controller("DashboardController", function($scope) {
   $scope.labels = ["Download Sales"];
   $scope.data = [
      [100]
   ];
   $scope.options = {
      cutoutPercentage: 80 //customize this as needed
   }
   $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>

Answer 2

Initially, ensure that your $scope.data array is set up like this...

$scope.data = [
   [100]
];

To customize the color of a pie or doughnut chart, specify the backgroundColor property with an array of color values in $scope.datasetOverride

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

If you want to adjust the thickness of the line, assign a number to the cutoutPercentage property in $scope.options

$scope.options = {
   cutoutPercentage: 80
}

Don't forget to include the chart-dataset-override directive in your HTML markup.

:: See a demonstration below ::

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

app.controller("DashboardController", function($scope) {
   $scope.labels = ["Download Sales"];
   $scope.data = [
      [100]
   ];
   $scope.options = {
      cutoutPercentage: 80 //customize this as needed
   }
   $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>

Styling AngularJS Pie Charts

Answer №1

Similar questions

Utilize the jQuery function as a callback argument

Resolve the issue of Dojo images not appearing on a div in Internet Explorer

If I do not utilize v-model within computed, then computed will not provide a value

Is there a way to display a PHP error message while submitting the form asynchronously?

Unlocking the potential of a local mongoDB database in an Angular application without the need for a server - a truly client-side experience with the MAN stack

Is there a bug in IE9 with CSS precedence?

Tips on utilizing the useState hook for storing numerous key objects?

Error encountered due to an unhandled promise rejection of type

Error: The <Class> cannot be accessed until it has been initialized

Microsoft Edge and Google Fonts display strong and distinctive lettering

Is there a way to transform data from a CSV format to a JSON format?

The Ineffectiveness of the Form Class

Optimal method for showcasing a multitude of columns on an HTML page

Disable the parent CSS styling when focusing on the child button

How to Implement Custom Header in AngularJs during Initialization

Tips on invoking a Stencil component function or method from beyond the Vue instance

Transforming the data from my Event Viewer into a sleek and functional HTML table

Attempting to incorporate a border underneath the H1 title labeled MY TODO LIST

Update button text in real-time using JavaScript

The object you are attempting to use does not have the capability to support the property or method called 'after'