Drawing Rectangles inside the graph using graph's X and Y Co-ordinates

[xerox123]

I want to draw rectangles inside the graph using Highcharts and React, Right now if I draw the rectangle inside the graph its using individual co-ordinates but I want to use the coordinates of the graph.

When a rectangle is drawn the co-ordinates are displayed in the text fields I want to change the values in the text field according to the graphs axis and rectangle should be placed there.

For e.g if I give X-Axis 25 and Y-Axis 50 it should show the rectangle on those axis not outside the graph

Here is the link to my code:
https://codesandbox.io/s/confident-hofs ... rc/App.tsx

[dawid.d]

Hello,

Welcome to our forum and thanks for contacting us with your question!

See the axis method 'toPixels' which changes the axis value to a position per plot area in pixels:
https://api.highcharts.com/class-refere ... s#toPixels

Demo: https://jsfiddle.net/BlackLabel/8hgwxumL/

Let me know if that was helpful!
Best regards

[dawid.d]

I'm also attaching a demo showing how you can use this method in React:
https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Just FYI, there is also an inverse method axis.toValues that allows you to change the position in pixels on the plot box to a value in axis units. (see: https://api.highcharts.com/class-refere ... is#toValue)

Regards!