fix(stats): render BoxPlot outliers on top of the box

packages/visx-stats/src/BoxPlot.tsx

@@ -163,24 +163,6 @@ export default function BoxPlot({
 
   return (
     <Group className={classnames('visx-boxplot', className)}>
-      {outliers.map((d, i) => {
-        const cx = horizontal ? valueScale(d) : center;
-        const cy = horizontal ? center : valueScale(d);
-        return (
-          <circle
-            key={`visx-boxplot-outlier-${i}`}
-            className="visx-boxplot-outlier"
-            cx={cx}
-            cy={cy}
-            r={4}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            fill={fill}
-            fillOpacity={fillOpacity}
-            {...outlierProps}
-          />
-        );
-      })}
       <line
         className="visx-boxplot-max"
         x1={boxplot.max.x1}
@@ -253,6 +235,26 @@ export default function BoxPlot({
           {...containerProps}
         />
       )}
+      {/* Render outliers last so they paint on top of the box and whiskers
+          instead of being occluded by them (#1865). */}
+      {outliers.map((d, i) => {
+        const cx = horizontal ? valueScale(d) : center;
+        const cy = horizontal ? center : valueScale(d);
+        return (
+          <circle
+            key={`visx-boxplot-outlier-${i}`}
+            className="visx-boxplot-outlier"
+            cx={cx}
+            cy={cy}
+            r={4}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            fill={fill}
+            fillOpacity={fillOpacity}
+            {...outlierProps}
+          />
+        );
+      })}
     </Group>
   );
 }

packages/visx-stats/test/BoxPlot.test.tsx

@@ -48,4 +48,33 @@ describe('<BoxPlot />', () => {
     expect(boxPlotGroup?.querySelectorAll('line')).toHaveLength(5);
     expect(boxPlotGroup?.querySelectorAll('rect')).toHaveLength(1);
   });
+
+  test('it should paint outliers on top of the box', () => {
+    const { container } = render(
+      <svg width={100} height={100}>
+        <BoxPlot
+          min={min}
+          max={max}
+          left={0}
+          firstQuartile={firstQuartile}
+          thirdQuartile={thirdQuartile}
+          median={median}
+          boxWidth={100}
+          valueScale={valueScale}
+          outliers={[0, 10]}
+        />
+      </svg>,
+    );
+    const boxPlotGroup = container.querySelector('.visx-boxplot');
+    const children = Array.from(boxPlotGroup?.children ?? []);
+    const boxIndex = children.findIndex((el) =>
+      el.classList.contains('visx-boxplot-box'),
+    );
+    const firstOutlierIndex = children.findIndex((el) =>
+      el.classList.contains('visx-boxplot-outlier'),
+    );
+
+    expect(boxIndex).toBeGreaterThanOrEqual(0);
+    expect(firstOutlierIndex).toBeGreaterThan(boxIndex);
+  });
 });