ng2modules-easypiechart

Angular 2 wrapper for easypiechart plugin.

installation

1. Install ng2modules-easypiechart using npm

$ npm i ng2modules-easypiechart

1. Install easy-pie-chart library using npm

$ npm i easy-pie-chart

1. 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
      }
    };
  }
}

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.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.