title: Create multiple dynamic charts
body: <p>i'm developing a web application - MEAN stack. i'm trying to use ChartJS doughnut chart but i need it to be completely dynamic - first, the number of charts is dynamic (each chart represent something else) so sometimes it will be 3 and sometime 20. second, i want ti be able to access each of the charts for real-time data changing. does it even possible? i tried to create an array that will hold each of the charts data and use *ngFor to create each chart an canvas element but it didn't work.</p>
  
  <p><strong>my chartjs.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  import { Chart } from 'chart.js';
  import { pieceLabel } from 'chart.piecelabel.js';
  import {ElementRef} from '@angular/core';
  @Component({
  selector: 'app-chartjs',
  templateUrl: './chartjs.component.html',
  styleUrls: ['./chartjs.component.css']
  })
  export class ChartjsComponent implements OnInit {
  constructor( private _dataService : DataService, private elementRef: ElementRef) { 
  
  }
  jsons: any;
  NumberOfSystems: Number;
  charts = [];
  ngOnInit() {
  this._dataService.getData().subscribe(data =&gt; {
    this.jsons = data
    this.NumberOfSystems = this.jsons.data[0][1].systems.length
    this.createChartsData()
  }); 
  }
  createChartsData()
  {
  var array=[];
  for(var i =0; i&lt;this.NumberOfSystems;i++)
  {
  var pie ={
    type: 'doughnut',
    data: {
      labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&amp;Pols"],
      datasets: [
        {
          backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
          data: [20,20,20,20,20]
        }
      ]
    },
    options: {
      title: {
        display: false
      },
      animations: true,
      tooltips: {
        enabled: true
       },
       legend: {
        display: true
      }
    }
  };
  array.push(pie);
  }
  this.createCharts(array);
  }
  createCharts(pieData){
  for(var j = 0; j&lt;this.NumberOfSystems;j++)
  {
    let htmlRef = this.elementRef.nativeElement.select(`#canvas`+j);
    console.log(htmlRef);
    var tempChart = new Chart(htmlRef,pieData[j]);
    this.charts.push(tempChart);
  }   
  }
  }
  </code></pre>
  
  <p>and this is the <strong>chartjs.component.html:</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}"&gt;{{charts}}&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in this state, the ElementRef is null.  </p>