<div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
  class="col-md-7">
  <app-pie-chart [series]="allocation_series"></app-pie-chart>
</div>

public getAllocationsDetails(evalDate: string) {
        if (this.ManagerStrategyId != null) {
            this.initGrid();

             //  this.spinner.show();
            this.allocationsService.getAllocationsDetails(this.ManagerStrategyId, evalDate)
                .subscribe(data => {
                    this.AllocationDetails = data;
                    this.GridOptions.rowData = this.AllocationDetails;
                    this.allocation_series = this.AllocationDetails.ChartData;


                  if(!this.AllocationDetails.ManagerAllocations || !this.AllocationDetails.ManagerAllocations.length) {

                    this.GridOptions.suppressNoRowsOverlay = true;
                    //this.GridOptions.api.showNoRowsOverlay();
                  } else {
                    this.FirmName = this.AllocationDetails.ManagerAllocations[0].FirmName;
                  }

                    this.ColumnDefs = this.getColumns();
                  //  this.spinner.hide();

                    setTimeout(() => {
                        this.GridOptions.api.sizeColumnsToFit();
                    }, 100, true);
                },
                    err => {
                        this.Error = 'An error has occurred. Please contact BSG';
                    },
                    () => {
                    });
        }
    }

import { Component, NgZone, Input } from '@angular/core';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
am4core.useTheme(am4themes_animated);




@Component({
  template: ` <div id="chartdiv"  [style.width.%]="100"  [style.height.px]="500" > "hideCredits" : true</div>`,
  selector: 'app-pie-chart'
})
export class PieChartComponent implements AfterViewInit, OnDestroy {
  private chart: am4charts.PieChart;
 // @Input() series: any;

  _series: any;
  get series(): any {
    return this._series;
}

@Input('series')
set series(value: any) {
    this._series = value;

}

  constructor(private zone: NgZone) { }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      const chart = am4core.create('chartdiv', am4charts.PieChart);
      chart.responsive.enabled = true;


    if (this.series) {
        chart.data = this.series;
        const pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = 'Percent';
        pieSeries.dataFields.category = 'ProductName';


        pieSeries.colors.list = [
          am4core.color('#717171'),
          am4core.color('#62B1D0'),
          am4core.color('#3AA6D0'),
          am4core.color('#024C68'),
          am4core.color('#226078'),
          am4core.color('#717171'),
          am4core.color('#62B1D0'),
          am4core.color('#3AA6D0'),
          am4core.color('#024C68'),
          am4core.color('#226078'),
          am4core.color('#717171'),
          am4core.color('#62B1D0'),
          am4core.color('#3AA6D0'),
          am4core.color('#024C68'),
          am4core.color('#226078'),

     ];



       this.chart = chart;
      }
    });
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }
}