Search code examples
angularamcharts

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


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); 

Solution

  • 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