chart.js onClick event function, access angular component

Question

How to grab angular component on onClick function of a ChartJs function? is there a way? as this is the Chart, self the window...

My chart is added like that into the some.component.ts

 @ViewChild(Chart) mainChart: Chart // declaration on public variables on component.ts

  // construction of chart on API call result
  this.mainChart = new Chart(MeasureUnitMonthlyComponent.CHART_ID, {
    type: 'bar',
    data: {
      labels: aChartLabelsArray,
      datasets: aDatasetsArray
    },
    options: {
      onClick: this.onChartClicked,
      legend: {
        display: true
      },
    ....

That TS doesn't look alike an Angular component; define that chart as `@ViewChild`... then it has a parent component. — Martin Zeitler, Sep 07 '20 at 21:01
@MartinZeitler thx, updated but still dont know how to grab it. Updated the screenshot — Pipo, Sep 07 '20 at 22:07

AliF50 · Answer 1 · 2020-09-08T03:18:26.833

If you write, onClick: () => {}, this will be the component/class when writing an arrow function.

If you write, onClick: function() {}, this will be the chart object.

If you want access to both the chart object and component/class, I would use the utility of thisAsThat linked below and explained as well.

TypeScript: How to use both fat arrow and this?

For onClick: you can use the utility of thisAsThat that's present in the answer where this will be the class/component and that will be the chart object.

I would also consider using ng2-charts which is a wrapper around chart.js where it has a (chartClicked) event.

Chart.js & Angular 2 - ng2-charts Custom on Click Event

chart.js onClick event function, access angular component

1 Answers1