How to add a click\hit event for LineSeries in amcharts 4?

Question

I want to know how to get the X\Y item details of a clicked line item in amcharts 4.

I have the code here: https://stackblitz.com/edit/angular-playground-3qpqlq

series2.segments.template.events.on("hit", (ev) => {
alert('line clicked');//this gets triggered
//but how to i get the line item details here, like X axis and Y axis 
//value of the clicked point of the line?

}, this);

score 15 · Accepted Answer · answered Jul 23 '18 at 21:25

15

LineSeries data items aren't as straightforward to get from the hit event as columns are. You have to look at the event's target.dataItem.component.tooltipDataItem.dataContext object to get at the clicked bullet's information:

series2.segments.template.interactionsEnabled = true;
series2.segments.template.events.on(
  "hit",
  ev => {
    var item = ev.target.dataItem.component.tooltipDataItem.dataContext;
    alert("line clicked on: " + item.country + ": " + item.marketing);
  },
  this
);

Codepen

answered Jul 23 '18 at 21:25

xorspark

15,749
2
29
38

1

Thank you. Really had hard time finding that property :) – Deepak Jul 26 '18 at 06:58
Really its very hard to find this solution in official doc. Thanks a lot @xorspark. – Ranjit Kumar May 08 '19 at 07:14

score 3 · Answer 2 · answered Jan 20 '20 at 15:28

You can do it without bullets too. Just add Cursor to the chart, listen to "hit" event and series.tooltipDataItem is the one cursor is currently hovering.

chart.cursor = new am4charts.XYCursor();
chart.events.on("hit", function(){
  console.log(series.tooltipDataItem);
})

https://codepen.io/team/amcharts/pen/de5de2f65752517c07afb4ffe7e110ef

score 2 · Answer 3 · answered May 21 '19 at 06:32

Maybe things have improved since because you can now access this via

bullet.events.on('over', (ev: any) => {
                    const val = ev.target.dataItem.dataContext.value;
                    this.dosomethingwith(val)
                }, this);

How to add a click\hit event for LineSeries in amcharts 4?

3 Answers3