Knowledge Base

Finding out screen coordinates of a chart data point

This demo shows how you can find out a screen coordinates of each data point, i.e. bullet.

To find X coordinate, we are using dateToCoordinate() method on the category axis. If we had a regular non-date-based category axis we would use categoryToCoordinate() instead.

For Y coordinate we utilize value axis’ getCoordinate() method.

We catch a click on a bullet by setting up a listener to chart’s clickGraphItem event:

"listeners": [{
  "event": "clickGraphItem",
  "method": function(e) {
    
    // Find out X
    var x = Math.round( e.graph.categoryAxis.dateToCoordinate(e.item.category) );
    
    // Find out Y
    var y = Math.round( e.graph.valueAxis.getCoordinate(e.item.values.value) );
    
    console.log("x: " + x, "y: " + y);
    
  }
}]