title: Loading multiple doughnut chart from chart.JS in a single component of angular 6
body: <p>I have a component in which i have to show 2 doughnut chart. and then i have another component which will load the chart after getting the dataset from previous component.
  after passing different data and different id none of the charts are getting loaded.</p>
  
  <p>Here is my code :-
  parent component HTML:-</p>
  
  <pre><code>&lt;div class="card chart radial-chart match-time col-sm-3"&gt;
          &lt;label class="card-title"&gt;Match Time&lt;/label&gt;
          &lt;app-chart-component [data]='matchingChartData' [id]=1&gt;&lt;/app-chart-component&gt;
      &lt;/div&gt;
      &lt;div class="card chart radial-chart passage-time col-sm-3"&gt;
          &lt;label class="card-title"&gt;Passage Time&lt;/label&gt;
          &lt;app-chart-component [data]='PassagerChartData' [id]=2&gt;&lt;/app-chart-component&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>parent component ts : - </p>
  
  <pre><code>matchingChartData = {
  labels : ['Minimum','Maximum', 'Average'],
  datasets: [
    { 
      data: [2.4,2.8, 5],
      backgroundColor: ['blue','red','green' ]
    },
  ]
  </code></pre>
  
  <p>};</p>
  
  <pre><code> PassageChartData = {
  labels : ['Minimum','Maximum', 'Average'],
  datasets: [
    { 
      data: [2.4,2.8, 2.6],
      backgroundColor: ['green','red','yellow' ]
    },
  ]
  </code></pre>
  
  <p>}</p>
  
  <p>chart component HTML:-</p>
  
  <pre><code>&lt;canvas id={{uniqueId}}&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Chart component ts :-</p>
  
  <pre><code>import { Component, OnInit, Input } 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 {
      chart: any;
      uniqueId: any;
      @Input() data: any;
      @Input() id:number;
      constructor() { }
  
      ngOnInit() {
        this.uniqueId = 'canvas'+this.id;;
        this.chart = new Chart('canvas', {
          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
            }
                }
        });
      }
  
    }
  </code></pre>