You must be logged in to post your query.
Home › Forums › Chart Support › How do I convert mouse click coordinate to canvas coordinates?
Tagged: canvas coordinates, click event, mouse coordinates, scatter plot
Please have a look at this jsfiddle: https://jsfiddle.net/pd523fjc/
I am trying to highlight points in the scatter plot based on the user clicking on a point. I was able to create a click listener and get the mouse coordinates. I was also able to get the bounds of the canvas. What I need to do now is convert the mouse click coordinates to canvas coordinates.
For example, if I click near the origin of the chart, where the canvas coordinates are (-50, -200), the mouse click coordinates are (58, 329). Obviously, these are screen coordinates, or div coordinates, which are not the same as the canvas coordinates. So I’m wondering if there’s a way to convert these screen/div coordinates to canvas coordinates.
Thanks for any forthcoming help.
You need to subtract the offset of the chart container from e.pageX/e.pageY to get the coordinate value of the click with respective to canvas as shown in this documentation page.
Thank you Manoj, that worked!
You must be logged in to reply to this topic. Login/Register