How to create a custom directive that integrates with external charting libraries

Question

Can Someone help me regarding How to create a custom directive that integrates with external charting libraries?

Answer 1

Compact Directive for External Chart Integration

import { Directive, ElementRef, Input, OnChanges, OnDestroy } from '@angular/core';  

import * as ChartJS from 'chart.js';  

@Directive({  

  selector: '[appChart]'  

})  

export class ChartDirective implements OnChanges, OnDestroy {  

  @Input() config: any;  

  private chart: any;  

  constructor(private el: ElementRef) {}  

  ngOnChanges() {  

    if (this.chart) this.chart.destroy();  

    this.chart = new ChartJS.Chart(this.el.nativeElement, this.config);  

  }  

  ngOnDestroy() {  

    if (this.chart) this.chart.destroy();  

  }  

}  

Usage:

<canvas appChart [config]="chartConfig"></canvas>