ng2modules-easypiechart
Angular 2 wrapper for easypiechart plugin.
Get Started
installation
- Install
ng2modules-easypiechart
using npm
$ npm i ng2modules-easypiechart
- Install
easy-pie-chart
library using npm
$ npm i easy-pie-chart
- Include
easy-pie-chart
library in application viahtml
,angular-cli
orwebpack
Usage
Import the module to your module:
; // In your app's moduleimports: EasyPieChartModule
Use the easyPieChart directive into your component template:
@ public percent: number; public options: any; { thispercent = 80; thisoptions = barColor: '#ef1e25' trackColor: '#f9f9f9' scaleColor: '#dfe0e0' scaleLength: 5 lineCap: 'round' lineWidth: 3 size: 110 rotate: 0 animate: duration: 1000 enabled: true ; }
Options
Name | Default | Description |
---|---|---|
barColor | #ef1e25 | The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string. |
trackColor | #f9f9f9 | The color of the track, or false to disable rendering. |
scaleColor | #dfe0e0 | The color of the scale lines, false to disable rendering. |
scaleLength | 5" | Length of the scale lines (reduces the radius of the chart). |
lineCap | round | Defines how the ending of the bar line looks like. Possible values are: butt , round and square . |
lineWidth | 3 | Width of the chart line in px. |
size | 110 | Size of the pie chart in px. It will always be a square. |
rotate | 0 | Rotation of the complete chart in degrees. |
animate | object | Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true } ), or false to deactivate animations. |
Callbacks
Callback (params, ...) | Description |
---|---|
onStart (from, to) | Is called at the start of any animation. |
onStep (from, to, currentValue) | Is called during animations providing the current value. |
onStop (from, to) | Is called at the end of any animation. |