Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 62
  • Last Modified:

Implmenting Pie Charts in Angularjs

How do you implement pie charts in angularjs.
0
Member_2_7967608
Asked:
Member_2_7967608
  • 2
1 Solution
 
Julian HansenCommented:
You need a library to do this AngularJS does not natively support Pie Charts

A Google search should produce results on this.

I had a look at this one https://jtblin.github.io/angular-chart.js/

It appears to be well supported, is built for Angular and includes examples on how to create a Pie Chart.

From their sample page
HTML
<canvas id="pie" class="chart chart-pie"
  chart-data="data" chart-labels="labels" chart-options="options">
</canvas> 

Open in new window

JavaScript
angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

Open in new window

0
 
Member_2_7967608Author Commented:
Thanks
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now