Dibshare Dibshare - 29 days ago 8
jQuery Question

Angular 2 easy pie chart not working

I am trying to convert my existing jquery easy-pie-chart to Angular 2. As I am finding it difficult to completely rewrite entire code, I am trying to modify in bits and pieces.

Now to convert existing code I have done this (earlier it was inner-html but event binding not working in Angular 2) .

<div class="col-md-2" style="text-align:center;" *ngFor="let piedata of piemasterData">
<label (click)="getData(piedata[1])" > {{piedata[1]}} </label>

<div class="chart" data-percent= piedata[7] >
<span class="percent">


Then I am calling



Now the problem is the easy-pie-chart is not taking the value set in
. Hence its only showing a dot.

enter image description here .

For example here ABC should take
and gauge the same value. Further after inspect elementing I saw the
. I tried many combinations
but still the value is not reflecting. I am not sure how to fix this in Angular 2.

Answer Source

Since i'm in a good mood, here's a directive you can use to display pies :

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import * as EasyPieChart from '../vendors/easypiechart.min.js'

  selector: 'easy-pie-chart'
export class EasyPieChartDirective implements OnInit {

  private pie: any;
  private _percent: number;

  set percent(value) {
    this._percent = value;
    if (this.pie)
  get percent() { return this._percent };

  options: any;

  constructor(private element: ElementRef) {

  ngOnInit() {
    this.pie = new EasyPieChart(this.element.nativeElement, this.options);

You could use it like this:

<easy-pie-chart [options]="{/*Your options goes here*/}" [percent]="piedata[7]">{{piedata[7]}}</easy-pie-chart>

This will also live update the chart if piedata[7] changed.

You will have to add "allowJs": true in the compiler options of tsconfig.json to make it work