Chartjs-Loading multiple doughnut chart from chart.JS in a single component of angular 6

chart component HTML:-

<canvas id="{{uniqueId}}"></canvas>

or

<canvas [id]="uniqueId"></canvas>

Chart component ts :

import { Component, OnInit, Input,ViewChild,AfterViewInit } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
  selector: 'app-chart-component',
    templateUrl: './chart-component.component.html',
    styleUrls: ['./chart-component.component.css']
  })
  export class ChartComponentComponent implements OnInit, AfterViewInit {
    chart: any;
    uniqueId: any;
    @Input() data: any;
    @Input() id:number;
    @ViewChild('canvas', { static: false }) canvas: ElementRef;
    public context: CanvasRenderingContext2D;
    constructor() { }

    ngOnInit() {}

    ngAfterViewInit() {
      this.context = (<HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
      this.uniqueId = 'canvas'+this.id;
      this.chart = new Chart(this.context, {
        type: 'doughnut',
        data: {
          labels: this.data.labels,
          datasets: this.data.datasets
        },
        options: {
          cutoutPercentage: 85,
          rotation: 1 * Math.PI,
          circumference: 1 * Math.PI,
          legend: {
            display: false,
          },
          tooltips:{
            enabled:true,
            titleFontSize: 26,
            bodyFontSize: 26
          }
              }
      });
    }

  }

chart component HTML:

<canvas #canvas [id]="uniqueId"></canvas>