solid-recharts 0.1.0

package/test/cartesian/ErrorBar.spec.tsx

@@ -0,0 +1,2414 @@
+// Ported from recharts 3.8.1 test/cartesian/ErrorBar.spec.tsx — the render-geometry
+// matrix from the top-level `<ErrorBar />` describe (Bar / stacked-Bar / Line /
+// Scatter horizontal+vertical golden line coordinates), the "ErrorBar and axis
+// domain interaction" describe (rerender→signal), and the 5 animation cases
+// (React animationManager → Solid createManagerRegistry + completeAll; the
+// "with animation delay" case also covers the bare `begin` SVG-attr passthrough
+// onto the whisker group via svgPropertiesNoEvents).
+import { describe, expect, it, test } from "vitest";
+import { createSignal, flush, Show } from "solid-js";
+import {
+  Bar,
+  BarChart,
+  ErrorBar,
+  Line,
+  LineChart,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { render } from "../helper/render";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import type { AnimationController } from "../../src";
+import { MockControllerAnimationManager } from "../animation/mockControllerAnimationManager";
+import { expectScatterPoints } from "../helper/expectScatterPoints";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { expectXAxisTicks, expectYAxisTicks } from "../helper/expectAxisTicks";
+import { expectBars } from "../helper/expectBars";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import {
+  getErrorDomainByDataKey,
+  selectAxisDomainIncludingNiceTicks,
+  selectNumericalDomain,
+} from "../../src/state/selectors/axisSelectors";
+import { useIsPanorama } from "../../src/context/PanoramaContext";
+import type { RechartsRootState } from "../../src/state/store";
+
+type ExpectedErrorBarLine = {
+  x1: string | null;
+  x2: string | null;
+  y1: string | null;
+  y2: string | null;
+};
+
+const expectErrorBars = (
+  container: HTMLElement,
+  linesExpected: ReadonlyArray<ExpectedErrorBarLine>,
+) => {
+  const errorBarLines = container.querySelectorAll(".recharts-errorBar line");
+
+  const linesActual = Array.from(errorBarLines).map((line) => {
+    return {
+      x1: line.getAttribute("x1"),
+      x2: line.getAttribute("x2"),
+      y1: line.getAttribute("y1"),
+      y2: line.getAttribute("y2"),
+    };
+  });
+
+  expect(linesActual).toEqual(linesExpected);
+};
+
+// Port of the reference's assertAnimationStyles: every whisker line carries the
+// expected CSS, and `transition` is present iff animation is active.
+function assertAnimationStyles(
+  container: HTMLElement,
+  animation: boolean,
+  expectedStyles: Record<string, string>,
+): void {
+  container.querySelectorAll(".recharts-errorBar").forEach((bar) => {
+    bar.querySelectorAll("line").forEach((line) => {
+      const style = line.getAttribute("style");
+      Object.entries(expectedStyles).forEach(([key, value]) => {
+        expect(style).toContain(`${key}: ${value}`);
+      });
+      if (animation) {
+        expect(style).toContain("transition");
+      } else {
+        expect(style).not.toContain("transition");
+      }
+    });
+  });
+}
+
+// ErrorBar renders one CSSTransitionAnimate per whisker line, each keyed by a unique
+// animationId. On the v3.9 engine the injected AnimationController routes per-id
+// (via handle.getAnimationId()) to its own MockControllerAnimationManager, and
+// completeAll() finishes them all.
+function createManagerRegistry(): {
+  controller: AnimationController;
+  completeAll: () => Promise<void>;
+} {
+  const managers = new Map<string, MockControllerAnimationManager>();
+  return {
+    controller: (timeoutController, animationHandle, listener) => {
+      const id = animationHandle.getAnimationId();
+      let m = managers.get(id);
+      if (m == null) {
+        m = new MockControllerAnimationManager(id);
+        managers.set(id, m);
+      }
+      m.start(animationHandle, listener);
+      return () => m.stop();
+    },
+    completeAll: async () => {
+      // Some consumers in the tree (e.g. a Bar with isAnimationActive=false) get a
+      // manager but never enqueue an animation; ignore their "Queue is empty".
+      await Promise.all(
+        Array.from(managers.values()).map((m) =>
+          m.completeAnimation().catch((e: unknown) => {
+            if (!(e instanceof Error) || !e.message.includes("Queue is empty")) {
+              throw e;
+            }
+          }),
+        ),
+      );
+    },
+  };
+}
+
+describe("<ErrorBar />", () => {
+  const dataWithError = [
+    { name: "food", uv: 2000, pv: 2013, time: 1, uvError: [100, 50], pvError: [110, 20] },
+    { name: "cosmetic", uv: 3300, pv: 2000, time: 2, uvError: [120, 140], pvError: 50 },
+    { name: "storage", uv: 3200, pv: 1398, time: 3, uvError: [120, 80], pvError: [200, 100] },
+    { name: "digital", uv: 2800, pv: 2800, time: 4, uvError: [100, 200], pvError: 30 },
+  ];
+
+  const expectedErrorBars = [
+    {
+      x1: "61.25",
+      x2: "71.25",
+      y1: "215.97222222222223",
+      y2: "215.97222222222223",
+    },
+    {
+      x1: "66.25",
+      x2: "66.25",
+      y1: "236.38888888888889",
+      y2: "215.97222222222223",
+    },
+    {
+      x1: "61.25",
+      x2: "71.25",
+      y1: "236.38888888888889",
+      y2: "236.38888888888889",
+    },
+    {
+      x1: "183.75",
+      x2: "193.75",
+      y1: "26.777777777777754",
+      y2: "26.777777777777754",
+    },
+    {
+      x1: "188.75",
+      x2: "188.75",
+      y1: "62.16666666666668",
+      y2: "26.777777777777754",
+    },
+    {
+      x1: "183.75",
+      x2: "193.75",
+      y1: "62.16666666666668",
+      y2: "62.16666666666668",
+    },
+    {
+      x1: "306.25",
+      x2: "316.25",
+      y1: "48.555555555555564",
+      y2: "48.555555555555564",
+    },
+    {
+      x1: "311.25",
+      x2: "311.25",
+      y1: "75.77777777777779",
+      y2: "48.555555555555564",
+    },
+    {
+      x1: "306.25",
+      x2: "316.25",
+      y1: "75.77777777777779",
+      y2: "75.77777777777779",
+    },
+    {
+      x1: "428.75",
+      x2: "438.75",
+      y1: "86.66666666666666",
+      y2: "86.66666666666666",
+    },
+    {
+      x1: "433.75",
+      x2: "433.75",
+      y1: "127.5",
+      y2: "86.66666666666666",
+    },
+    {
+      x1: "428.75",
+      x2: "438.75",
+      y1: "127.5",
+      y2: "127.5",
+    },
+  ];
+  it("Renders Error Bars in Bar", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <BarChart data={dataWithError} width={500} height={500}>
+        <Bar isAnimationActive={false} dataKey="uv">
+          <ErrorBar dataKey="uvError" />
+        </Bar>
+      </BarChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expectErrorBars(container, expectedErrorBars);
+  });
+
+  it("Renders Multiple Error Bars in Bar", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <BarChart data={dataWithError} width={500} height={500} layout="vertical">
+        <Bar isAnimationActive={false} dataKey="uv">
+          <ErrorBar dataKey="uvError" direction="x" />
+          <ErrorBar dataKey="pvError" direction="x" />
+        </Bar>
+        {/* Axes are needed in order to actually render anything useful in a vertical chart */}
+        <XAxis dataKey="uv" type="number" />
+        <YAxis dataKey="name" type="category" />
+      </BarChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expectErrorBars(container, [
+      {
+        x1: "309.8611111111111",
+        x2: "309.8611111111111",
+        y1: "67.5",
+        y2: "57.5",
+      },
+      {
+        x1: "291.94444444444446",
+        x2: "309.8611111111111",
+        y1: "62.5",
+        y2: "62.5",
+      },
+      {
+        x1: "291.94444444444446",
+        x2: "291.94444444444446",
+        y1: "67.5",
+        y2: "57.5",
+      },
+      {
+        x1: "475.8888888888889",
+        x2: "475.8888888888889",
+        y1: "182.5",
+        y2: "172.5",
+      },
+      {
+        x1: "444.8333333333333",
+        x2: "475.8888888888889",
+        y1: "177.5",
+        y2: "177.5",
+      },
+      {
+        x1: "444.8333333333333",
+        x2: "444.8333333333333",
+        y1: "182.5",
+        y2: "172.5",
+      },
+      {
+        x1: "456.77777777777777",
+        x2: "456.77777777777777",
+        y1: "297.5",
+        y2: "287.5",
+      },
+      {
+        x1: "432.8888888888889",
+        x2: "456.77777777777777",
+        y1: "292.5",
+        y2: "292.5",
+      },
+      {
+        x1: "432.8888888888889",
+        x2: "432.8888888888889",
+        y1: "297.5",
+        y2: "287.5",
+      },
+      {
+        x1: "423.3333333333333",
+        x2: "423.3333333333333",
+        y1: "412.5",
+        y2: "402.5",
+      },
+      {
+        x1: "387.5",
+        x2: "423.3333333333333",
+        y1: "407.5",
+        y2: "407.5",
+      },
+      {
+        x1: "387.5",
+        x2: "387.5",
+        y1: "412.5",
+        y2: "402.5",
+      },
+      {
+        x1: "306.27777777777777",
+        x2: "306.27777777777777",
+        y1: "67.5",
+        y2: "57.5",
+      },
+      {
+        x1: "290.75",
+        x2: "306.27777777777777",
+        y1: "62.5",
+        y2: "62.5",
+      },
+      {
+        x1: "290.75",
+        x2: "290.75",
+        y1: "67.5",
+        y2: "57.5",
+      },
+      {
+        x1: "465.1388888888889",
+        x2: "465.1388888888889",
+        y1: "182.5",
+        y2: "172.5",
+      },
+      {
+        x1: "453.19444444444446",
+        x2: "465.1388888888889",
+        y1: "177.5",
+        y2: "177.5",
+      },
+      {
+        x1: "453.19444444444446",
+        x2: "453.19444444444446",
+        y1: "182.5",
+        y2: "172.5",
+      },
+      {
+        x1: "459.1666666666667",
+        x2: "459.1666666666667",
+        y1: "297.5",
+        y2: "287.5",
+      },
+      {
+        x1: "423.3333333333333",
+        x2: "459.1666666666667",
+        y1: "292.5",
+        y2: "292.5",
+      },
+      {
+        x1: "423.3333333333333",
+        x2: "423.3333333333333",
+        y1: "297.5",
+        y2: "287.5",
+      },
+      {
+        x1: "403.02777777777777",
+        x2: "403.02777777777777",
+        y1: "412.5",
+        y2: "402.5",
+      },
+      {
+        x1: "395.8611111111111",
+        x2: "403.02777777777777",
+        y1: "407.5",
+        y2: "407.5",
+      },
+      {
+        x1: "395.8611111111111",
+        x2: "395.8611111111111",
+        y1: "412.5",
+        y2: "402.5",
+      },
+    ]);
+  });
+
+  it("Renders Error Bars in stacked Bar", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <BarChart data={dataWithError} width={500} height={500}>
+        <Bar isAnimationActive={false} dataKey="uv" stackId="1">
+          <ErrorBar dataKey="uvError" />
+        </Bar>
+        <Bar isAnimationActive={false} dataKey="pv" stackId="1">
+          <ErrorBar dataKey="uvError" />
+        </Bar>
+      </BarChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expectErrorBars(container, [
+      {
+        x1: "61.25",
+        x2: "71.25",
+        y1: "327.5833333333333",
+        y2: "327.5833333333333",
+      },
+      {
+        x1: "66.25",
+        x2: "66.25",
+        y1: "339.8333333333333",
+        y2: "327.5833333333333",
+      },
+      {
+        x1: "61.25",
+        x2: "71.25",
+        y1: "339.8333333333333",
+        y2: "339.8333333333333",
+      },
+      {
+        x1: "183.75",
+        x2: "193.75",
+        y1: "214.06666666666666",
+        y2: "214.06666666666666",
+      },
+      {
+        x1: "188.75",
+        x2: "188.75",
+        y1: "235.29999999999998",
+        y2: "214.06666666666666",
+      },
+      {
+        x1: "183.75",
+        x2: "193.75",
+        y1: "235.29999999999998",
+        y2: "235.29999999999998",
+      },
+      {
+        x1: "306.25",
+        x2: "316.25",
+        y1: "227.13333333333333",
+        y2: "227.13333333333333",
+      },
+      {
+        x1: "311.25",
+        x2: "311.25",
+        y1: "243.46666666666667",
+        y2: "227.13333333333333",
+      },
+      {
+        x1: "306.25",
+        x2: "316.25",
+        y1: "243.46666666666667",
+        y2: "243.46666666666667",
+      },
+      {
+        x1: "428.75",
+        x2: "438.75",
+        y1: "250",
+        y2: "250",
+      },
+      {
+        x1: "433.75",
+        x2: "433.75",
+        y1: "274.5",
+        y2: "250",
+      },
+      {
+        x1: "428.75",
+        x2: "438.75",
+        y1: "274.5",
+        y2: "274.5",
+      },
+      {
+        x1: "61.25",
+        x2: "71.25",
+        y1: "163.1883333333333",
+        y2: "163.1883333333333",
+      },
+      {
+        x1: "66.25",
+        x2: "66.25",
+        y1: "175.43833333333333",
+        y2: "163.1883333333333",
+      },
+      {
+        x1: "61.25",
+        x2: "71.25",
+        y1: "175.43833333333333",
+        y2: "175.43833333333333",
+      },
+      {
+        x1: "183.75",
+        x2: "193.75",
+        y1: "50.733333333333356",
+        y2: "50.733333333333356",
+      },
+      {
+        x1: "188.75",
+        x2: "188.75",
+        y1: "71.96666666666668",
+        y2: "50.733333333333356",
+      },
+      {
+        x1: "183.75",
+        x2: "193.75",
+        y1: "71.96666666666668",
+        y2: "71.96666666666668",
+      },
+      {
+        x1: "306.25",
+        x2: "316.25",
+        y1: "112.96333333333335",
+        y2: "112.96333333333335",
+      },
+      {
+        x1: "311.25",
+        x2: "311.25",
+        y1: "129.29666666666668",
+        y2: "112.96333333333335",
+      },
+      {
+        x1: "306.25",
+        x2: "316.25",
+        y1: "129.29666666666668",
+        y2: "129.29666666666668",
+      },
+      {
+        x1: "428.75",
+        x2: "438.75",
+        y1: "21.33333333333333",
+        y2: "21.33333333333333",
+      },
+      {
+        x1: "433.75",
+        x2: "433.75",
+        y1: "45.83333333333336",
+        y2: "21.33333333333333",
+      },
+      {
+        x1: "428.75",
+        x2: "438.75",
+        y1: "45.83333333333336",
+        y2: "45.83333333333336",
+      },
+    ]);
+  });
+
+  const lineData = [
+    { name: "Page A", uv: 1000, pv: 2400, amt: 2400, uvError: [75, 20], pvError: [90, 40] },
+    { name: "Page B", uv: 300, pv: 4567, amt: 2400, uvError: [90, 40], pvError: [75, 20] },
+    { name: "Page C", uv: 280, pv: 1398, amt: 2400, uvError: 40, pvError: 20 },
+    { name: "Page D", uv: 200, pv: 9800, amt: 2400, uvError: 20, pvError: 28 },
+    { name: "Page I", uv: 189, pv: 4800, amt: 2400, uvError: 28, pvError: 40 },
+  ];
+
+  it("Renders Error Bars in Line", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <LineChart data={lineData} width={500} height={500}>
+        <Line isAnimationActive={false} dataKey="uv">
+          <ErrorBar dataKey="uvError" />
+        </Line>
+      </LineChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expectErrorBars(container, [
+      {
+        x1: "0",
+        x2: "10",
+        y1: "78.50000000000001",
+        y2: "78.50000000000001",
+      },
+      {
+        x1: "5",
+        x2: "5",
+        y1: "117.29166666666666",
+        y2: "78.50000000000001",
+      },
+      {
+        x1: "0",
+        x2: "10",
+        y1: "117.29166666666666",
+        y2: "117.29166666666666",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "356.1666666666667",
+        y2: "356.1666666666667",
+      },
+      {
+        x1: "127.5",
+        x2: "127.5",
+        y1: "409.25",
+        y2: "356.1666666666667",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "409.25",
+        y2: "409.25",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "364.33333333333337",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "250",
+        x2: "250",
+        y1: "397",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "397",
+        y2: "397",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "405.1666666666667",
+        y2: "405.1666666666667",
+      },
+      {
+        x1: "372.5",
+        x2: "372.5",
+        y1: "421.5",
+        y2: "405.1666666666667",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "421.5",
+        y2: "421.5",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "406.3916666666666",
+        y2: "406.3916666666666",
+      },
+      {
+        x1: "495",
+        x2: "495",
+        y1: "429.2583333333333",
+        y2: "406.3916666666666",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "429.2583333333333",
+        y2: "429.2583333333333",
+      },
+    ]);
+  });
+
+  it("Renders Multiple Error Bars in Line", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <LineChart data={lineData} width={500} height={500}>
+        <Line isAnimationActive={false} dataKey="uv">
+          <ErrorBar dataKey="uvError" />
+          <ErrorBar dataKey="pvError" />
+        </Line>
+      </LineChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expectErrorBars(container, [
+      {
+        x1: "0",
+        x2: "10",
+        y1: "78.50000000000001",
+        y2: "78.50000000000001",
+      },
+      {
+        x1: "5",
+        x2: "5",
+        y1: "117.29166666666666",
+        y2: "78.50000000000001",
+      },
+      {
+        x1: "0",
+        x2: "10",
+        y1: "117.29166666666666",
+        y2: "117.29166666666666",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "356.1666666666667",
+        y2: "356.1666666666667",
+      },
+      {
+        x1: "127.5",
+        x2: "127.5",
+        y1: "409.25",
+        y2: "356.1666666666667",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "409.25",
+        y2: "409.25",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "364.33333333333337",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "250",
+        x2: "250",
+        y1: "397",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "397",
+        y2: "397",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "405.1666666666667",
+        y2: "405.1666666666667",
+      },
+      {
+        x1: "372.5",
+        x2: "372.5",
+        y1: "421.5",
+        y2: "405.1666666666667",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "421.5",
+        y2: "421.5",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "406.3916666666666",
+        y2: "406.3916666666666",
+      },
+      {
+        x1: "495",
+        x2: "495",
+        y1: "429.2583333333333",
+        y2: "406.3916666666666",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "429.2583333333333",
+        y2: "429.2583333333333",
+      },
+      {
+        x1: "0",
+        x2: "10",
+        y1: "70.33333333333331",
+        y2: "70.33333333333331",
+      },
+      {
+        x1: "5",
+        x2: "5",
+        y1: "123.41666666666669",
+        y2: "70.33333333333331",
+      },
+      {
+        x1: "0",
+        x2: "10",
+        y1: "123.41666666666669",
+        y2: "123.41666666666669",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "364.33333333333337",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "127.5",
+        x2: "127.5",
+        y1: "403.125",
+        y2: "364.33333333333337",
+      },
+      {
+        x1: "122.5",
+        x2: "132.5",
+        y1: "403.125",
+        y2: "403.125",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "372.5",
+        y2: "372.5",
+      },
+      {
+        x1: "250",
+        x2: "250",
+        y1: "388.8333333333333",
+        y2: "372.5",
+      },
+      {
+        x1: "245",
+        x2: "255",
+        y1: "388.8333333333333",
+        y2: "388.8333333333333",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "401.90000000000003",
+        y2: "401.90000000000003",
+      },
+      {
+        x1: "372.5",
+        x2: "372.5",
+        y1: "424.76666666666665",
+        y2: "401.90000000000003",
+      },
+      {
+        x1: "367.5",
+        x2: "377.5",
+        y1: "424.76666666666665",
+        y2: "424.76666666666665",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "401.4916666666667",
+        y2: "401.4916666666667",
+      },
+      {
+        x1: "495",
+        x2: "495",
+        y1: "434.15833333333336",
+        y2: "401.4916666666667",
+      },
+      {
+        x1: "490",
+        x2: "500",
+        y1: "434.15833333333336",
+        y2: "434.15833333333336",
+      },
+    ]);
+  });
+
+  it("renders two ErrorBars in ScatterChart, one for XAxis another for YAxis", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <ScatterChart width={500} height={500}>
+        <Scatter isAnimationActive={false} data={dataWithError} dataKey="uv">
+          <ErrorBar dataKey="uvError" direction="y" />
+          <ErrorBar dataKey="pvError" direction="x" />
+        </Scatter>
+        <XAxis type="number" />
+      </ScatterChart>
+    ));
+
+    const { container } = renderTestCase();
+    expect(container.querySelectorAll(".recharts-errorBars")).toHaveLength(2);
+
+    expectScatterPoints(container, [
+      {
+        cx: "326671.6666666667",
+        cy: "209.44444444444443",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(326671.6666666667, 209.44444444444443)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "539005",
+        cy: "43.33333333333335",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(539005, 43.33333333333335)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "522671.6666666667",
+        cy: "56.111111111111136",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(522671.6666666667, 56.111111111111136)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "457338.3333333333",
+        cy: "107.22222222222221",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(457338.3333333333, 107.22222222222221)",
+        width: "9.0270333367641",
+      },
+    ]);
+
+    expectErrorBars(container, [
+      {
+        x1: "326666.6666666667",
+        x2: "326676.6666666667",
+        y1: "203.05555555555557",
+        y2: "203.05555555555557",
+      },
+      {
+        x1: "326671.6666666667",
+        x2: "326671.6666666667",
+        y1: "222.2222222222222",
+        y2: "203.05555555555557",
+      },
+      {
+        x1: "326666.6666666667",
+        x2: "326676.6666666667",
+        y1: "222.2222222222222",
+        y2: "222.2222222222222",
+      },
+      {
+        x1: "539000",
+        x2: "539010",
+        y1: "25.444444444444425",
+        y2: "25.444444444444425",
+      },
+      {
+        x1: "539005",
+        x2: "539005",
+        y1: "58.66666666666668",
+        y2: "25.444444444444425",
+      },
+      {
+        x1: "539000",
+        x2: "539010",
+        y1: "58.66666666666668",
+        y2: "58.66666666666668",
+      },
+      {
+        x1: "522666.6666666667",
+        x2: "522676.6666666667",
+        y1: "45.8888888888889",
+        y2: "45.8888888888889",
+      },
+      {
+        x1: "522671.6666666667",
+        x2: "522671.6666666667",
+        y1: "71.44444444444446",
+        y2: "45.8888888888889",
+      },
+      {
+        x1: "522666.6666666667",
+        x2: "522676.6666666667",
+        y1: "71.44444444444446",
+        y2: "71.44444444444446",
+      },
+      {
+        x1: "457333.3333333333",
+        x2: "457343.3333333333",
+        y1: "81.66666666666666",
+        y2: "81.66666666666666",
+      },
+      {
+        x1: "457338.3333333333",
+        x2: "457338.3333333333",
+        y1: "120",
+        y2: "81.66666666666666",
+      },
+      {
+        x1: "457333.3333333333",
+        x2: "457343.3333333333",
+        y1: "120",
+        y2: "120",
+      },
+      {
+        x1: "329938.3333333333",
+        x2: "329938.3333333333",
+        y1: "214.44444444444443",
+        y2: "204.44444444444443",
+      },
+      {
+        x1: "308705",
+        x2: "329938.3333333333",
+        y1: "209.44444444444443",
+        y2: "209.44444444444443",
+      },
+      {
+        x1: "308705",
+        x2: "308705",
+        y1: "214.44444444444443",
+        y2: "204.44444444444443",
+      },
+      {
+        x1: "547171.6666666666",
+        x2: "547171.6666666666",
+        y1: "48.33333333333335",
+        y2: "38.33333333333335",
+      },
+      {
+        x1: "530838.3333333334",
+        x2: "547171.6666666666",
+        y1: "43.33333333333335",
+        y2: "43.33333333333335",
+      },
+      {
+        x1: "530838.3333333334",
+        x2: "530838.3333333334",
+        y1: "48.33333333333335",
+        y2: "38.33333333333335",
+      },
+      {
+        x1: "539005",
+        x2: "539005",
+        y1: "61.111111111111136",
+        y2: "51.111111111111136",
+      },
+      {
+        x1: "490005",
+        x2: "539005",
+        y1: "56.111111111111136",
+        y2: "56.111111111111136",
+      },
+      {
+        x1: "490005",
+        x2: "490005",
+        y1: "61.111111111111136",
+        y2: "51.111111111111136",
+      },
+      {
+        x1: "462238.3333333333",
+        x2: "462238.3333333333",
+        y1: "112.22222222222221",
+        y2: "102.22222222222221",
+      },
+      {
+        x1: "452438.3333333333",
+        x2: "462238.3333333333",
+        y1: "107.22222222222221",
+        y2: "107.22222222222221",
+      },
+      {
+        x1: "452438.3333333333",
+        x2: "452438.3333333333",
+        y1: "112.22222222222221",
+        y2: "102.22222222222221",
+      },
+    ]);
+  });
+
+  it("renders two ErrorBars in vertical ScatterChart, one for XAxis another for YAxis", () => {
+    const renderTestCase = createSelectorTestCase(() => (
+      <ScatterChart width={500} height={500} layout="vertical">
+        <Scatter isAnimationActive={false} data={dataWithError} dataKey="uv">
+          <ErrorBar dataKey="uvError" direction="y" />
+          <ErrorBar dataKey="pvError" direction="x" />
+        </Scatter>
+        <XAxis type="number" />
+      </ScatterChart>
+    ));
+
+    const { container } = renderTestCase();
+
+    expect(container.querySelectorAll(".recharts-errorBars")).toHaveLength(2);
+
+    const errorBars = container.querySelectorAll(".recharts-errorBar");
+    errorBars.forEach((bar) => {
+      expect(bar.tagName).toEqual("g");
+      expect(bar.getAttributeNames()).toEqual(["class", "stroke", "stroke-width", "offset"]);
+      expect(bar.childElementCount).toEqual(3);
+    });
+
+    expectScatterPoints(container, [
+      {
+        cx: "293.2352941176471",
+        cy: "306671.6666666667",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(293.2352941176471, 306671.6666666667)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "480.5882352941176",
+        cy: "506005",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(480.5882352941176, 506005)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "466.1764705882353",
+        cy: "490671.66666666674",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(466.1764705882353, 490671.66666666674)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "408.52941176470586",
+        cy: "429338.3333333333",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "9.0270333367641",
+        transform: "translate(408.52941176470586, 429338.3333333333)",
+        width: "9.0270333367641",
+      },
+    ]);
+
+    expectErrorBars(container, [
+      {
+        x1: "288.2352941176471",
+        x2: "298.2352941176471",
+        y1: "314338.3333333333",
+        y2: "314338.3333333333",
+      },
+      {
+        x1: "293.2352941176471",
+        x2: "293.2352941176471",
+        y1: "291338.3333333333",
+        y2: "314338.3333333333",
+      },
+      {
+        x1: "288.2352941176471",
+        x2: "298.2352941176471",
+        y1: "291338.3333333333",
+        y2: "291338.3333333333",
+      },
+      {
+        x1: "475.5882352941176",
+        x2: "485.5882352941176",
+        y1: "527471.6666666666",
+        y2: "527471.6666666666",
+      },
+      {
+        x1: "480.5882352941176",
+        x2: "480.5882352941176",
+        y1: "487605",
+        y2: "527471.6666666666",
+      },
+      {
+        x1: "475.5882352941176",
+        x2: "485.5882352941176",
+        y1: "487605",
+        y2: "487605",
+      },
+      {
+        x1: "461.1764705882353",
+        x2: "471.1764705882353",
+        y1: "502938.33333333326",
+        y2: "502938.33333333326",
+      },
+      {
+        x1: "466.1764705882353",
+        x2: "466.1764705882353",
+        y1: "472271.66666666674",
+        y2: "502938.33333333326",
+      },
+      {
+        x1: "461.1764705882353",
+        x2: "471.1764705882353",
+        y1: "472271.66666666674",
+        y2: "472271.66666666674",
+      },
+      {
+        x1: "403.52941176470586",
+        x2: "413.52941176470586",
+        y1: "460005",
+        y2: "460005",
+      },
+      {
+        x1: "408.52941176470586",
+        x2: "408.52941176470586",
+        y1: "414005",
+        y2: "460005",
+      },
+      {
+        x1: "403.52941176470586",
+        x2: "413.52941176470586",
+        y1: "414005",
+        y2: "414005",
+      },
+      {
+        x1: "296.1176470588235",
+        x2: "296.1176470588235",
+        y1: "306676.6666666667",
+        y2: "306666.6666666667",
+      },
+      {
+        x1: "277.3823529411765",
+        x2: "296.1176470588235",
+        y1: "306671.6666666667",
+        y2: "306671.6666666667",
+      },
+      {
+        x1: "277.3823529411765",
+        x2: "277.3823529411765",
+        y1: "306676.6666666667",
+        y2: "306666.6666666667",
+      },
+      {
+        x1: "487.79411764705884",
+        x2: "487.79411764705884",
+        y1: "506010",
+        y2: "506000",
+      },
+      {
+        x1: "473.3823529411765",
+        x2: "487.79411764705884",
+        y1: "506005",
+        y2: "506005",
+      },
+      {
+        x1: "473.3823529411765",
+        x2: "473.3823529411765",
+        y1: "506010",
+        y2: "506000",
+      },
+      {
+        x1: "480.5882352941176",
+        x2: "480.5882352941176",
+        y1: "490676.66666666674",
+        y2: "490666.66666666674",
+      },
+      {
+        x1: "437.35294117647055",
+        x2: "480.5882352941176",
+        y1: "490671.66666666674",
+        y2: "490671.66666666674",
+      },
+      {
+        x1: "437.35294117647055",
+        x2: "437.35294117647055",
+        y1: "490676.66666666674",
+        y2: "490666.66666666674",
+      },
+      {
+        x1: "412.8529411764706",
+        x2: "412.8529411764706",
+        y1: "429343.3333333333",
+        y2: "429333.3333333333",
+      },
+      {
+        x1: "404.20588235294116",
+        x2: "412.8529411764706",
+        y1: "429338.3333333333",
+        y2: "429338.3333333333",
+      },
+      {
+        x1: "404.20588235294116",
+        x2: "404.20588235294116",
+        y1: "429343.3333333333",
+        y2: "429333.3333333333",
+      },
+    ]);
+  });
+
+  it.each(["category", undefined] as const)(
+    "does not render anything when direction=x and XAxis id type=%s",
+    (domainType) => {
+      const renderTestCase = createSelectorTestCase(() => (
+        <BarChart data={dataWithError} width={500} height={500}>
+          <XAxis dataKey="name" type={domainType} />
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" direction="x" />
+          </Bar>
+        </BarChart>
+      ));
+
+      const { container } = renderTestCase();
+      expectErrorBars(container, []);
+    },
+  );
+
+  describe("ErrorBar and axis domain interaction", () => {
+    describe("extending domain when data is declared on chart container", () => {
+      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
+      const renderWithoutError = createSelectorTestCase((props) => (
+        <BarChart data={dataWithError} width={500} height={500}>
+          <YAxis dataKey="uv" />
+          <Bar isAnimationActive={false} dataKey="uv" />
+          {props.children}
+        </BarChart>
+      ));
+      const renderWithError = createSelectorTestCase((props) => (
+        <BarChart data={dataWithError} width={500} height={500}>
+          <YAxis dataKey="uv" />
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar dataKey="uvError" />
+          </Bar>
+          {props.children}
+        </BarChart>
+      ));
+
+      test("selectAxisDomainIncludingNiceTicks", () => {
+        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
+        );
+        expect(spy).toHaveBeenCalledWith([0, 3400]);
+
+        unmount();
+        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
+        );
+        expect(spyWith).toHaveBeenLastCalledWith([0, 3600]);
+      });
+
+      test("YAxis ticks", () => {
+        const { container, unmount } = renderWithoutError();
+        expectYAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "57",
+            y: "495",
+          },
+          {
+            textContent: "850",
+            x: "57",
+            y: "372.5",
+          },
+          {
+            textContent: "1700",
+            x: "57",
+            y: "250",
+          },
+          {
+            textContent: "2550",
+            x: "57",
+            y: "127.5",
+          },
+          {
+            textContent: "3400",
+            x: "57",
+            y: "5",
+          },
+        ]);
+
+        unmount();
+        const { container: containerWith } = renderWithError();
+
+        // these ticks are in the same position but going higher because the ErrorBar pushed YAxis domain
+        expectYAxisTicks(containerWith, [
+          {
+            textContent: "0",
+            x: "57",
+            y: "495",
+          },
+          {
+            textContent: "900",
+            x: "57",
+            y: "372.5",
+          },
+          {
+            textContent: "1800",
+            x: "57",
+            y: "250",
+          },
+          {
+            textContent: "2700",
+            x: "57",
+            y: "127.5",
+          },
+          {
+            textContent: "3600",
+            x: "57",
+            y: "5",
+          },
+        ]);
+      });
+
+      it("should render ErrorBars", () => {
+        const { container, unmount } = renderWithoutError();
+        expectErrorBars(container, []);
+        unmount();
+        const { container: containerWith } = renderWithError();
+        expectErrorBars(containerWith, [
+          {
+            x1: "113.75",
+            x2: "123.75",
+            y1: "215.97222222222223",
+            y2: "215.97222222222223",
+          },
+          {
+            x1: "118.75",
+            x2: "118.75",
+            y1: "236.38888888888889",
+            y2: "215.97222222222223",
+          },
+          {
+            x1: "113.75",
+            x2: "123.75",
+            y1: "236.38888888888889",
+            y2: "236.38888888888889",
+          },
+          {
+            x1: "221.25",
+            x2: "231.25",
+            y1: "26.777777777777754",
+            y2: "26.777777777777754",
+          },
+          {
+            x1: "226.25",
+            x2: "226.25",
+            y1: "62.16666666666668",
+            y2: "26.777777777777754",
+          },
+          {
+            x1: "221.25",
+            x2: "231.25",
+            y1: "62.16666666666668",
+            y2: "62.16666666666668",
+          },
+          {
+            x1: "328.75",
+            x2: "338.75",
+            y1: "48.555555555555564",
+            y2: "48.555555555555564",
+          },
+          {
+            x1: "333.75",
+            x2: "333.75",
+            y1: "75.77777777777779",
+            y2: "48.555555555555564",
+          },
+          {
+            x1: "328.75",
+            x2: "338.75",
+            y1: "75.77777777777779",
+            y2: "75.77777777777779",
+          },
+          {
+            x1: "436.25",
+            x2: "446.25",
+            y1: "86.66666666666666",
+            y2: "86.66666666666666",
+          },
+          {
+            x1: "441.25",
+            x2: "441.25",
+            y1: "127.5",
+            y2: "86.66666666666666",
+          },
+          {
+            x1: "436.25",
+            x2: "446.25",
+            y1: "127.5",
+            y2: "127.5",
+          },
+        ]);
+      });
+    });
+
+    describe("extending YAxis domain when data is defined on the graphical item", () => {
+      const [withError, setWithError] = createSignal(false);
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={500}>
+          <YAxis dataKey="uv" />
+          <Line isAnimationActive={false} dataKey="uv" data={dataWithError}>
+            <Show when={withError()}>
+              <ErrorBar dataKey="uvError" />
+            </Show>
+          </Line>
+          {props.children}
+        </LineChart>
+      ));
+
+      test("selectAxisDomainIncludingNiceTicks", () => {
+        setWithError(false);
+        const { spy } = renderTestCase((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
+        );
+        expect(spy).toHaveBeenCalledWith([0, 3400]);
+
+        setWithError(true);
+        flush();
+
+        expect(spy).toHaveBeenLastCalledWith([0, 3600]);
+      });
+
+      test("YAxis ticks", () => {
+        setWithError(false);
+        const { container } = renderTestCase();
+
+        expectYAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "57",
+            y: "495",
+          },
+          {
+            textContent: "850",
+            x: "57",
+            y: "372.5",
+          },
+          {
+            textContent: "1700",
+            x: "57",
+            y: "250",
+          },
+          {
+            textContent: "2550",
+            x: "57",
+            y: "127.5",
+          },
+          {
+            textContent: "3400",
+            x: "57",
+            y: "5",
+          },
+        ]);
+
+        setWithError(true);
+        flush();
+
+        expectYAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "57",
+            y: "495",
+          },
+          {
+            textContent: "900",
+            x: "57",
+            y: "372.5",
+          },
+          {
+            textContent: "1800",
+            x: "57",
+            y: "250",
+          },
+          {
+            textContent: "2700",
+            x: "57",
+            y: "127.5",
+          },
+          {
+            textContent: "3600",
+            x: "57",
+            y: "5",
+          },
+        ]);
+      });
+
+      test("should render ErrorBars", () => {
+        setWithError(false);
+        const { container } = renderTestCase();
+
+        expectErrorBars(container, []);
+
+        setWithError(true);
+        flush();
+
+        expectErrorBars(container, [
+          {
+            x1: "60",
+            x2: "70",
+            y1: "215.97222222222223",
+            y2: "215.97222222222223",
+          },
+          {
+            x1: "65",
+            x2: "65",
+            y1: "236.38888888888889",
+            y2: "215.97222222222223",
+          },
+          {
+            x1: "60",
+            x2: "70",
+            y1: "236.38888888888889",
+            y2: "236.38888888888889",
+          },
+          {
+            x1: "203.33333333333334",
+            x2: "213.33333333333334",
+            y1: "26.777777777777754",
+            y2: "26.777777777777754",
+          },
+          {
+            x1: "208.33333333333334",
+            x2: "208.33333333333334",
+            y1: "62.16666666666668",
+            y2: "26.777777777777754",
+          },
+          {
+            x1: "203.33333333333334",
+            x2: "213.33333333333334",
+            y1: "62.16666666666668",
+            y2: "62.16666666666668",
+          },
+          {
+            x1: "346.6666666666667",
+            x2: "356.6666666666667",
+            y1: "48.555555555555564",
+            y2: "48.555555555555564",
+          },
+          {
+            x1: "351.6666666666667",
+            x2: "351.6666666666667",
+            y1: "75.77777777777779",
+            y2: "48.555555555555564",
+          },
+          {
+            x1: "346.6666666666667",
+            x2: "356.6666666666667",
+            y1: "75.77777777777779",
+            y2: "75.77777777777779",
+          },
+          {
+            x1: "490",
+            x2: "500",
+            y1: "86.66666666666666",
+            y2: "86.66666666666666",
+          },
+          {
+            x1: "495",
+            x2: "495",
+            y1: "127.5",
+            y2: "86.66666666666666",
+          },
+          {
+            x1: "490",
+            x2: "500",
+            y1: "127.5",
+            y2: "127.5",
+          },
+        ]);
+      });
+    });
+
+    describe("extending YAxis domain for ranged Bar values", () => {
+      type BoxPlotDatum = {
+        category: string;
+        min: number;
+        q1: number;
+        q3: number;
+        max: number;
+      };
+
+      const boxPlotData: ReadonlyArray<BoxPlotDatum> = [
+        { category: "A", min: 16, q1: 20, q3: 29, max: 35 },
+        { category: "B", min: 12, q1: 15, q3: 21, max: 27 },
+        { category: "C", min: 22, q1: 26, q3: 34, max: 39 },
+        { category: "D", min: 9, q1: 13, q3: 20, max: 26 },
+      ];
+
+      const boxDataKey = (entry: BoxPlotDatum): [number, number] => [entry.q1, entry.q3];
+      const whiskerDataKey = (entry: BoxPlotDatum): [number, number] => [
+        entry.q3 - entry.min,
+        entry.max - entry.q3,
+      ];
+
+      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
+      const renderWithoutError = createSelectorTestCase((props) => (
+        <BarChart data={boxPlotData} width={500} height={500}>
+          <YAxis />
+          <Bar isAnimationActive={false} dataKey={boxDataKey} />
+          {props.children}
+        </BarChart>
+      ));
+      const renderWithError = createSelectorTestCase((props) => (
+        <BarChart data={boxPlotData} width={500} height={500}>
+          <YAxis />
+          <Bar isAnimationActive={false} dataKey={boxDataKey}>
+            <ErrorBar dataKey={whiskerDataKey} />
+          </Bar>
+          {props.children}
+        </BarChart>
+      ));
+
+      test("getErrorDomainByDataKey should support ranged bar values", () => {
+        const errorDomain = getErrorDomainByDataKey(boxPlotData[0]!, boxDataKey(boxPlotData[0]!), [
+          { direction: "y", dataKey: whiskerDataKey },
+        ]);
+        expect(errorDomain).toEqual([16, 35]);
+      });
+
+      test("selectNumericalDomain should include error bars for ranged bars", () => {
+        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
+          selectNumericalDomain(state, "yAxis", 0, false),
+        );
+
+        expectLastCalledWith(spy, [0, 34]);
+
+        unmount();
+        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
+          selectNumericalDomain(state, "yAxis", 0, false),
+        );
+
+        expectLastCalledWith(spyWith, [0, 39]);
+      });
+    });
+
+    describe("extending YAxis domain when Scatter has its own data (boxplot example)", () => {
+      type BoxPlotDatum = {
+        category: string;
+        min: number;
+        q1: number;
+        q3: number;
+        max: number;
+      };
+
+      const boxPlotData: ReadonlyArray<BoxPlotDatum> = [
+        { category: "A", min: 16, q1: 20, q3: 29, max: 35 },
+        { category: "B", min: 12, q1: 15, q3: 21, max: 27 },
+        { category: "C", min: 22, q1: 26, q3: 34, max: 39 },
+        { category: "D", min: 9, q1: 13, q3: 20, max: 26 },
+      ];
+
+      type OutlierDatum = {
+        category: string;
+        value: number;
+      };
+
+      // All outlier values are within the box plot + ErrorBar range (max=39),
+      // so the YAxis domain should remain [0, 39] driven by the Bar+ErrorBar.
+      // The bug: when Scatter has its own data, selectDisplayedData returns ONLY the
+      // Scatter outliers, ignoring Bar chart data entirely. The domain then becomes
+      // [0, 25] (max of outliers) instead of the correct [0, 39].
+      const outliers: ReadonlyArray<OutlierDatum> = [
+        { category: "A", value: 10 },
+        { category: "B", value: 5 },
+        { category: "D", value: 25 },
+      ];
+
+      const boxDataKey = (entry: BoxPlotDatum): [number, number] => [entry.q1, entry.q3];
+      const whiskerDataKey = (entry: BoxPlotDatum): [number, number] => [
+        entry.q3 - entry.min,
+        entry.max - entry.q3,
+      ];
+
+      const renderWithScatter = createSelectorTestCase((props) => (
+        <BarChart data={boxPlotData} width={500} height={500}>
+          <YAxis />
+          <Bar isAnimationActive={false} dataKey={boxDataKey}>
+            <ErrorBar dataKey={whiskerDataKey} />
+          </Bar>
+          <Scatter data={outliers} dataKey="value" />
+          {props.children}
+        </BarChart>
+      ));
+
+      test("selectNumericalDomain should cover Bar+ErrorBar range even when Scatter has its own data", () => {
+        const { spy } = renderWithScatter((state: RechartsRootState) =>
+          selectNumericalDomain(state, "yAxis", 0, false),
+        );
+
+        // Bar q1/q3 range + ErrorBar extending to min/max: C.max=39 is the highest value.
+        // Scatter outliers are all within that range (max=25 < 39).
+        // Therefore the domain should be [0, 39], not [0, 25].
+        expectLastCalledWith(spy, [0, 39]);
+      });
+    });
+
+    describe("extending XAxis domain", () => {
+      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
+      const renderWithoutError = createSelectorTestCase((props) => (
+        <BarChart data={dataWithError} width={500} height={500} layout="vertical">
+          <XAxis dataKey="uv" type="number" />
+          <Bar isAnimationActive={false} dataKey="uv" />
+          <YAxis type="category" />
+          {props.children}
+        </BarChart>
+      ));
+      const renderWithError = createSelectorTestCase((props) => (
+        <BarChart data={dataWithError} width={500} height={500} layout="vertical">
+          <XAxis dataKey="uv" type="number" />
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" />
+          </Bar>
+          <YAxis type="category" />
+          {props.children}
+        </BarChart>
+      ));
+
+      test("selectAxisDomainIncludingNiceTicks", () => {
+        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
+        );
+        expect(spy).toHaveBeenCalledWith([0, 3400]);
+
+        unmount();
+        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
+        );
+
+        expect(spyWith).toHaveBeenLastCalledWith([0, 3600]);
+      });
+
+      test("XAxis ticks", () => {
+        const { container, unmount } = renderWithoutError();
+
+        expectXAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "65",
+            y: "473",
+          },
+          {
+            textContent: "850",
+            x: "172.5",
+            y: "473",
+          },
+          {
+            textContent: "1700",
+            x: "280",
+            y: "473",
+          },
+          {
+            textContent: "2550",
+            x: "387.5",
+            y: "473",
+          },
+          {
+            textContent: "3400",
+            x: "495",
+            y: "473",
+          },
+        ]);
+
+        unmount();
+        const { container: containerWith } = renderWithError();
+
+        expectXAxisTicks(containerWith, [
+          {
+            textContent: "0",
+            x: "65",
+            y: "473",
+          },
+          {
+            textContent: "900",
+            x: "172.5",
+            y: "473",
+          },
+          {
+            textContent: "1800",
+            x: "280",
+            y: "473",
+          },
+          {
+            textContent: "2700",
+            x: "387.5",
+            y: "473",
+          },
+          {
+            textContent: "3600",
+            x: "495",
+            y: "473",
+          },
+        ]);
+      });
+
+      test("should render bars", () => {
+        const { container, unmount } = renderWithoutError();
+
+        expectBars(container, [
+          {
+            d: "M 65,16.5 h 252.9412 v 92 h -252.9412 Z",
+            height: "92",
+            radius: "0",
+            width: "252.9412",
+            x: "65",
+            y: "16.5",
+          },
+          {
+            d: "M 65,131.5 h 417.3529 v 92 h -417.3529 Z",
+            height: "92",
+            radius: "0",
+            width: "417.3529",
+            x: "65",
+            y: "131.5",
+          },
+          {
+            d: "M 65,246.5 h 404.7059 v 92 h -404.7059 Z",
+            height: "92",
+            radius: "0",
+            width: "404.7059",
+            x: "65",
+            y: "246.5",
+          },
+          {
+            d: "M 65,361.5 h 354.1176 v 92 h -354.1176 Z",
+            height: "92",
+            radius: "0",
+            width: "354.1176",
+            x: "65",
+            y: "361.5",
+          },
+        ]);
+
+        unmount();
+        const { container: containerWith } = renderWithError();
+
+        expectBars(containerWith, [
+          {
+            d: "M 65,16.5 h 238.8889 v 92 h -238.8889 Z",
+            height: "92",
+            radius: "0",
+            width: "238.8889",
+            x: "65",
+            y: "16.5",
+          },
+          {
+            d: "M 65,131.5 h 394.1667 v 92 h -394.1667 Z",
+            height: "92",
+            radius: "0",
+            width: "394.1667",
+            x: "65",
+            y: "131.5",
+          },
+          {
+            d: "M 65,246.5 h 382.2222 v 92 h -382.2222 Z",
+            height: "92",
+            radius: "0",
+            width: "382.2222",
+            x: "65",
+            y: "246.5",
+          },
+          {
+            d: "M 65,361.5 h 334.4444 v 92 h -334.4444 Z",
+            height: "92",
+            radius: "0",
+            width: "334.4444",
+            x: "65",
+            y: "361.5",
+          },
+        ]);
+      });
+
+      test("should render ErrorBars", () => {
+        const { container, unmount } = renderWithoutError();
+
+        expectErrorBars(container, []);
+
+        unmount();
+        const { container: containerWith } = renderWithError();
+
+        expectErrorBars(containerWith, [
+          {
+            x1: "309.8611111111111",
+            x2: "309.8611111111111",
+            y1: "67.5",
+            y2: "57.5",
+          },
+          {
+            x1: "291.94444444444446",
+            x2: "309.8611111111111",
+            y1: "62.5",
+            y2: "62.5",
+          },
+          {
+            x1: "291.94444444444446",
+            x2: "291.94444444444446",
+            y1: "67.5",
+            y2: "57.5",
+          },
+          {
+            x1: "475.8888888888889",
+            x2: "475.8888888888889",
+            y1: "182.5",
+            y2: "172.5",
+          },
+          {
+            x1: "444.8333333333333",
+            x2: "475.8888888888889",
+            y1: "177.5",
+            y2: "177.5",
+          },
+          {
+            x1: "444.8333333333333",
+            x2: "444.8333333333333",
+            y1: "182.5",
+            y2: "172.5",
+          },
+          {
+            x1: "456.77777777777777",
+            x2: "456.77777777777777",
+            y1: "297.5",
+            y2: "287.5",
+          },
+          {
+            x1: "432.8888888888889",
+            x2: "456.77777777777777",
+            y1: "292.5",
+            y2: "292.5",
+          },
+          {
+            x1: "432.8888888888889",
+            x2: "432.8888888888889",
+            y1: "297.5",
+            y2: "287.5",
+          },
+          {
+            x1: "423.3333333333333",
+            x2: "423.3333333333333",
+            y1: "412.5",
+            y2: "402.5",
+          },
+          {
+            x1: "387.5",
+            x2: "423.3333333333333",
+            y1: "407.5",
+            y2: "407.5",
+          },
+          {
+            x1: "387.5",
+            x2: "387.5",
+            y1: "412.5",
+            y2: "402.5",
+          },
+        ]);
+      });
+    });
+
+    describe("extending XAxis domain when data is defined on the graphical item", () => {
+      const [withError, setWithError] = createSignal(false);
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={500}>
+          <XAxis dataKey="uv" type="number" />
+          <Line isAnimationActive={false} dataKey="uv" data={dataWithError}>
+            <Show when={withError()}>
+              <ErrorBar dataKey="uvError" direction="x" />
+            </Show>
+          </Line>
+          {props.children}
+        </LineChart>
+      ));
+
+      test("selectAxisDomainIncludingNiceTicks", () => {
+        setWithError(false);
+        const { spy } = renderTestCase((state: RechartsRootState) =>
+          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
+        );
+        expect(spy).toHaveBeenCalledWith([0, 3400]);
+
+        setWithError(true);
+        flush();
+
+        expect(spy).toHaveBeenLastCalledWith([0, 3600]);
+      });
+
+      test("XAxis ticks", () => {
+        setWithError(false);
+        const { container } = renderTestCase();
+
+        expectXAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "5",
+            y: "473",
+          },
+          {
+            textContent: "850",
+            x: "127.5",
+            y: "473",
+          },
+          {
+            textContent: "1700",
+            x: "250",
+            y: "473",
+          },
+          {
+            textContent: "2550",
+            x: "372.5",
+            y: "473",
+          },
+          {
+            textContent: "3400",
+            x: "495",
+            y: "473",
+          },
+        ]);
+
+        setWithError(true);
+        flush();
+
+        expectXAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "5",
+            y: "473",
+          },
+          {
+            textContent: "900",
+            x: "127.5",
+            y: "473",
+          },
+          {
+            textContent: "1800",
+            x: "250",
+            y: "473",
+          },
+          {
+            textContent: "2700",
+            x: "372.5",
+            y: "473",
+          },
+          {
+            textContent: "3600",
+            x: "495",
+            y: "473",
+          },
+        ]);
+      });
+
+      test("should render ErrorBars", () => {
+        setWithError(false);
+        const { container } = renderTestCase();
+
+        expectErrorBars(container, []);
+
+        setWithError(true);
+        flush();
+
+        expectErrorBars(container, [
+          {
+            x1: "284.02777777777777",
+            x2: "284.02777777777777",
+            y1: "199.41176470588235",
+            y2: "189.41176470588235",
+          },
+          {
+            x1: "263.6111111111111",
+            x2: "284.02777777777777",
+            y1: "194.41176470588235",
+            y2: "194.41176470588235",
+          },
+          {
+            x1: "263.6111111111111",
+            x2: "263.6111111111111",
+            y1: "199.41176470588235",
+            y2: "189.41176470588235",
+          },
+          {
+            x1: "473.22222222222223",
+            x2: "473.22222222222223",
+            y1: "23.529411764705884",
+            y2: "13.529411764705884",
+          },
+          {
+            x1: "437.8333333333333",
+            x2: "473.22222222222223",
+            y1: "18.529411764705884",
+            y2: "18.529411764705884",
+          },
+          {
+            x1: "437.8333333333333",
+            x2: "437.8333333333333",
+            y1: "23.529411764705884",
+            y2: "13.529411764705884",
+          },
+          {
+            x1: "451.44444444444446",
+            x2: "451.44444444444446",
+            y1: "37.05882352941177",
+            y2: "27.058823529411768",
+          },
+          {
+            x1: "424.22222222222223",
+            x2: "451.44444444444446",
+            y1: "32.05882352941177",
+            y2: "32.05882352941177",
+          },
+          {
+            x1: "424.22222222222223",
+            x2: "424.22222222222223",
+            y1: "37.05882352941177",
+            y2: "27.058823529411768",
+          },
+          {
+            x1: "413.3333333333333",
+            x2: "413.3333333333333",
+            y1: "91.1764705882353",
+            y2: "81.1764705882353",
+          },
+          {
+            x1: "372.5",
+            x2: "413.3333333333333",
+            y1: "86.1764705882353",
+            y2: "86.1764705882353",
+          },
+          {
+            x1: "372.5",
+            x2: "372.5",
+            y1: "91.1764705882353",
+            y2: "81.1764705882353",
+          },
+        ]);
+      });
+    });
+
+    describe("should extend domains to negative values", () => {
+      const data = [
+        { x: 100, y: 200, errorY: 30, errorX: 30 },
+        { x: 120, y: 100, errorY: [500, 30], errorX: [200, 30] },
+        { x: 170, y: 300, errorY: [10, 20], errorX: 20 },
+        { x: 140, y: 250, errorY: 30, errorX: 20 },
+        { x: 150, y: 400, errorY: [20, 300], errorX: 30 },
+        { x: 110, y: 280, errorY: 40, errorX: 40 },
+      ];
+      const renderTestCase = createSelectorTestCase((props) => (
+        <ScatterChart
+          width={400}
+          height={400}
+          margin={{
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 20,
+          }}
+        >
+          <XAxis type="number" dataKey="x" />
+          <YAxis type="number" dataKey="y" />
+          <Scatter data={data}>
+            <ErrorBar dataKey="errorX" direction="x" />
+            <ErrorBar dataKey="errorY" direction="y" />
+          </Scatter>
+          {props.children}
+        </ScatterChart>
+      ));
+
+      it("should select XAxis domain", () => {
+        const { spy } = renderTestCase((state: RechartsRootState) =>
+          selectNumericalDomain(state, "xAxis", 0, false),
+        );
+        // lowest X is 120, with 200 error on the left, so -80
+        // highest X is 170, with 20 error on the right, so 190
+        expectLastCalledWith(spy, [-80, 190]);
+      });
+
+      it("should select YAxis domain", () => {
+        const { spy } = renderTestCase((state: RechartsRootState) =>
+          selectNumericalDomain(state, "yAxis", 0, false),
+        );
+        // lowest Y is 100, with 500 error on the bottom, so -400
+        // highest Y is 400, with 300 error on the top, so 700
+        expectLastCalledWith(spy, [-400, 700]);
+      });
+
+      it("should render XAxis ticks", () => {
+        const { container } = renderTestCase();
+        expectXAxisTicks(container, [
+          {
+            textContent: "-80",
+            x: "80",
+            y: "358",
+          },
+          {
+            textContent: "0",
+            x: "155",
+            y: "358",
+          },
+          {
+            textContent: "80",
+            x: "230",
+            y: "358",
+          },
+          {
+            textContent: "160",
+            x: "305",
+            y: "358",
+          },
+          {
+            textContent: "240",
+            x: "380",
+            y: "358",
+          },
+        ]);
+      });
+
+      it("should render YAxis ticks", () => {
+        const { container } = renderTestCase();
+        expectYAxisTicks(container, [
+          {
+            textContent: "-700",
+            x: "72",
+            y: "350",
+          },
+          {
+            textContent: "-350",
+            x: "72",
+            y: "267.5",
+          },
+          {
+            textContent: "0",
+            x: "72",
+            y: "185",
+          },
+          {
+            textContent: "350",
+            x: "72",
+            y: "102.5",
+          },
+          {
+            textContent: "700",
+            x: "72",
+            y: "20",
+          },
+        ]);
+      });
+    });
+  });
+
+  // Ported from recharts: ErrorBar whisker animation (CSS transform scale 0→1).
+  it("Renders Error Bars with animation delay", async () => {
+    const registry = createManagerRegistry();
+    const { container } = render(() => (
+      <AnimationControllerProvider value={registry.controller}>
+        <BarChart data={dataWithError} width={500} height={500}>
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive begin={200} dataKey="uvError" />
+          </Bar>
+        </BarChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+
+    await registry.completeAll();
+    flush();
+
+    expectErrorBars(container, expectedErrorBars);
+    assertAnimationStyles(container, true, {
+      transition: "transform 400ms ease-in-out",
+      transform: "scaleY(1)",
+    });
+
+    // The bare `begin` SVG attribute rides through to the whisker group
+    // (recharts `Props = SVGProps & ErrorBarProps` passthrough).
+    const errorBars = container.querySelectorAll(".recharts-errorBar");
+    expect(errorBars.length).toBeGreaterThan(0);
+    errorBars.forEach((bar) => {
+      expect(bar.getAttribute("begin")).toBe("200");
+    });
+  });
+
+  it("Renders Error Bars with animation", async () => {
+    const registry = createManagerRegistry();
+    const { container } = render(() => (
+      <AnimationControllerProvider value={registry.controller}>
+        <BarChart data={dataWithError} width={500} height={500}>
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive dataKey="uvError" />
+          </Bar>
+        </BarChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+
+    await registry.completeAll();
+    flush();
+
+    expectErrorBars(container, expectedErrorBars);
+    assertAnimationStyles(container, true, {
+      transition: "transform 400ms ease-in-out",
+      transform: "scaleY(1)",
+    });
+  });
+
+  it("Renders Error Bars without animation", () => {
+    const { container } = render(() => (
+      <BarChart data={dataWithError} width={500} height={500}>
+        <Bar isAnimationActive={false} dataKey="uv">
+          <ErrorBar isAnimationActive={false} dataKey="uvError" />
+        </Bar>
+      </BarChart>
+    ));
+    flush();
+
+    expectErrorBars(container, expectedErrorBars);
+    assertAnimationStyles(container, false, {
+      transform: "scaleY(1)",
+    });
+  });
+
+  it("Renders Error Bars with animation duration", async () => {
+    const registry = createManagerRegistry();
+    const { container } = render(() => (
+      <AnimationControllerProvider value={registry.controller}>
+        <BarChart data={dataWithError} width={500} height={500}>
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive animationDuration={400} dataKey="uvError" />
+          </Bar>
+        </BarChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+
+    await registry.completeAll();
+    flush();
+
+    expectErrorBars(container, expectedErrorBars);
+    assertAnimationStyles(container, true, {
+      transition: "transform 400ms ease-in-out",
+      transform: "scaleY(1)",
+    });
+  });
+
+  it("Renders Error Bars with animation easing", async () => {
+    const registry = createManagerRegistry();
+    const { container } = render(() => (
+      <AnimationControllerProvider value={registry.controller}>
+        <BarChart data={dataWithError} width={500} height={500}>
+          <Bar isAnimationActive={false} dataKey="uv">
+            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" />
+          </Bar>
+        </BarChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+
+    await registry.completeAll();
+    flush();
+
+    expectErrorBars(container, expectedErrorBars);
+    assertAnimationStyles(container, true, {
+      transition: "transform 400ms linear",
+      transform: "scaleY(1)",
+    });
+  });
+});