Updated cursor position detection in the Arc component to inform the tooltip.

Author: Robert Crocker

src/App.tsx

@@ -20,8 +20,7 @@ function App() {
         data={fruit.sort((a, b) => a.value - b.value)}
         label="label"
         value="value"
-        legend="top-left"
-        outerRadius={240}
+        outerRadius={400}
         pieLabel={true}
       />
       <BarChart

src/components/Arc.tsx

@@ -29,7 +29,8 @@ export const Arc = React.memo(
           cursorX: e.nativeEvent.pageX,
           cursorY: e.nativeEvent.pageY,
           distanceFromTop: e.nativeEvent.pageY - e.clientY + e.clientY,
-          distanceFromRight: margin.left + cWidth + margin.right - cWidth,
+          distanceFromRight:
+            cWidth - (margin.right + margin.left) - e.nativeEvent.pageX,
           distanceFromLeft: e.pageX,
           data,
         };