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

Issue

I am trying to implement ng2-charts in my Angular 2 project and I was wondering about creating custom onclick events. Meaning, I want to override the current onclick events on the carts to do some custom functions (redirect to a page, have a modal show up, etc).

Is there a simple way to do this? Is it built in at all?

Any insight would be appreciated it

Solution

Try to read DOCS

They have pretty good and understandable explanation of use.

There-are built-in 2 event handlers:

Events

chartClick: fires when click on a chart has occurred, returns information regarding active points and labels

chartHover: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels

---

In code it looks like that:

 <base-chart class="chart"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="lineChartOptions"
            [colors]="lineChartColours"
            [legend]="lineChartLegend"
            [chartType]="lineChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></base-chart>
  </div>

that chartHovered and chartClicked are your custom functions, which could has another names, and do custom things like showing modal, redirect to url etc.

Answered By - Anton Temchenko