title: Angular 2 custom directive not binding sparkline barChart
body: <p>I am trying to write custom directive to pass input values and then bind data to the sparkline chart but it gives me error:</p>
  
  <blockquote>
    <p>sparkline is not a function. </p>
  </blockquote>
  
  <p>Below is the plunker:</p>
  
  <pre><code> import { Directive, ElementRef, HostListener, Input , OnInit } from '@angular/core';
  
  @Directive({
    selector: '[myBarChart]'
  })
  export class BarChartDirective {
    private el: HTMLElement;
  
    @Input('myBarChart') barChartValues: number[] = [];
  
    constructor(el: ElementRef) { this.el = el.nativeElement; }
  
    ngOnInit() {
    this.el.sparkline(this.barChartValues, {
      type: 'bar', barColor: 'green', width: 300, height: '50',
      barWidth: 8, barSpacing: 3, colorMap: ["green", "yellow", "red"], 
      chartRangeMin: 0
    });
   }
  }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv" rel="nofollow noreferrer">http://plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv</a></p>