From 298b7bd1819d255071f5077a0d3e04398c1b6108 Mon Sep 17 00:00:00 2001
From: Shea Janke <50504641+SheaJanke@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:37:05 -0700
Subject: [PATCH] Fix glyph positioning in the xychart demo.  (#1730)

* fix(visx-demo): Fix glyph series in xychart demo.

* Update package sizes.
---
 .../visx-xychart/ExampleControls.tsx          | 45 ++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
index 276682cde..5fccd96d3 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
@@ -134,19 +134,54 @@ export default function ExampleControls({ children }: ControlsProps) {
   const [curveType, setCurveType] = useState<'linear' | 'cardinal' | 'step'>('linear');
   const glyphOutline = theme.gridStyles.stroke;
   const renderGlyph = useCallback(
-    ({ size, color, onPointerMove, onPointerOut, onPointerUp }: GlyphProps<CityTemperature>) => {
+    ({
+      x,
+      y,
+      size,
+      color,
+      onPointerMove,
+      onPointerOut,
+      onPointerUp,
+    }: GlyphProps<CityTemperature>) => {
       const handlers = { onPointerMove, onPointerOut, onPointerUp };
       if (glyphComponent === 'star') {
-        return <GlyphStar stroke={glyphOutline} fill={color} size={size * 10} {...handlers} />;
+        return (
+          <GlyphStar
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            size={size * 10}
+            {...handlers}
+          />
+        );
       }
       if (glyphComponent === 'circle') {
-        return <GlyphDot stroke={glyphOutline} fill={color} r={size / 2} {...handlers} />;
+        return (
+          <GlyphDot
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            r={size / 2}
+            {...handlers}
+          />
+        );
       }
       if (glyphComponent === 'cross') {
-        return <GlyphCross stroke={glyphOutline} fill={color} size={size * 10} {...handlers} />;
+        return (
+          <GlyphCross
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            size={size * 10}
+            {...handlers}
+          />
+        );
       }
       return (
-        <text dx="-0.75em" dy="0.25em" fontSize={14} {...handlers}>
+        <text x={x} y={y} dx="-0.75em" dy="0.25em" fontSize={14} {...handlers}>
           🍍
         </text>
       );