title: Chart.js and Angular - Click Event on Chart
body: <p>I am using Chart.js to create a line graph for some data. I want to be able to select a point on the graph and then below load more data that is associated with that data point. I am a bit stuck on how to do this.</p>
  
  <p>In profile.component.html I have</p>
  
  <pre><code>&lt;canvas [lineGraph]="graphData" width="700" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>In graph.directive.ts (some code cut to make it short) I have</p>
  
  <pre><code>@Directive({
      selector: '[lineGraph]'
  })
  
  export class LineGraphDirective {
      @Input('lineGraph') data:any;
  
      el:any;
      myChart:any;
  
      constructor(element:ElementRef) {
          this.el = element.nativeElement;
      }
  
      ngAfterViewInit() {
          this.generateLineGraph();
      }
  
      private generateLineGraph() {
          var canvas = this.el;
  
          var _data = {...load data here from data input};
  
          var _options = {...get options here};
  
          this.myChart = new Chart(canvas.getContext('2d'), {
              type: 'line',
              data: _data,
              options: _options
          });    
      }
  }
  </code></pre>
  
  <p>I also have a profile.component.ts file but I am omitting all code for now as it doesn't seem important right now.</p>
  
  <p>What I have tried</p>
  
  <p>I tried putting </p>
  
  <pre><code>canvas.onclick = function (event) {
      ... code to get the point clicked on such as 
      this.myChart.getPointsAtEvent( event )
  };
  </code></pre>
  
  <p>in graph.directive.ts but myChart is null then. I was placing that in generateLineGraph() as that seemed the only place I could put it. </p>
  
  <p>I tried putting 
      (click)="chartClick($event)"
  into profile.component.html so it would be </p>
  
  <pre><code>   &lt;canvas [lineGraph]="graphData" width="700" height="400" (click)="chartClick($event)"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>and then a chartClick function in profile.component.ts but then I don't know how to get a reference to the chart in graph.directive.ts.</p>
  
  <p>What would be the best approach to solve this problem?</p>