diff --git a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx
index 4073aa07..097a4191 100644
--- a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx
+++ b/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx
@@ -48,19 +48,17 @@ export function ScatterSeriesShape(props: ScatterSeriesShapeProps) {
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
 
         const selection = svgElement
-            .selectAll('point')
+            .selectAll('circle')
             .data(preparedData, shapeKey)
             .join(
-                (enter) => enter.append('rect').attr('class', b('point')),
+                (enter) => enter.append('circle').attr('class', b('point')),
                 (update) => update,
                 (exit) => exit.remove(),
             )
             .attr('fill', (d) => d.data.color || d.series.color || '')
-            // .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
-            .attr('x', (d) => d.cx)
-            .attr('y', (d) => d.cy)
-            .attr('width', () => DEFAULT_SCATTER_POINT_RADIUS)
-            .attr('height', () => DEFAULT_SCATTER_POINT_RADIUS);
+            .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('cx', (d) => d.cx)
+            .attr('cy', (d) => d.cy);
 
         svgElement
             .on('mousemove', (e) => {