Chartjs-Update/re-render Charts.js in Angular 4

by

0👍

I found a solution, i know it’s a hack, but for the moment it’s ok )))
So, basically i check if charts already exist in DOM, and if exist remove them and create new canvas elements.

private removeAction() {
  const block = document.querySelector('#chartsBlock');

   //remove
  while (block.firstChild) {
    block.removeChild(block.firstChild);
  }

   // create
  this.charts.forEach((chart, i) => {
    let canvas = document.createElement('canvas');
    canvas.id = `chart${i}`;
    block.appendChild(canvas);
  });
 }

0👍

You could try using ChangeDetectorRef:

import { ChangeDetectorRef } from '@angular/core';

constructor(private detector: ChangeDetectorRef) {}

ngOnChanges(changes: SimpleChanges) {
    const data = changes['data'].currentValue;
    this.draw(data);
    this.detector.detectChanges()
    // if detectChanges() doesn't work, try markForCheck()
}

Leave a comment