'Recharts square zoom implementation

The sample I am talkin' about is here

https://recharts.org/en-US/examples/HighlightAndZoomLineChart and here https://codesandbox.io/s/highlight-zomm-line-chart-v77bt

Please press left button of the mouse and drag it to the right - this is how zoom is currently done. Please take a look at the activeLabel variable.

Currently recharts could make a zoom into the graph by passing the x coordinate (which is stored in activeLabel variable) and zooom looks like a pillar all over the y coordinate.

I want to select an area - square or rectangle to make more customized zoom. The trouble is that I can't get the y value of the graph (not pixel in window). Recharts gives only x coordinate of the graph, but not y.

I've searched all over the issues on gitHub, mailed the creator with no luck.

I've read the Recharts value at pointer to show in tooltip?

but I could not get how could I count the initial values of chartX and chartY in my responsive container, so it is very depends on the window user has.

Please help me to find a solution to match chartY in pixels to my real values in my chart depending on Responsive Container I am using.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source