title: OnClick event on Custom legends Chart.js / Angular 5
body: <p>I'm working on a project using Angular 5 and Chart.js.
  I needed to create custom legends into my charts so I follow this git issue to help me a bit: <a href="https://github.com/chartjs/Chart.js/issues/2565" rel="nofollow noreferrer">Github Issue Chart.js</a>.</p>
  
  <p>It was very helpful and It worked as expected only with pure javascript, but trying to reply the example into Angular 5 App just doesn't work, it throws me <strong><em>this.updateDataset() is not a function</em></strong>.
  Here is a snippet of what I'm currently doing into the <strong>options</strong> <a href="http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends" rel="nofollow noreferrer">object of Chart.js library</a>:</p>
  
  <pre><code>legendCallback: (chart) =&gt; {
          const legendHtml = [];
          legendHtml.push('&lt;table&gt;');
          legendHtml.push('&lt;tr&gt;');
          for (let i=0; i&lt;chart.data.datasets.length; i++) {
              const color    = chart.data.datasets[i].borderColor;
              const legendId = 'linear-d'+i;
              legendHtml.push(
                  '&lt;td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')"&gt;' +
                  '&lt;div id="'+legendId+'-square" style="background-color:' + color +'; border: 2px solid ' + color +'; width: 15px; height: 15px;"&gt;&lt;/div&gt;' +
                  '&lt;/td&gt;'
              );
              if (chart.data.datasets[i].label) {
                  legendHtml.push('&lt;td id="'+legendId+'-text" style="cursor: default; font-size: 12px;" onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')"&gt;' + chart.data.datasets[i].label + '&lt;/td&gt;');
              }
          }
          legendHtml.push('&lt;/tr&gt;');
          legendHtml.push('&lt;/table&gt;');
          return legendHtml.join("");
      },
  </code></pre>
  
  <p>So the important part is this one <code>'&lt;td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')"&gt;'</code> where the <strong>onclick</strong> is trying to call <strong>this.updateDataset()</strong>.</p>
  
  <p>How should I call the function <strong>updateDataset()</strong> into the <em>onclick</em> event of the element or how should I declare the function so I could access to it from the <em>onclick</em> event.</p>