Menu
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);
563
Just add the listener and be done with it: chart.addListener ("clickGraphItem", function (event) { // click event occurred // let's do something cool }); However, sometimes you need to do something else on double click. Handling double click events in JavaScript is problematic, unreliable and it differs from browser to browser.
Event listeners are custom functions that are invoked whenever some action or event, like for instance an object is clicked, or series is hidden, or axis is zoomed, is triggered. Every object in amCharts 4 has a property events which is an "event dispatcher".
Every object in amCharts 4 has a property events which is an "event dispatcher". Event dispatcher is responsible for registering and de-registering custom functions, as well as executing them whenever certain event occurs in the dispatchers parent object.
A callback function that will be called whenever event occurs. A scope in which callback function will be executed. Here's an example that attaches click event to a column in a Column series: amCharts 4 uses "hit" event to indicated universal click or touch event.
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
140
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
22
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
