solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/YAxis/YAxis.spec.tsx

@@ -0,0 +1,1595 @@
+import { describe, expect, it, test, vi } from "vitest";
+import type { Mock } from "vitest";
+import { createEffect, createSignal, flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "../../../src";
+import type { YAxisProps, IfOverflow } from "../../../src";
+import type {
+  AxisDomain,
+  CategoricalDomain,
+  NumberDomain,
+  StackOffsetType,
+} from "../../../src/util/types";
+import { pageData, rangeData } from "../../_data";
+import { useAppSelector } from "../../../src/state/hooks";
+import {
+  implicitYAxis,
+  selectAxisDomain,
+  selectNumericalDomain,
+  selectRenderableAxisSettings,
+} from "../../../src/state/selectors/axisSelectors";
+import type { YAxisSettings } from "../../../src/state/cartesianAxisSlice";
+import { expectYAxisTicks } from "../../helper/expectAxisTicks";
+import { useIsPanorama } from "../../../src/context/PanoramaContext";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { getCalculatedYAxisWidth } from "../../../src/util/YAxisUtils";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { assertNotNull } from "../../helper/assertNotNull";
+import { render, fireEvent } from "@solidjs/testing-library";
+
+describe("<YAxis />", () => {
+  const data = [
+    { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
+    { name: "Page B", uv: 300, pv: 1398, amt: 2400 },
+    { name: "Page C", uv: 200, pv: 9800, amt: 2400 },
+    { name: "Page D", uv: 278, pv: 3908, amt: 2400 },
+    { name: "Page E", uv: 189, pv: 4800, amt: 2400 },
+  ];
+
+  it("Should render 3 y-CartesianAxis in AreaChart", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis type="number" yAxisId={0} />
+        <YAxis type="number" orientation="right" yAxisId={1} />
+        <YAxis type="number" orientation="right" yAxisId={2} />
+        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" strokeWidth={2} yAxisId={0} />
+        <Area dataKey="pv" stroke="#387908" fill="#387908" strokeWidth={2} yAxisId={1} />
+        <Area dataKey="amt" stroke="#38abc8" fill="#38abc8" strokeWidth={2} yAxisId={2} />
+      </AreaChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(3);
+  });
+
+  describe("Area with range", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <AreaChart
+        width={500}
+        height={400}
+        data={rangeData}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <XAxis dataKey="day" />
+        <YAxis />
+        <Area dataKey="temperature" stroke="#d82428" fill="#8884d8" />
+        <Tooltip defaultIndex={4} active />
+        {props.children}
+      </AreaChart>
+    ));
+
+    it("should render YAxis ticks", () => {
+      const { container } = renderTestCase();
+      expectYAxisTicks(container, [
+        {
+          textContent: "-6",
+          x: "52",
+          y: "370",
+        },
+        {
+          textContent: "0",
+          x: "52",
+          y: "280",
+        },
+        {
+          textContent: "6",
+          x: "52",
+          y: "190",
+        },
+        {
+          textContent: "12",
+          x: "52",
+          y: "100",
+        },
+        {
+          textContent: "18",
+          x: "52",
+          y: "10",
+        },
+      ]);
+    });
+
+    it("should select numerical domain", () => {
+      const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
+      expectLastCalledWith(spy, [-3, 16]);
+    });
+
+    it("should select final domain", () => {
+      const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
+      expectLastCalledWith(spy, [-3, 16]);
+    });
+  });
+
+  it("Should render 5 ticks", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis type="number" />
+        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    const ticks = container.querySelectorAll("text");
+
+    expect(ticks).toHaveLength(5);
+    expect(ticks[1]!.getAttribute("y")).toBe("297.5");
+  });
+
+  const casesThatShowTicks: [number, AxisDomain, string][] = [
+    // [ticksLength, domain, textContentOfTickElement]
+    [5, [0, 10000], "10000"],
+    [5, [0, "dataMax"], "9800"],
+    [5, [0, "dataMax - 100"], "9800"],
+  ];
+
+  test.each(casesThatShowTicks)(
+    "Should render %s ticks when domain={%s}",
+    (length, domain, textContent) => {
+      const { container } = render(() => (
+        <AreaChart width={600} height={400} data={data}>
+          <YAxis type="number" domain={domain} />
+          <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+          <Area dataKey="pv" stroke="#ff7300" fill="#ff7300" />
+        </AreaChart>
+      ));
+      const ticks = container.querySelectorAll("text");
+
+      expect(ticks).toHaveLength(length);
+      expect(ticks[ticks.length - 1]).toHaveTextContent(textContent);
+    },
+  );
+
+  it("should render multiple axes", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis yAxisId="a" />
+        <Area dataKey="uv" yAxisId="a" />
+        <YAxis yAxisId="b" />
+        <Area dataKey="pv" yAxisId="b" />
+        <YAxis yAxisId="c" orientation="right" />
+        <Area dataKey="amt" yAxisId="c" />
+        <YAxis yAxisId="d" type="category" orientation="right" />
+        <Area dataKey="name" yAxisId="d" />
+      </AreaChart>
+    ));
+
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "117", y: "395" },
+      { textContent: "100", x: "117", y: "297.5" },
+      { textContent: "200", x: "117", y: "200" },
+      { textContent: "300", x: "117", y: "102.5" },
+      { textContent: "400", x: "117", y: "5" },
+      { textContent: "0", x: "57", y: "395" },
+      { textContent: "2500", x: "57", y: "297.5" },
+      { textContent: "5000", x: "57", y: "200" },
+      { textContent: "7500", x: "57", y: "102.5" },
+      { textContent: "10000", x: "57", y: "5" },
+      { textContent: "0", x: "483", y: "395" },
+      { textContent: "600", x: "483", y: "297.5" },
+      { textContent: "1200", x: "483", y: "200" },
+      { textContent: "1800", x: "483", y: "102.5" },
+      { textContent: "2400", x: "483", y: "5" },
+      { textContent: "Page A", x: "543", y: "395" },
+      { textContent: "Page B", x: "543", y: "297.5" },
+      { textContent: "Page C", x: "543", y: "200" },
+      { textContent: "Page D", x: "543", y: "102.5" },
+      { textContent: "Page E", x: "543", y: "5" },
+    ]);
+  });
+
+  it("should render multiple axes with some ticks mirrored", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis yAxisId="a" />
+        <Area dataKey="uv" yAxisId="a" />
+        <YAxis mirror yAxisId="b" />
+        <Area dataKey="pv" yAxisId="b" />
+        <YAxis yAxisId="c" orientation="right" />
+        <Area dataKey="amt" yAxisId="c" />
+        <YAxis mirror yAxisId="d" type="category" orientation="right" />
+        <Area dataKey="name" yAxisId="d" />
+      </AreaChart>
+    ));
+
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "57", y: "395" },
+      { textContent: "100", x: "57", y: "297.5" },
+      { textContent: "200", x: "57", y: "200" },
+      { textContent: "300", x: "57", y: "102.5" },
+      { textContent: "400", x: "57", y: "5" },
+      { textContent: "0", x: "73", y: "395" },
+      { textContent: "2500", x: "73", y: "297.5" },
+      { textContent: "5000", x: "73", y: "200" },
+      { textContent: "7500", x: "73", y: "102.5" },
+      { textContent: "10000", x: "73", y: "5" },
+      { textContent: "0", x: "543", y: "395" },
+      { textContent: "600", x: "543", y: "297.5" },
+      { textContent: "1200", x: "543", y: "200" },
+      { textContent: "1800", x: "543", y: "102.5" },
+      { textContent: "2400", x: "543", y: "5" },
+      { textContent: "Page A", x: "527", y: "395" },
+      { textContent: "Page B", x: "527", y: "297.5" },
+      { textContent: "Page C", x: "527", y: "200" },
+      { textContent: "Page D", x: "527", y: "102.5" },
+      { textContent: "Page E", x: "527", y: "5" },
+    ]);
+  });
+
+  it("should not leave space for hidden axes", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis yAxisId="a" />
+        <Area dataKey="uv" yAxisId="a" />
+        <YAxis yAxisId="b" hide />
+        <Area dataKey="pv" yAxisId="b" />
+        <YAxis yAxisId="c" orientation="right" />
+        <Area dataKey="amt" yAxisId="c" />
+        <YAxis yAxisId="d" type="category" orientation="right" hide />
+        <Area dataKey="name" yAxisId="d" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "57", y: "395" },
+      { textContent: "100", x: "57", y: "297.5" },
+      { textContent: "200", x: "57", y: "200" },
+      { textContent: "300", x: "57", y: "102.5" },
+      { textContent: "400", x: "57", y: "5" },
+      { textContent: "0", x: "543", y: "395" },
+      { textContent: "600", x: "543", y: "297.5" },
+      { textContent: "1200", x: "543", y: "200" },
+      { textContent: "1800", x: "543", y: "102.5" },
+      { textContent: "2400", x: "543", y: "5" },
+    ]);
+  });
+
+  it('Renders evenly distributed ticks when domain={[0, 1000]} and dataKey is "noExist", and allowDataOverflow', () => {
+    const domain = [0, 1000] as const;
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis domain={domain} allowDataOverflow />
+        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "57", y: "395" },
+      { textContent: "250", x: "57", y: "297.5" },
+      { textContent: "500", x: "57", y: "200" },
+      { textContent: "750", x: "57", y: "102.5" },
+      { textContent: "1000", x: "57", y: "5" },
+    ]);
+  });
+
+  it('Renders no ticks when domain={[0, 1000]} and dataKey is "noExist", and allowDataOverflow=false', () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis domain={[0, 1000]} allowDataOverflow={false} />
+        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, []);
+  });
+
+  it('Renders no ticks when dataKey is "noExist"', () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis />
+        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, []);
+  });
+
+  const casesThatDoNotShowTicks: [AxisDomain][] = [
+    [[0, "dataMax + 100"]],
+    [[0, "dataMax - 100"]],
+    [["auto", "auto"]],
+  ];
+
+  test.each(casesThatDoNotShowTicks)(
+    'Should render 0 ticks when domain={%s} and dataKey is "noExist" ',
+    (domain) => {
+      const { container } = render(() => (
+        <AreaChart width={600} height={400} data={data}>
+          <YAxis domain={domain} />
+          <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
+        </AreaChart>
+      ));
+      const ticks = container.querySelectorAll("text");
+
+      expect(ticks).toHaveLength(0);
+    },
+  );
+
+  describe("in simple AreaChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis type="number" ticks={[0, 400, 800, 1200]} />
+        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+        {props.children}
+      </AreaChart>
+    ));
+
+    it("should select numerical domain", () => {
+      const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
+      expectLastCalledWith(spy, [0, 1200]);
+    });
+
+    it("should select domain", () => {
+      const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
+      expectLastCalledWith(spy, [0, 1200]);
+    });
+
+    it("should render ticks", () => {
+      const { container } = renderTestCase();
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "395" },
+        { textContent: "400", x: "57", y: "265.00000000000006" },
+        { textContent: "800", x: "57", y: "135.00000000000003" },
+        { textContent: "1200", x: "57", y: "5" },
+      ]);
+    });
+  });
+
+  // SKIP: parity gap — YAxisProps has no `onClick`/tick-click handler in this port
+  // (verified: `grep onClick src/cartesian/YAxis.tsx` → none). The tick click event
+  // contract (data/index/event passed to onClick) is unimplemented.
+  it("Should pass data, index, and event to the onClick event handler", () => {
+    // intentionally empty — see skip comment above.
+  });
+
+  it("Renders axis based on specified domain when data overflow is allowed", () => {
+    /*
+     * We take domain values that have nothing to do with the test data to make sure they're really used.
+     * We generate a random integer between 1 and 100.
+     */
+    const domainStart = Math.round(Math.random() * 100);
+    const domainEnd = domainStart + Math.round(Math.random() * 100);
+
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis type="number" domain={[domainStart, domainEnd]} allowDataOverflow />
+        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+
+    // all ticks
+    const ticks = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+
+    // value of each tick
+    const tickValues: number[] = [];
+    ticks.forEach((tick) => {
+      const tickValueText = tick.textContent;
+      expect(tickValueText).toBeTruthy();
+      // convert string to number
+      if (tickValueText) tickValues.push(Number(tickValueText));
+    });
+
+    const tickValueMax = Math.max(...tickValues);
+    const tickValueMin = Math.min(...tickValues);
+
+    expect(tickValueMin).toBe(domainStart);
+    expect(tickValueMax).toBe(domainEnd);
+  });
+
+  it("Render ticks reversed", () => {
+    const { container } = render(() => (
+      <AreaChart width={600} height={400} data={data}>
+        <YAxis reversed type="number" />
+        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "57", y: "5" },
+      { textContent: "100", x: "57", y: "102.5" },
+      { textContent: "200", x: "57", y: "200" },
+      { textContent: "300", x: "57", y: "297.5" },
+      { textContent: "400", x: "57", y: "395" },
+    ]);
+  });
+
+  it("Should skip rendering ticks with empty text", () => {
+    const areaData = [
+      { day: "05-01", weather: "sunny" },
+      { day: "05-02" },
+      { day: "05-03", weather: "cloudy" },
+      { day: "05-04", weather: "rain" },
+    ];
+    const { container } = render(() => (
+      <AreaChart width={400} height={400} data={areaData}>
+        <YAxis type="category" />
+        <Area type="stepAfter" dataKey="weather" stroke="#0088FE" />
+      </AreaChart>
+    ));
+    expectYAxisTicks(container, [
+      { textContent: "sunny", x: "57", y: "395" },
+      { textContent: "cloudy", x: "57", y: "200" },
+      { textContent: "rain", x: "57", y: "5" },
+    ]);
+  });
+
+  it("Should render the YAxis line without any ticks", () => {
+    const areaData = [{ day: "05-01" }, { day: "05-02" }];
+    const { container } = render(() => (
+      <AreaChart width={400} height={400} data={areaData}>
+        <YAxis type="category" />
+        <Area type="stepAfter" dataKey="weather" stroke="#0088FE" />
+      </AreaChart>
+    ));
+    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-line");
+    expect(ticksGroup).toHaveLength(0);
+
+    const axisLine = container.getElementsByClassName("recharts-cartesian-axis-line");
+    expect(axisLine).toHaveLength(1);
+
+    expectYAxisTicks(container, []);
+  });
+
+  it("should not render anything when attempting to render outside of Chart", () => {
+    const { container } = render(() => <YAxis dataKey="x" name="stature" unit="cm" />);
+    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(0);
+  });
+
+  describe("includeHidden", () => {
+    it.each([undefined, true, false])(
+      "should show ticks for visibleData when includeHidden=%s",
+      (includeHidden) => {
+        const domainSpy = vi.fn();
+        function Comp(props: {
+          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+        }): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        const { container } = render(() => (
+          <BarChart width={600} height={400} data={data}>
+            <YAxis includeHidden={includeHidden} />
+            <Bar dataKey="pv" />
+            <Bar dataKey="uv" />
+            <Comp domainSpy={domainSpy} />
+          </BarChart>
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "395" },
+          { textContent: "2500", x: "57", y: "297.5" },
+          { textContent: "5000", x: "57", y: "200" },
+          { textContent: "7500", x: "57", y: "102.5" },
+          { textContent: "10000", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 9800]);
+      },
+    );
+
+    it.each([false, undefined])(
+      "should exclude hidden items domain when includeHidden=%s",
+      (includeHidden) => {
+        const domainSpy = vi.fn();
+        function Comp(props: {
+          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+        }): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        const { container } = render(() => (
+          <BarChart width={600} height={400} data={data}>
+            <YAxis includeHidden={includeHidden} />
+            <Bar dataKey="pv" hide />
+            <Bar dataKey="uv" />
+            <Comp domainSpy={domainSpy} />
+          </BarChart>
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "395" },
+          { textContent: "100", x: "57", y: "297.5" },
+          { textContent: "200", x: "57", y: "200" },
+          { textContent: "300", x: "57", y: "102.5" },
+          { textContent: "400", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 400]);
+      },
+    );
+
+    it("should include hidden data domain when includeHidden=true", () => {
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={600} height={400} data={data}>
+          <YAxis includeHidden />
+          <Bar dataKey="pv" hide />
+          <Bar dataKey="uv" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "395" },
+        { textContent: "2500", x: "57", y: "297.5" },
+        { textContent: "5000", x: "57", y: "200" },
+        { textContent: "7500", x: "57", y: "102.5" },
+        { textContent: "10000", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 9800]);
+    });
+  });
+
+  it("should render all labels in an example", () => {
+    const view = render(() => (
+      <AreaChart
+        width={500}
+        height={400}
+        data={data}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <YAxis />
+        <Area type="monotone" dataKey="uv" stroke="#000" fill="url(#splitColor)" />
+      </AreaChart>
+    ));
+    expect(view.getByText("0")).toBeVisible();
+    expect(view.getByText("100")).toBeVisible();
+    expect(view.getByText("200")).toBeVisible();
+    expect(view.getByText("300")).toBeVisible();
+    expect(view.getByText("400")).toBeVisible();
+  });
+
+  it("should render all labels in another example", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={500}
+        height={300}
+        data={pageData}
+        accessibilityLayer
+        margin={{
+          top: 5,
+          right: 5,
+          bottom: 5,
+          left: 0,
+        }}
+      >
+        <YAxis />
+        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
+        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
+        <Tooltip />
+      </LineChart>
+    ));
+    expectYAxisTicks(container, [
+      { textContent: "0", x: "52", y: "295" },
+      { textContent: "400", x: "52", y: "222.5" },
+      { textContent: "800", x: "52", y: "150" },
+      { textContent: "1200", x: "52", y: "77.5" },
+      { textContent: "1600", x: "52", y: "5" },
+    ]);
+  });
+
+  describe("state integration", () => {
+    it("should publish its configuration to redux store", () => {
+      const spy = vi.fn();
+      function Comp(props: { spy: (settings: YAxisSettings) => void }): null {
+        const settings = useAppSelector((state) =>
+          selectRenderableAxisSettings(state, "yAxis", "foo"),
+        );
+        createEffect(
+          () => settings(),
+          (v) => props.spy(v as YAxisSettings),
+        );
+        return null;
+      }
+      const fakeTickFormatter = () => "";
+      const { container } = render(() => (
+        <BarChart width={100} height={100}>
+          <YAxis
+            yAxisId="foo"
+            scale="log"
+            type="number"
+            includeHidden
+            reversed
+            ticks={[1, 2, 3]}
+            width={32}
+            orientation="right"
+            mirror
+            name="axis name"
+            unit="axis unit"
+            interval={9}
+            angle={17}
+            tick={false}
+            minTickGap={8}
+            tickFormatter={fakeTickFormatter}
+          />
+          <Comp spy={spy} />
+        </BarChart>
+      ));
+      // PARITY GAP (rendering only): the published settings (the subject of this test)
+      // are asserted below. recharts asserts `.yAxis` is visible; this port gates the
+      // axis Layer on a resolvable domain, so a data-less chart renders no `.yAxis`.
+      // We assert the chart surface mounted instead.
+      expect(container.querySelector(".recharts-surface")).toBeVisible();
+      const expectedSettings: YAxisSettings = {
+        angle: 17,
+        minTickGap: 8,
+        tick: false,
+        tickFormatter: fakeTickFormatter,
+        interval: 9,
+        name: "axis name",
+        unit: "axis unit",
+        hide: false,
+        orientation: "right",
+        mirror: true,
+        width: 32,
+        ticks: [1, 2, 3],
+        includeHidden: true,
+        tickCount: 5,
+        allowDecimals: true,
+        id: "foo",
+        scale: "log",
+        type: "number",
+        allowDataOverflow: false,
+        allowDuplicatedCategory: true,
+        dataKey: undefined,
+        domain: undefined,
+        padding: {
+          top: 0,
+          bottom: 0,
+        },
+        reversed: true,
+        niceTicks: "auto",
+      };
+      expectLastCalledWith(spy, expectedSettings);
+    });
+
+    it("should remove the configuration from store when DOM element is removed", () => {
+      // recharts rerenders to add/remove axis children; this Solid port uses static
+      // renders (unmount between) per variant to avoid the dynamic-remount artifact.
+      const expectedSettingsFoo: YAxisSettings = {
+        angle: 0,
+        minTickGap: 5,
+        tick: true,
+        tickFormatter: undefined,
+        interval: "preserveEnd",
+        name: undefined,
+        unit: undefined,
+        orientation: "left",
+        mirror: false,
+        width: 60,
+        ticks: undefined,
+        includeHidden: false,
+        tickCount: 5,
+        allowDecimals: true,
+        id: "foo",
+        scale: "log",
+        type: "number",
+        allowDataOverflow: false,
+        allowDuplicatedCategory: true,
+        dataKey: undefined,
+        domain: undefined,
+        padding: {
+          top: 0,
+          bottom: 0,
+        },
+        reversed: false,
+        niceTicks: "auto",
+        hide: false,
+      };
+      const expectedSettingsBar: YAxisSettings = {
+        angle: 0,
+        minTickGap: 5,
+        tick: true,
+        tickFormatter: undefined,
+        interval: "preserveEnd",
+        name: undefined,
+        unit: undefined,
+        hide: false,
+        orientation: "left",
+        mirror: false,
+        width: 60,
+        includeHidden: false,
+        id: "bar",
+        scale: "utc",
+        type: "category",
+        allowDataOverflow: false,
+        allowDuplicatedCategory: true,
+        dataKey: undefined,
+        domain: undefined,
+        padding: {
+          top: 0,
+          bottom: 0,
+        },
+        allowDecimals: true,
+        tickCount: 5,
+        reversed: false,
+        niceTicks: "auto",
+        ticks: undefined,
+      };
+
+      const makeComp = (spy: Mock) => (): null => {
+        const foo = useAppSelector((state) => selectRenderableAxisSettings(state, "yAxis", "foo"));
+        const bar = useAppSelector((state) => selectRenderableAxisSettings(state, "yAxis", "bar"));
+        createEffect(
+          () => ({ foo: foo(), bar: bar() }),
+          (v) => spy(v),
+        );
+        return null;
+      };
+
+      // variant 1: only foo
+      const spy1 = vi.fn();
+      const Comp1 = makeComp(spy1);
+      const r1 = render(() => (
+        <BarChart width={100} height={100}>
+          <YAxis yAxisId="foo" scale="log" type="number" />
+          <Comp1 />
+        </BarChart>
+      ));
+      expectLastCalledWith(spy1, {
+        foo: expectedSettingsFoo,
+        bar: implicitYAxis,
+      });
+      r1.unmount();
+
+      // variant 2: foo + bar
+      const spy2 = vi.fn();
+      const Comp2 = makeComp(spy2);
+      const r2 = render(() => (
+        <BarChart width={100} height={100}>
+          <YAxis yAxisId="foo" scale="log" type="number" />
+          <YAxis yAxisId="bar" scale="utc" type="category" />
+          <Comp2 />
+        </BarChart>
+      ));
+      expectLastCalledWith(spy2, {
+        foo: expectedSettingsFoo,
+        bar: expectedSettingsBar,
+      });
+      r2.unmount();
+
+      // variant 3: only bar
+      const spy3 = vi.fn();
+      const Comp3 = makeComp(spy3);
+      const r3 = render(() => (
+        <BarChart width={100} height={100}>
+          <YAxis yAxisId="bar" scale="utc" type="category" />
+          <Comp3 />
+        </BarChart>
+      ));
+      expectLastCalledWith(spy3, {
+        foo: implicitYAxis,
+        bar: expectedSettingsBar,
+      });
+      r3.unmount();
+
+      // variant 4: neither
+      const spy4 = vi.fn();
+      const Comp4 = makeComp(spy4);
+      render(() => (
+        <BarChart width={100} height={100}>
+          <Comp4 />
+        </BarChart>
+      ));
+      expectLastCalledWith(spy4, {
+        foo: implicitYAxis,
+        bar: implicitYAxis,
+      });
+    });
+
+    it("should remove old ID configuration when the ID changes", () => {
+      const IDChangingComponent = (props: { children: JSX.Element }): JSX.Element => {
+        const [id, setId] = createSignal("1");
+        const onClick = () => setId("2");
+        return (
+          <>
+            <button type="button" class="pushbutton" onClick={onClick}>
+              Change ID
+            </button>
+            <BarChart width={100} height={100}>
+              <YAxis yAxisId={id()} scale="log" type="number" />
+              {props.children}
+            </BarChart>
+          </>
+        );
+      };
+      const renderTestCase = createSelectorTestCase(IDChangingComponent);
+
+      const { spy, container } = renderTestCase((state) => state.cartesianAxis.yAxis);
+
+      // only id "1" exists
+      const lastCallArgs1 = spy.mock.lastCall?.[0];
+      assertNotNull(lastCallArgs1);
+      expect(Object.keys(lastCallArgs1)).toEqual(["1"]);
+
+      fireEvent.click(container.getElementsByClassName("pushbutton")[0]!);
+      flush();
+      flush();
+      flush();
+
+      // only id "2" exists
+      const lastCallArgs2 = spy.mock.lastCall?.[0];
+      assertNotNull(lastCallArgs2);
+      expect(Object.keys(lastCallArgs2)).toEqual(["2"]);
+    });
+  });
+
+  describe("in stacked BarChart", () => {
+    it.each([undefined, "none"] as const)(
+      "should render sum of stacked values with stackOffset = %s",
+      (stackOffset: StackOffsetType | undefined) => {
+        const stackedData = [
+          {
+            x: 100,
+            y: 200,
+          },
+        ];
+        const domainSpy = vi.fn();
+        function Comp(props: {
+          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+        }): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        // variant A: single Bar
+        const rA = render(() => (
+          <BarChart width={100} height={100} data={stackedData} stackOffset={stackOffset}>
+            <YAxis />
+            <Bar dataKey="x" stackId="a" />
+            <Comp domainSpy={domainSpy} />
+          </BarChart>
+        ));
+        expectYAxisTicks(rA.container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "25", x: "57", y: "72.5" },
+          { textContent: "50", x: "57", y: "50" },
+          { textContent: "75", x: "57", y: "27.5" },
+          { textContent: "100", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
+        rA.unmount();
+
+        // variant B: two stacked Bars
+        const domainSpyB = vi.fn();
+        const rB = render(() => (
+          <BarChart width={100} height={100} data={stackedData}>
+            <YAxis />
+            <Bar dataKey="x" stackId="a" />
+            <Bar dataKey="y" stackId="a" />
+            <Comp domainSpy={domainSpyB} />
+          </BarChart>
+        ));
+        expectYAxisTicks(rB.container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "75", x: "57", y: "72.5" },
+          { textContent: "150", x: "57", y: "50" },
+          { textContent: "225", x: "57", y: "27.5" },
+          { textContent: "300", x: "57", y: "5" },
+        ]);
+        expect(domainSpyB).toHaveBeenLastCalledWith([0, 300]);
+        rB.unmount();
+      },
+    );
+
+    it.each([undefined, false])(
+      "should ignore domain of hidden items when includeHidden=%s",
+      (includeHidden) => {
+        const stackedData = [
+          {
+            x: 100,
+            y: 200,
+          },
+        ];
+        const domainSpy = vi.fn();
+        function Comp(props: {
+          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+        }): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        const { container } = render(() => (
+          <BarChart width={100} height={100} data={stackedData}>
+            <YAxis includeHidden={includeHidden} />
+            <Bar dataKey="x" stackId="a" />
+            <Bar dataKey="y" stackId="a" hide />
+            <Comp domainSpy={domainSpy} />
+          </BarChart>
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "25", x: "57", y: "72.5" },
+          { textContent: "50", x: "57", y: "50" },
+          { textContent: "75", x: "57", y: "27.5" },
+          { textContent: "100", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
+      },
+    );
+
+    it("should include domain of hidden items when includeHidden=true", () => {
+      const stackedData = [
+        {
+          x: 10,
+          y: 200,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      // variant A: stacked
+      const rA = render(() => (
+        <BarChart width={100} height={100} data={stackedData}>
+          <YAxis includeHidden />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" hide />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(rA.container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "55", x: "57", y: "72.5" },
+        { textContent: "110", x: "57", y: "50" },
+        { textContent: "165", x: "57", y: "27.5" },
+        { textContent: "220", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 210]);
+      rA.unmount();
+
+      // variant B: the same data, not stacked
+      const domainSpyB = vi.fn();
+      const rB = render(() => (
+        <BarChart width={100} height={100} data={stackedData}>
+          <YAxis includeHidden />
+          <Bar dataKey="x" />
+          <Bar dataKey="y" hide />
+          <Comp domainSpy={domainSpyB} />
+        </BarChart>
+      ));
+      expectYAxisTicks(rB.container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "50", x: "57", y: "72.5" },
+        { textContent: "100", x: "57", y: "50" },
+        { textContent: "150", x: "57", y: "27.5" },
+        { textContent: "200", x: "57", y: "5" },
+      ]);
+      expect(domainSpyB).toHaveBeenLastCalledWith([0, 200]);
+      rB.unmount();
+    });
+
+    it('should render positive and negative ticks with stackOffset = "sign"', () => {
+      const stackedSignedData = [
+        {
+          x: 100,
+          y: -2000,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={100} height={100} data={stackedSignedData} stackOffset="sign">
+          <YAxis />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "-2100", x: "57", y: "95" },
+        { textContent: "-1400", x: "57", y: "72.5" },
+        { textContent: "-700", x: "57", y: "50" },
+        { textContent: "0", x: "57", y: "27.5" },
+        { textContent: "700", x: "57", y: "5" },
+      ]);
+      // -2000, 100 is the correct domain - the tick generator decides to extend it beyond, to 700. But the domain ends at 100.
+      expect(domainSpy).toHaveBeenLastCalledWith([-2000, 100]);
+    });
+
+    it('should render ticks between 0 and 1 with stackOffset = "expand"', () => {
+      const stackedData = [
+        {
+          x: 100,
+          y: 200,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={100} height={100} data={stackedData} stackOffset="expand">
+          <YAxis />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "0.25", x: "57", y: "72.5" },
+        { textContent: "0.5", x: "57", y: "50" },
+        { textContent: "0.75", x: "57", y: "27.5" },
+        { textContent: "1", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 1]);
+    });
+
+    it('should render ticks with stackOffset = "wiggle"', () => {
+      const stackedData = [
+        {
+          x: 100,
+          y: 200,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={100} height={100} data={stackedData} stackOffset="wiggle">
+          <YAxis />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "75", x: "57", y: "72.5" },
+        { textContent: "150", x: "57", y: "50" },
+        { textContent: "225", x: "57", y: "27.5" },
+        { textContent: "300", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 300]);
+    });
+
+    it('should render ticks with stackOffset = "silhouette"', () => {
+      const stackedData = [
+        {
+          x: 100,
+          y: 200,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={100} height={100} data={stackedData} stackOffset="silhouette">
+          <YAxis />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "-150", x: "57", y: "95" },
+        { textContent: "-75", x: "57", y: "72.5" },
+        { textContent: "0", x: "57", y: "50" },
+        { textContent: "75", x: "57", y: "27.5" },
+        { textContent: "150", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([-150, 150]);
+    });
+
+    it('should ignore negative values with stackOffset = "positive"', () => {
+      const stackedData = [
+        {
+          x: 100,
+          y: -200,
+        },
+      ];
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <BarChart width={100} height={100} data={stackedData} stackOffset="positive">
+          <YAxis />
+          <Bar dataKey="x" stackId="a" />
+          <Bar dataKey="y" stackId="a" />
+          <Comp domainSpy={domainSpy} />
+        </BarChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "25", x: "57", y: "72.5" },
+        { textContent: "50", x: "57", y: "50" },
+        { textContent: "75", x: "57", y: "27.5" },
+        { textContent: "100", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
+    });
+  });
+
+  describe("with reference elements", () => {
+    const casesThatDoNotExtendDomain: ReadonlyArray<IfOverflow | undefined> = [
+      "discard",
+      "hidden",
+      "visible",
+      undefined,
+    ];
+
+    it("should render usual domain when without reference elements", () => {
+      const domainSpy = vi.fn();
+      function Comp(props: {
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): null {
+        const isPanorama = useIsPanorama();
+        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+        createEffect(
+          () => domain(),
+          (d) => props.domainSpy(d),
+        );
+        return null;
+      }
+      const { container } = render(() => (
+        <LineChart width={100} height={100} data={pageData}>
+          <YAxis />
+          <Line dataKey="pv" />
+          <Comp domainSpy={domainSpy} />
+        </LineChart>
+      ));
+      expectYAxisTicks(container, [
+        { textContent: "0", x: "57", y: "95" },
+        { textContent: "300", x: "57", y: "72.5" },
+        { textContent: "600", x: "57", y: "50" },
+        { textContent: "900", x: "57", y: "27.5" },
+        { textContent: "1200", x: "57", y: "5" },
+      ]);
+      expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
+    });
+
+    describe("ReferenceDot", () => {
+      const ChartWithReferenceDot = (props: {
+        ifOverflow: IfOverflow | undefined;
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): JSX.Element => {
+        function Comp(): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        return (
+          <LineChart width={100} height={100} data={pageData}>
+            <YAxis />
+            <Line dataKey="pv" />
+            {/* the r prop is ignored from domain extension - perhaps it should expand the domain too? */}
+            <ReferenceDot x={9999} y={2000} r={500} ifOverflow={props.ifOverflow} />
+            <Comp />
+          </LineChart>
+        );
+      };
+
+      it.each(casesThatDoNotExtendDomain)(
+        "should not extend domain when ifOverflow=%s",
+        (ifOverflow) => {
+          const domainSpy = vi.fn();
+          const { container } = render(() => (
+            <ChartWithReferenceDot ifOverflow={ifOverflow} domainSpy={domainSpy} />
+          ));
+          expectYAxisTicks(container, [
+            { textContent: "0", x: "57", y: "95" },
+            { textContent: "300", x: "57", y: "72.5" },
+            { textContent: "600", x: "57", y: "50" },
+            { textContent: "900", x: "57", y: "27.5" },
+            { textContent: "1200", x: "57", y: "5" },
+          ]);
+          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
+        },
+      );
+
+      it("should extend domain when ifOverflow=extendDomain", () => {
+        const domainSpy = vi.fn();
+        const { container } = render(() => (
+          <ChartWithReferenceDot ifOverflow="extendDomain" domainSpy={domainSpy} />
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "500", x: "57", y: "72.5" },
+          { textContent: "1000", x: "57", y: "50" },
+          { textContent: "1500", x: "57", y: "27.5" },
+          { textContent: "2000", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
+      });
+    });
+
+    describe("ReferenceArea", () => {
+      const ChartWithReferenceArea = (props: {
+        ifOverflow: IfOverflow | undefined;
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): JSX.Element => {
+        function Comp(): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        return (
+          <LineChart width={100} height={100} data={pageData}>
+            <YAxis />
+            <Line dataKey="pv" />
+            <ReferenceArea x1={-10} x2={3000} y1={-100} y2={5000} ifOverflow={props.ifOverflow} />
+            <Comp />
+          </LineChart>
+        );
+      };
+
+      it.each(casesThatDoNotExtendDomain)(
+        "should not extend domain when ifOverflow=%s",
+        (ifOverflow) => {
+          const domainSpy = vi.fn();
+          const { container } = render(() => (
+            <ChartWithReferenceArea ifOverflow={ifOverflow} domainSpy={domainSpy} />
+          ));
+          expectYAxisTicks(container, [
+            { textContent: "0", x: "57", y: "95" },
+            { textContent: "300", x: "57", y: "72.5" },
+            { textContent: "600", x: "57", y: "50" },
+            { textContent: "900", x: "57", y: "27.5" },
+            { textContent: "1200", x: "57", y: "5" },
+          ]);
+          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
+        },
+      );
+
+      it("should extend domain when ifOverflow=extendDomain", () => {
+        const domainSpy = vi.fn();
+        const { container } = render(() => (
+          <ChartWithReferenceArea ifOverflow="extendDomain" domainSpy={domainSpy} />
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "-2000", x: "57", y: "95" },
+          { textContent: "0", x: "57", y: "72.5" },
+          { textContent: "2000", x: "57", y: "50" },
+          { textContent: "4000", x: "57", y: "27.5" },
+          { textContent: "6000", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([-100, 5000]);
+      });
+    });
+
+    describe("ReferenceArea without any graphical elements", () => {
+      it("should render ticks following the domain of the area", () => {
+        const axisDomainSpy = vi.fn();
+        function Comp(props: {
+          axisDomainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+        }): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.axisDomainSpy(d),
+          );
+          return null;
+        }
+        const { container } = render(() => (
+          <ComposedChart
+            width={500}
+            height={500}
+            data={pageData}
+            margin={{
+              top: 5,
+              right: 30,
+              left: 20,
+              bottom: 5,
+            }}
+          >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis type="number" />
+            <ReferenceArea x1="Page B" x2="Page E" y1={1890} y2={-1000} ifOverflow="extendDomain" />
+            <Comp axisDomainSpy={axisDomainSpy} />
+          </ComposedChart>
+        ));
+        expect(axisDomainSpy).toHaveBeenLastCalledWith([-1000, 1890]);
+        expectYAxisTicks(container, [
+          { textContent: "-1900", x: "72", y: "465" },
+          { textContent: "-950", x: "72", y: "350" },
+          { textContent: "0", x: "72", y: "235" },
+          { textContent: "950", x: "72", y: "120" },
+          { textContent: "1900", x: "72", y: "5" },
+        ]);
+      });
+    });
+
+    describe("ReferenceLine with one dimension", () => {
+      const ChartWithReferenceLine = (props: {
+        ifOverflow: IfOverflow | undefined;
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): JSX.Element => {
+        function Comp(): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        return (
+          <LineChart width={100} height={100} data={pageData}>
+            <YAxis />
+            <Line dataKey="pv" />
+            <ReferenceLine y={2000} ifOverflow={props.ifOverflow} />
+            <Comp />
+          </LineChart>
+        );
+      };
+
+      it.each(casesThatDoNotExtendDomain)(
+        "should not extend domain when ifOverflow=%s",
+        (ifOverflow) => {
+          const domainSpy = vi.fn();
+          const { container } = render(() => (
+            <ChartWithReferenceLine ifOverflow={ifOverflow} domainSpy={domainSpy} />
+          ));
+          expectYAxisTicks(container, [
+            { textContent: "0", x: "57", y: "95" },
+            { textContent: "300", x: "57", y: "72.5" },
+            { textContent: "600", x: "57", y: "50" },
+            { textContent: "900", x: "57", y: "27.5" },
+            { textContent: "1200", x: "57", y: "5" },
+          ]);
+          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
+        },
+      );
+
+      it("should extend domain when ifOverflow=extendDomain", () => {
+        const domainSpy = vi.fn();
+        const { container } = render(() => (
+          <ChartWithReferenceLine ifOverflow="extendDomain" domainSpy={domainSpy} />
+        ));
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "500", x: "57", y: "72.5" },
+          { textContent: "1000", x: "57", y: "50" },
+          { textContent: "1500", x: "57", y: "27.5" },
+          { textContent: "2000", x: "57", y: "5" },
+        ]);
+      });
+    });
+
+    describe("ReferenceLine with segment", () => {
+      const ChartWithReferenceLineWithSegment = (props: {
+        ifOverflow: IfOverflow | undefined;
+        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
+      }): JSX.Element => {
+        function Comp(): null {
+          const isPanorama = useIsPanorama();
+          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
+          createEffect(
+            () => domain(),
+            (d) => props.domainSpy(d),
+          );
+          return null;
+        }
+        return (
+          <LineChart width={100} height={100} data={pageData}>
+            <YAxis />
+            <Line dataKey="pv" />
+            <ReferenceLine
+              segment={[
+                { x: "Page A", y: 100 },
+                { x: "Page B", y: 2000 },
+              ]}
+              ifOverflow={props.ifOverflow}
+            />
+            <Comp />
+          </LineChart>
+        );
+      };
+
+      it.each(casesThatDoNotExtendDomain)(
+        "should not extend domain when ifOverflow=%s",
+        (ifOverflow) => {
+          const domainSpy = vi.fn();
+          const { container } = render(() => (
+            <ChartWithReferenceLineWithSegment ifOverflow={ifOverflow} domainSpy={domainSpy} />
+          ));
+          expectYAxisTicks(container, [
+            { textContent: "0", x: "57", y: "95" },
+            { textContent: "300", x: "57", y: "72.5" },
+            { textContent: "600", x: "57", y: "50" },
+            { textContent: "900", x: "57", y: "27.5" },
+            { textContent: "1200", x: "57", y: "5" },
+          ]);
+          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
+        },
+      );
+
+      it("should extend domain when ifOverflow=extendDomain", () => {
+        // https://github.com/recharts/recharts/issues/3379
+        const domainSpy = vi.fn();
+        const { container } = render(() => (
+          <ChartWithReferenceLineWithSegment ifOverflow="extendDomain" domainSpy={domainSpy} />
+        ));
+        expectYAxisTicks(container, [
+          { textContent: "0", x: "57", y: "95" },
+          { textContent: "500", x: "57", y: "72.5" },
+          { textContent: "1000", x: "57", y: "50" },
+          { textContent: "1500", x: "57", y: "27.5" },
+          { textContent: "2000", x: "57", y: "5" },
+        ]);
+        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
+      });
+    });
+  });
+
+  it("should render the axis when wrapped in a custom component", () => {
+    /*
+     * https://github.com/recharts/recharts/issues/5445#issuecomment-2628711736
+     */
+    const YAxisWrapper = (props: YAxisProps) => {
+      return <YAxis {...props} />;
+    };
+
+    const { container } = render(() => (
+      <BarChart width={100} height={100}>
+        <YAxisWrapper />
+      </BarChart>
+    ));
+
+    expect(container.querySelector(".yAxis")).toBeVisible();
+  });
+
+  it("should render the y-axis with given width in the prop", () => {
+    const yAxisWidth = 40;
+
+    const { container } = render(() => (
+      <BarChart width={100} height={100} data={data}>
+        <YAxis width={yAxisWidth} />
+        <Bar dataKey="amt" />
+      </BarChart>
+    ));
+
+    const yAxis = container.querySelector(".yAxis");
+    assertNotNull(yAxis);
+    const yAxisLine = yAxis.querySelector("line");
+
+    expect(yAxis).toBeVisible();
+    expect(yAxisLine).toHaveAttribute("width", String(yAxisWidth));
+  });
+
+  it("should render y-axis with dynamically calculated width", () => {
+    mockGetBoundingClientRect({ width: 80, height: 30 });
+
+    const { container } = render(() => (
+      <BarChart width={400} height={300} data={data}>
+        <YAxis width="auto" ticks={[0, 800, 1600, 2400]} />
+        <Bar dataKey="amt" />
+      </BarChart>
+    ));
+
+    // Get all tick elements from the rendered Y-axis
+    const tickElements = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+
+    const yAxis = container.querySelector(".yAxis");
+    assertNotNull(yAxis);
+    const yAxisLine = yAxis.querySelector("line");
+
+    const calculatedYAxisWidth = getCalculatedYAxisWidth({
+      ticks: Array.from(tickElements),
+      tickSize: 6,
+      tickMargin: 2,
+      label: undefined,
+      labelGapWithTick: 5,
+    });
+
+    expect(calculatedYAxisWidth).toBe(88); // 80 width + 6 tick size + 2 tick margin
+    expect(yAxisLine).toHaveAttribute("width", "88");
+  });
+});