Chartjs-Rendering a chart.js component twice in a page

by

0👍

✅

Don’t use:

var chartEle=(<HTMLCanvasElement>document.getElementById("myChart")).getContext("2d")

Just define a canvas in your component template and then use @ViewChild to get a reference to it:

@Component({
  selector: 'app-bar-chart',
  template: `
    <div>
      <canvas style="width: 100%; height: 400px;" #canvas id="canvas"></canvas>
    </div>`,
})

@ViewChild('canvas') canvasRef: ElementRef;
this.ctx = this.canvasRef.nativeElement.getContext('2d');

this.chart = new Chart(this.ctx, {...

Leave a comment