ng2modules-easypiechart

Angular 2 wrapper for easypiechart plugin.

Get Started

installation

1. Install ng2modules-easypiechart using npm

$ npm i ng2modules-easypiechart

2. Install easy-pie-chart library using npm

$ npm i easy-pie-chart

3. Include easy-pie-chart library in application via html, angular-cli or webpack

<script src="node_modules/easy-pie-chart/dist/easypiechart.js"></script>

Usage

Import the module to your module:

import { EasyPieChartModule } from 'ng2modules-easypiechart';

// In your app's module
imports: [
  EasyPieChartModule
]

Use the easyPieChart directive into your component template:

<easy-pie-chart [percent]="percent" [options]="options"></easy-pie-chart>

@Component({})
export class MyComponent {
  public percent: number;
  public options: any;

  constructor() {
    this.percent = 80;
    this.options = {
      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.