Skip to content

jcubic/angular.piechart

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Angular Piechart 0.2.8

Angular piechart is a angular component that create svg based piecharts.

Based on Lea Verou Designing Flexible, Maintainable Pie Charts With CSS And SVG

Demo

installation

to install you can grab the files from the repo or install from

bower

browser install angular.piechart --save

npm

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:

License

Licensed under MIT license

Copyright (c) 2016 Jakub T. Jankiewicz

About

Angular 1.5 component for svg based piecharts

Resources

License

Stars

Watchers

Forks

Packages

No packages published