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

Question

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

score 19 · Answer 1 · answered Mar 05 '18 at 19:57

I found this solution at https://github.com/valor-software/ng2-charts/issues/489

public chartClicked(e: any): void {
if (e.active.length > 0) {
const chart = e.active[0]._chart;
const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
    // get the internal index of slice in pie chart
    const clickedElementIndex = activePoints[0]._index;
    const label = chart.data.labels[clickedElementIndex];
    // get value by index
    const value = chart.data.datasets[0].data[clickedElementIndex];
    console.log(clickedElementIndex, label, value)
  }
 }
}

score 11 · Accepted Answer · answered Jul 14 '16 at 16:20

11

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 Jul 14 '16 at 16:20

Anton Temchenko

1,440
1
13
28

3

yeah I saw that, thanks. What about getting data from what piece is actually clicked though? For instance, if you click on one bar (or piece of the pie) how can you access that data from the $event that ng2 is passing? I can't seem to find it looking through the console of the $event that it passes – blubberbo Jul 14 '16 at 16:28
For sure you have different `_index`-es on clicking or hovering random pieces of chart. `e.active[0]._index` – Anton Temchenko Jul 14 '16 at 16:35
1

thanks. I can see e.active[0] but I can't find within there where the actual data comes through. meaning, how can i tell from that event which actual button was clicked? – blubberbo Jul 14 '16 at 18:01
If a user wants to get the label value, while the label in the x axis is clicked and not the bar on the graph. Then how to achieve it – Sathish Kumar k k Apr 12 '21 at 17:08
I have got the solution for my question. I got the Y axis index, if the click is below zero index of Y axis. Then I will continue my logic. So now with the index of x axis that is clicked I can use this index to determine the Label of x axis. – Sathish Kumar k k May 25 '21 at 11:40
````yIndex = child.chart.scales['y-axis-0'].getValueForPixel(e.event.layerY); if (yIndex < 0) { xIndex = child.chart.scales['x-axis-0'].getValueForPixel(e.event.layerX); }```` – Sathish Kumar k k May 25 '21 at 11:43

score 0 · Answer 3 · answered Mar 31 '17 at 09:25

0

 public chartClicked(e: any): void {
     console.log(e);
 }

e.active[0]._model and e.active[0]._view contain information about the part of the chart you clicked (i.e. label).

answered Mar 31 '17 at 09:25

Joris

309
2
12

If a user wants to get the label value, while the label in the x axis is clicked and not the bar on the graph. Then how to achieve it – Sathish Kumar k k Apr 12 '21 at 17:10

score 0 · Answer 4 · answered Aug 29 '17 at 16:17

I hope my answer is correct. After much searching for the only solution I found was:

public chartClicked(e:any):void {

if(e.active.length > 0){
  var points = [];
  var pointSelected = e.active[0]._chart.tooltip._model.caretY;
  var legends = e.active[0]._chart.legend.legendItems;

  for (var i = 0; i < e.active.length; ++i) {
    points.push(e.active[i]._model.y);
  }

  let position = points.indexOf(pointSelected);
  let label = legends[position].text

  console.log("Point: "+label)
}}

If a user wants to get the label value, while the label in the x axis is clicked and not the bar on the graph. Then how to achieve it — Sathish Kumar k k, Apr 12 '21 at 17:09

Mohammad Zaid Pathan · Answer 5 · 2022-01-08T22:32:12.713

After checking multiple places, I got it working like this for click event.

HTML:

<div class="chart">
  <canvas
    baseChart
    [data]="pieChartData"
    [type]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    (chartHover)="chartHovered($event)"
  >
  </canvas>
</div>

TS:

public chartHovered(e: any): void {
    if (e.event.type == "click") {
      const clickedIndex = e.active[0]?.index;
      console.log("Clicked index=" + clickedIndex);
    }
}

Ref

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

5 Answers5

Linked