Angular piechart is a angular component that create svg based piecharts.
Based on Lea Verou Designing Flexible, Maintainable Pie Charts With CSS And SVG
to install you can grab the files from the repo or install from
browser install angular.piechart --save
npm install angular.piechart --save
include the files:
<script src="js/angular.piechart.min.js"></script>
<link href="css/angular.piechart.min.css" rel="stylesheet"/>and you can use this code to initialize the plugin:
<piechart ng-model="vm.data"></piechart>function controller() {
this.data = {
color: '#1F187A',
data: [
{
color: 'red',
value: 10 // 10%
},
{
color: 'green',
value: 20 // 20%
},
{
color: 'blue',
value: 30 // 30%
},
{
color: 'yellow',
value: 40 // 40%
}
]
};
}You can also inject stuff into piechart component it will be added after piechart so it will be on top.
For instance to add donat chart you can add another circle:
Licensed under MIT license
Copyright (c) 2016 Jakub T. Jankiewicz