Convert coordinates to pixels, and vice-versa

[Phrogz]

I want to overlay additional interactive elements on my chart using custom HTML. I want these elements to be positioned exactly as specific data values; similarly, given pixel coordinates within the chart container, I want to be able to determine the X/Y coordinate at that location.

At a minimum, is there any way to determine:

• the x coordinates for the minimum and maximum values on a horizontal axis
  • alternatively, the amount of padding to the left of the minimum and right of the maximum
• the y coordinates for the minimum and maximum values on a vertical axis
  • alternatively, the amount of padding above the maximum and below the minimum values

I’d love if the chart had a method like “pxToCoord()” that allowed sending in pixel values and getting back chart coordinates, a method like coordToPx() that allowed sending in X/Y value and getting back pixel offsets within the container. But I’m not sure how these would work with multiple axes.

• This topic was modified 6 months ago by Phrogz. Reason: formatting

[Phrogz]

I’ve just discovered chart.plotArea which looks like it will do what I need.

[Ananya]

@phrogz,

Glad that you figured it out, and that works for you.

—
Ananya Deka
Team CanvasJS