<div class="parent" >
  <img src="black.png" type="button" (click)="displayChild()"/>
  <my-child [displayDetail]="displayMe"></my-child>
 </div>

displayChild() {
     this.displayMe = !this.displayMe;

<div class="chart-pie">
     <chart [options]="options" (load)="saveInstance($event.context)"
     </chart>
</div>

@Input() showMePartially: boolean;
 options: any;
 data: Object[];
 chart: any;

dataSubscription: Subscription;

 constructor(private userService3: UserService3) {

       this.options = {
        chart: {  type: 'pie',
        series: [{
          name: 'Dispo',
          data: []
          }]
       };

   saveInstance(chartInstance) {
   this.chart = chartInstance;
   console.log(chartInstance);
 }

    public ngOnInit () {
    this.dataSubscription =
this.userService3.getData().subscribe((data) => {
  this.options.series[0].data = data.data.operating_rate;
   // Code for the pie

    let percentUp = data.data.operating_rate; // 88.14
    let percentDown = 100 - percentUp; // 11.86
    this.options.series[0].data = [
    {
    name: 'Up',
    y: percentUp,
    color: '#648e59'
    },
    {
    name: 'Down',
    y: percentDown,
    color: 'white'
    }
    ];
  console.log(data);
   });
}
   public ngOnDestroy() {
   if (this.dataSubscription) {
 this.dataSubscription.unsubscribe();
 }
  }
}