charts integration in angular9

html file
====================
<canvas id="chartInfo" width="1320" height="400"></canvas>

ts file

====================

import { Component,OnInit} from '@angular/core';

import * as Chart from 'chart.js';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  canvas: any;

  ctx: any;

  

  constructor() {

  }

  ngOnInit(){

    this.canvas = document.getElementById('chartInfo');

    this.ctx = this.canvas.getContext('2d');

    let chartInfo = new Chart(this.ctx, {

      type: 'pie',

      data: {

        labels: ["Saikrishna","Avinash","Kiran","Ashwith","Murali","Moheed","Mohan","Vivek","Mallikarjun"],

        datasets: [{

          label: 'Total cases.',

          data: [100,90,87,97,101,120,111,121,100],

          backgroundColor: ["red", "Orange","green" ,"Black" ,"Yellow" , "violet","Blue" ,"Brown" , "black"],

          borderWidth: 1

        }]

      },

      options: {

        legend: {

          display: false

        },

        responsive: false,

        display: true

      }

    });

  }

  }