This package has been deprecated

Author message:

Package no longer supported. Contact Support at for more info.

TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published


Angular 2 wrapper for easypiechart plugin.

Get Started


  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>


Import the module to your module:

import { EasyPieChartModule } from 'ng2modules-easypiechart';
// In your app's module
imports: [

Use the easyPieChart directive into your component template:

<easy-pie-chart [percent]="percent" [options]="options"></easy-pie-chart>
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.

Package Sidebar


npm i ng2modules-easypiechart

Weekly Downloads






Last publish


  • npm