Getting (x, y) of Data Point?

[Martin Connor]

Hello! I love Canvas JS so far, but have a question:

What is the best way to get the true (x, y) position of a data point in pure CSS in CanvasJS?

I know of these 2 methods, convertValueToPixel and convertPixelToValue:

https://canvasjs.com/docs/charts/methods/axis/convert-value-to-pixel/

But they are not what I need, because I need the position of the data point in terms of CSS’ (left, right), from the top-left corner of the viewpoint, and NOT the x or y position above the chart’s axis. I need this info to run an HTML animation that will move from the x position of the data point with a value of 0, all the way to the data point with the highest value.

Thank you so much! You guys really are helpful, and it’s money really well spent so far! :)

P.S. – I’m also using CanvasJS in React, just FYI

[Martin Connor]

Here is a JSFIDDLE to demonstrate what I want:

JSFIDDLE DEMO

I want the (x, y) position of the first blue dot on that chart in pure CSS, which would be its (x, y) distance from (0, 0) in the top left corner of the screen (since that’s where CSS measures from), and NOT its distance above the chart’s x-axis.

[Manoj Mohan]

@mepc36,

Adding container’s offset (left and top) values along with dataPoint’s pixel value (using convertValueToPixel()) will give you the desired x and y postition of dataPoint from top left corner of the screen as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS