How to make Pie chart in AngularJS - angularjs

Question

I am trying to make a pie chart based on the value of variables in the controller plz suggest easiest way to implement this.

Answer 1

You can use
1) Angular chart (using Chart.js)
2) angular directives for commonly used d3 charts
3) AngularJS Directive
4) An AngularJS directive for NVD3 re-usable charting library (based on D3).
5) Google Charts also use with AngularJS
I hope this will help you...

Answer 2

I hope this answer will help you. Using Angular charts you can make a pie chart or any other chart
Angular Chart
npm install angular-chart.js --save
It requires only 2 dependencies angularjs and chartjs
Angular nvD3 chart
{ "chart": {
"type": "pieChart",
"height": 500,
"showLabels": true,
"duration": 500,
"labelThreshold": 0.01,
"labelSunbeamLayout": true,
"legend": {
"margin": {
"top": 5,
"right": 35,
"bottom": 5,
"left": 0
}
}
}
}

Answer 3

You can use Highchart API with angular js
https://www.npmjs.com/package/angular2-highcharts
You can use alos Highchart without angular js to draw Pie chart ->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});