Convert coordinates to pixels, and vice-versa

• May 8, 2024 at 1:18 am #45082
  
  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 18 hours, 12 minutes ago by Phrogz. Reason: formatting
  May 8, 2024 at 1:30 am #45084
  
  Phrogz

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

  May 8, 2024 at 6:17 pm #45090
  
  Ananya

  @phrogz,

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

  —
  Ananya Deka
  Team CanvasJS