Skip to content
Angular 1.5 component for svg based piecharts
JavaScript Makefile CSS Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
examples
js
.gitignore
.npmignore
LICENSE
Makefile
Makefile.in
README.in
README.md
bower.in
bower.json
package.in
package.json
version

README.md

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

You can’t perform that action at this time.