title: How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)
body: <p>I want to have a graph with changing every time but it's works when I zoom-in and zoom-out the page, but not when I do nothing.
  My goal is to have a graph who change every 5 secondes, or in real time but I don't know how I should do but I think it's not very complicated but I don't find the solution.</p>
  <p>Every 5 secondes, my data is update like :
  <code>[0,0,0,0,0,0,0,0,0,0]  =&gt; [0,0,0,0,0,0,0,0,0,4.5643]  =&gt; [0,0,0,0,0,0,0,0,4.5643,5.2161]</code> etc.</p>
  <p>Someone have a little idea ?
  Thank you in advance !</p>
  <p>Here my HTML code :</p>
  <pre><code>&lt;div class=&quot;doubleTrp&quot;&gt;
      &lt;canvas baseChart
              [chartType]=&quot;chartType&quot;
              [datasets]=&quot;[
                  {
                      data: graphikAir, label: 'Consommation Air'
                  }
               ]&quot;
              [labels]=&quot;['-10', '-9', '-8', '-7', '-6', '-5', '-4', '-3', '-2', '-1']&quot;
              [colors]=&quot;[{
                backgroundColor: ['rgb(130, 230, 0)'],
                hoverBackgroundColor: ['rgb(185, 30, 30)'],
                borderWidth: 1
              }]&quot;
              [options]=&quot;{
                responsive: true
              }&quot;
      &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here my TS code :</p>
  <pre><code>import {Component, OnInit, OnDestroy} from '@angular/core';
  import {ChartData, ChartType} from 'chart.js';
  import { LineService } from '../services/line.service';
  import {ActivatedRoute} from '@angular/router';
  import {combineLatest, Subscription} from 'rxjs';
  import {filter, map} from 'rxjs/operators';
  
  @Component({
    selector: 'app-conso-graph',
    templateUrl: './conso-graph.component.html',
    styleUrls: ['./conso-graph.component.scss']
  })
  export class ConsoGraphComponent implements OnDestroy{
  
    lineSubscription: Subscription;
    lineSubscription2: Subscription;
    graphikAir: number[];
    graphikElec: number[];
    chartType: ChartType;
    chartData: any;
  
    constructor(private lineService: LineService,
                private route: ActivatedRoute) {
      this.chartIt();
    }
  
    _focusedData$ = combineLatest(
      this.lineService.lineSubject.pipe(filter(x =&gt; x.length &gt; 0)),
      this.route.params.pipe(filter(x =&gt; !!x.id), map(x =&gt; x.id -1))
    ).pipe(
      map(([csvs, id]) =&gt; csvs[id])
    );
  
    gestionData(): void {
      this.lineSubscription = this._focusedData$.subscribe(x =&gt; this.graphikAir = x.graphAir);
      this.lineSubscription2 = this._focusedData$.subscribe(x =&gt; this.graphikElec = x.graphElec);
    }
  
    async chartIt() {
      await this.gestionData();
  
      this.chartType = 'line';
  
      this.chartData = [
        {
          data: this.graphikAir, label: 'Consommation Air'
        }
      ];
    }
  
    chartClicked(e: any): void { }
    chartHovered(e: any): void { }
  
    ngOnDestroy(): void {
      this.lineSubscription.unsubscribe();
      this.lineSubscription2.unsubscribe();
    }
  
  }
  </code></pre>