Get mouse position relative to pie chart (equation)

Question

I created a canvas pie chart from a data array, now I'm trying to find the mouse position relative to a pie chart to determine which section of data is floating. I'm almost there, but I stick to the equation.

My logic is functioning fine, so I think it's more of a math question, but will see what others think of my approach. here is my pie chart and the variables i use:

The listed variables in the image are the variables that I should use (mouseX, mouseY, distance from the center, radius, circle in pi and plot of the data point around the circle relative to pi).

The initial section of the diagram is on the right and starts from 0 from pi * 2 to 100% of pi * 2, the gray section then has an initial position of 1.34 ... relative to the pie * 2 and the end position is 2.228 ...

My main problem currently is to use pixel measurement to calculate its position relative to pi. I could check the position from above and to the left, then work out the distance from the center and work out a line from the center depending on pi, but I am calculating this in a dead end.

Answer 1

The hardest part to remember is that the Y coordinates move down in the DOM coordinates, and so the corners go clockwise from the positive X axis:

Specified mouse position mx, my :

 var dx = mx - 180; // horizontal offset from center var dy = my - 180; // vertical offset from center var theta = Math.atan2(dy, dx); // angle clockwise from X-axis, range -π .. π if (theta < 0) { // correct to range 0 .. 2π if desired theta += 2.0 * Math.PI; }