Not able to show graph on click of a button

Graph is not displayed on click. I have

I have two child components

  1. Data component for showing the list of employees
  2. Rating component for showing employee’s respective rating

I have put ‘graph code’ inside ‘ngOnInit’ function in Rating component, and click button is in Data component, with help of event emitting i am trying to pass a boolean value from Data to Rating .
As you can see below in rating.component.html, if the flag value becomes true, then show graph. But even after flag becomes true, graph is not visible.

Data component

import { DataService } from './../../services/data.service';
import { Component, OnInit, Output, EventEmitter} from '@angular/core';



@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
})
export class DataComponent implements OnInit {
  users: { name: string; city: string }[] = [];
  visible = false;
  @Output() show  = new EventEmitter();
  constructor(private dataSerivce: DataService) {}

  ngOnInit(): void {
   this.users = this.dataSerivce.getEmployees();
  }
  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      console.log('enter');
      this.show.emit(this.visible);
    } else {
      this.show.emit(null);
    }
  }

}

Rating component


import { Rating } from './../../../../models/rating.model';
import { DataService } from 'src/app/services/data.service';
import { Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Chart} from '../../../../node_modules/chart.js';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit ,OnChanges{

   rating: Rating[] = [];
   @Input() flag = false;


  constructor(private dataService: DataService) { }

  ngOnInit() {
    console.log('init');
    var myChart= new Chart('myChart', {
      type: 'bar',
      data: {
          labels: ['Technical', 'Communication', 'Experience', 'Leadership'],
          datasets: [{
              label: 'skill scores',
              data: [10,15, 16, 22],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)'

              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'

              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  }

  ngOnChanges(changes: SimpleChanges){
       console.log('first time');

  }

  private getRatings($event){

       this.dataService.getRating().subscribe(res =>{
           this.rating.push(res);
       });
  }



}

Rating html code

import { Rating } from './../../../../models/rating.model';
import { DataService } from 'src/app/services/data.service';
import { Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Chart} from '../../../../node_modules/chart.js';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit ,OnChanges{

   rating: Rating[] = [];
   @Input() flag = false;


  constructor(private dataService: DataService) { }

  ngOnInit() {
    console.log('init');
    var myChart= new Chart('myChart', {
      type: 'bar',
      data: {
          labels: ['Technical', 'Communication', 'Experience', 'Leadership'],
          datasets: [{
              label: 'skill scores',
              data: [10,15, 16, 22],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)'

              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'

              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  }

  ngOnChanges(changes: SimpleChanges){
       console.log('first time');

  }

  private getRatings($event){

       this.dataService.getRating().subscribe(res =>{
           this.rating.push(res);
       });
  }



}

````````````````````````

Source: New feed
Source Url Not able to show graph on click of a button