solid-recharts 0.1.0

package/test/cartesian/Bar/Bar.spec.tsx

@@ -0,0 +1,2314 @@
+// Port of recharts 3.8.1 test/cartesian/Bar/Bar.spec.tsx (commit 7a23854).
+// Ported: geometry, barSize, maxBarSize, label, minPointSize, background, id/clip,
+// legendType, events, stacked tooltip/activeBar (#5124), background zIndex,
+// activeBar+null data, ScatterChart matrix, state integration.
+// Deferred: full unsupported-chart matrix.
+// label spy call-count is data.length (not ×2 — no React StrictMode double-mount).
+import { createEffect, createSignal, flush, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
+import {
+  Bar,
+  BarChart,
+  BarProps,
+  DefaultZIndexes,
+  Legend,
+  Tooltip,
+  type LegendType,
+  XAxis,
+  YAxis,
+} from "../../../src";
+import type { CartesianGraphicalItemSettings } from "../../../src/state/graphicalItemsSlice";
+import { useAppSelector } from "../../../src/state/hooks";
+import { BarSettings } from "../../../src/state/types/BarSettings";
+import { fireEvent, render } from "../../helper/render";
+import { assertZIndexLayerOrder } from "../../helper/assertZIndexLayerOrder";
+import { expectActiveBars, expectBars, getAllBarPaths, getAllBars } from "../../helper/expectBars";
+import { expectLabels } from "../../helper/expectLabel";
+import { svgPropertiesAndEvents } from "../../../src/util/svgPropertiesAndEvents";
+import type { Props as LabelProps } from "../../../src/component/Label";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { assertNotNull } from "../../helper/assertNotNull";
+import {
+  BarChartCase,
+  chartsWhereBarMustNotRender,
+  ComposedChartCase,
+  type CartesianChartTestCase,
+} from "../../helper/parameterizedTestCases";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import {
+  expectTooltipCoordinate,
+  expectTooltipPayload,
+  showTooltipOnCoordinate,
+} from "../../component/Tooltip/tooltipTestHelpers";
+import {
+  selectActiveTooltipDataKey,
+  selectActiveTooltipIndex,
+  selectTooltipAxisTicks,
+} from "../../../src/state/selectors/tooltipSelectors";
+import { barChartMouseHoverTooltipSelector } from "../../component/Tooltip/tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { noInteraction, type TooltipState } from "../../../src/state/tooltipSlice";
+
+// Ported from vendor/recharts-reference/test/vitest.setup.ts — scoped to Bar specs
+// so activeBar rAF staging is synchronous via vi.runOnlyPendingTimers().
+beforeEach(() => {
+  vi.useFakeTimers({
+    toFake: ["requestAnimationFrame", "cancelAnimationFrame"],
+  });
+});
+
+afterEach(() => {
+  vi.clearAllTimers();
+});
+
+const chartsThatSupportBar: ReadonlyArray<CartesianChartTestCase> = [
+  ComposedChartCase,
+  BarChartCase,
+];
+
+const chartsThatDoNotSupportBar = chartsWhereBarMustNotRender(chartsThatSupportBar);
+
+const data = [
+  { x: 10, y: 50, width: 20, height: 50, value: 100, label: "test1" },
+  { x: 50, y: 50, width: 20, height: 50, value: 200, label: "test2" },
+  { x: 90, y: 50, width: 20, height: 50, value: 300, label: "test3" },
+  { x: 130, y: 50, width: 20, height: 50, value: 400, label: "test4" },
+  { x: 170, y: 50, width: 20, height: 50, value: 500, label: "test5" },
+];
+
+function renderChart(ui: () => JSX.Element): { container: HTMLElement } {
+  const result = render(ui);
+  flush();
+  flush();
+  flush();
+  return result;
+}
+
+describe.each(chartsThatSupportBar)("<Bar /> as a child of $testName", ({ ChartElement }) => {
+  it(`should render rectangles in horizontal Bar`, () => {
+    const { container } = renderChart(() => (
+      <ChartElement layout="horizontal" data={data}>
+        <Bar isAnimationActive={false} dataKey="value" />
+      </ChartElement>
+    ));
+
+    expectBars(container, [
+      {
+        d: "M 14.8,413.3333 h 78 v 81.6667 h -78 Z",
+        height: "81.6667",
+        radius: "0",
+        width: "78",
+        x: "14.8",
+        y: "413.3333",
+      },
+      {
+        d: "M 112.8,331.6667 h 78 v 163.3333 h -78 Z",
+        height: "163.3333",
+        radius: "0",
+        width: "78",
+        x: "112.8",
+        y: "331.6667",
+      },
+      {
+        d: "M 210.8,250 h 78 v 245 h -78 Z",
+        height: "245",
+        radius: "0",
+        width: "78",
+        x: "210.8",
+        y: "250",
+      },
+      {
+        d: "M 308.8,168.3333 h 78 v 326.6667 h -78 Z",
+        height: "326.6667",
+        radius: "0",
+        width: "78",
+        x: "308.8",
+        y: "168.3333",
+      },
+      {
+        d: "M 406.8,86.6667 h 78 v 408.3333 h -78 Z",
+        height: "408.3333",
+        radius: "0",
+        width: "78",
+        x: "406.8",
+        y: "86.6667",
+      },
+    ]);
+  });
+
+  it(`should render rounded rectangles when radius is set`, () => {
+    const { container } = renderChart(() => (
+      <ChartElement layout="horizontal" data={data}>
+        <Bar isAnimationActive={false} dataKey="value" radius={8} />
+      </ChartElement>
+    ));
+
+    const paths = container.querySelectorAll(
+      ".recharts-bar .recharts-bar-rectangle path.recharts-rectangle",
+    );
+    expect(paths.length).toBe(5);
+    paths.forEach((p) => {
+      expect(p.getAttribute("radius")).toBe("8");
+      // A rounded bar replaces the straight `h/v` corners with arc commands.
+      expect(p.getAttribute("d")).toContain("A 8,8");
+    });
+  });
+
+  it(`should render rectangles when wrapped in custom Component`, () => {
+    const MyBar = (props: BarProps) => <Bar {...props} />;
+    const { container } = renderChart(() => (
+      <ChartElement layout="horizontal" data={data}>
+        <MyBar isAnimationActive={false} dataKey="value" />
+      </ChartElement>
+    ));
+
+    expectBars(container, [
+      {
+        d: "M 14.8,413.3333 h 78 v 81.6667 h -78 Z",
+        height: "81.6667",
+        radius: "0",
+        width: "78",
+        x: "14.8",
+        y: "413.3333",
+      },
+      {
+        d: "M 112.8,331.6667 h 78 v 163.3333 h -78 Z",
+        height: "163.3333",
+        radius: "0",
+        width: "78",
+        x: "112.8",
+        y: "331.6667",
+      },
+      {
+        d: "M 210.8,250 h 78 v 245 h -78 Z",
+        height: "245",
+        radius: "0",
+        width: "78",
+        x: "210.8",
+        y: "250",
+      },
+      {
+        d: "M 308.8,168.3333 h 78 v 326.6667 h -78 Z",
+        height: "326.6667",
+        radius: "0",
+        width: "78",
+        x: "308.8",
+        y: "168.3333",
+      },
+      {
+        d: "M 406.8,86.6667 h 78 v 408.3333 h -78 Z",
+        height: "408.3333",
+        radius: "0",
+        width: "78",
+        x: "406.8",
+        y: "86.6667",
+      },
+    ]);
+  });
+
+  it(`should render rectangles in vertical Bar`, () => {
+    const { container } = renderChart(() => (
+      <ChartElement layout="vertical" data={data}>
+        <YAxis type="category" />
+        <XAxis type="number" />
+        <Bar isAnimationActive={false} dataKey="value" />
+      </ChartElement>
+    ));
+
+    expectBars(container, [
+      {
+        x: "65",
+        y: "14.2",
+        width: "71.6667",
+        height: "74",
+        radius: "0",
+        d: "M 65,14.2 h 71.6667 v 74 h -71.6667 Z",
+      },
+      {
+        x: "65",
+        y: "106.2",
+        width: "143.3333",
+        height: "74",
+        radius: "0",
+        d: "M 65,106.2 h 143.3333 v 74 h -143.3333 Z",
+      },
+      {
+        x: "65",
+        y: "198.2",
+        width: "215",
+        height: "74",
+        radius: "0",
+        d: "M 65,198.2 h 215 v 74 h -215 Z",
+      },
+      {
+        x: "65",
+        y: "290.2",
+        width: "286.6667",
+        height: "74",
+        radius: "0",
+        d: "M 65,290.2 h 286.6667 v 74 h -286.6667 Z",
+      },
+      {
+        x: "65",
+        y: "382.2",
+        width: "358.3333",
+        height: "74",
+        radius: "0",
+        d: "M 65,382.2 h 358.3333 v 74 h -358.3333 Z",
+      },
+    ]);
+  });
+
+  it("Don't render any rectangle when data is empty", () => {
+    const { container } = renderChart(() => (
+      <ChartElement data={[]}>
+        <Bar dataKey="value" />
+      </ChartElement>
+    ));
+
+    expectBars(container, []);
+  });
+
+  describe("with explicit ID prop", () => {
+    it("should pass id prop to an element in the DOM", () => {
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" id="test-bar-id" />
+          <XAxis allowDataOverflow />
+        </ChartElement>
+      ));
+
+      const bar = container.querySelector("#test-bar-id");
+      assertNotNull(bar);
+      expect(bar.tagName).toBe("g");
+      expect(bar.classList.value).toBe("recharts-layer recharts-bar");
+    });
+
+    it("should set the ID on the clipPath, if it needs clipping", () => {
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" id="test-bar-id" />
+          <XAxis allowDataOverflow />
+        </ChartElement>
+      ));
+
+      const clipPath = container.querySelector("#clipPath-test-bar-id");
+      assertNotNull(clipPath);
+      expect(clipPath.tagName).toBe("clipPath");
+    });
+  });
+
+  describe("barSize", () => {
+    it("should make bars wider in horizontal chart", () => {
+      const barSize = 79;
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" barSize={barSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "15",
+          y: "413.3333",
+          width: "79",
+          height: "81.6667",
+          radius: "0",
+          d: "M 15,413.3333 h 79 v 81.6667 h -79 Z",
+        },
+        {
+          x: "113",
+          y: "331.6667",
+          width: "79",
+          height: "163.3333",
+          radius: "0",
+          d: "M 113,331.6667 h 79 v 163.3333 h -79 Z",
+        },
+        {
+          x: "211",
+          y: "250",
+          width: "79",
+          height: "245",
+          radius: "0",
+          d: "M 211,250 h 79 v 245 h -79 Z",
+        },
+        {
+          x: "309",
+          y: "168.3333",
+          width: "79",
+          height: "326.6667",
+          radius: "0",
+          d: "M 309,168.3333 h 79 v 326.6667 h -79 Z",
+        },
+        {
+          x: "407",
+          y: "86.6667",
+          width: "79",
+          height: "408.3333",
+          radius: "0",
+          d: "M 407,86.6667 h 79 v 408.3333 h -79 Z",
+        },
+      ]);
+    });
+
+    it("should make bars narrower in horizontal chart", () => {
+      const barSize = 77;
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" barSize={barSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "16",
+          y: "413.3333",
+          width: "77",
+          height: "81.6667",
+          radius: "0",
+          d: "M 16,413.3333 h 77 v 81.6667 h -77 Z",
+        },
+        {
+          x: "114",
+          y: "331.6667",
+          width: "77",
+          height: "163.3333",
+          radius: "0",
+          d: "M 114,331.6667 h 77 v 163.3333 h -77 Z",
+        },
+        {
+          x: "212",
+          y: "250",
+          width: "77",
+          height: "245",
+          radius: "0",
+          d: "M 212,250 h 77 v 245 h -77 Z",
+        },
+        {
+          x: "310",
+          y: "168.3333",
+          width: "77",
+          height: "326.6667",
+          radius: "0",
+          d: "M 310,168.3333 h 77 v 326.6667 h -77 Z",
+        },
+        {
+          x: "408",
+          y: "86.6667",
+          width: "77",
+          height: "408.3333",
+          radius: "0",
+          d: "M 408,86.6667 h 77 v 408.3333 h -77 Z",
+        },
+      ]);
+    });
+
+    it("should make bars taller in vertical chart", () => {
+      const barSize = 74;
+      const { container } = renderChart(() => (
+        <ChartElement layout="vertical" data={data}>
+          <YAxis type="category" />
+          <XAxis type="number" />
+          <Bar isAnimationActive={false} dataKey="value" barSize={barSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          d: "M 65,14 h 71.6667 v 74 h -71.6667 Z",
+          height: "74",
+          radius: "0",
+          width: "71.6667",
+          x: "65",
+          y: "14",
+        },
+        {
+          d: "M 65,106 h 143.3333 v 74 h -143.3333 Z",
+          height: "74",
+          radius: "0",
+          width: "143.3333",
+          x: "65",
+          y: "106",
+        },
+        {
+          d: "M 65,198 h 215 v 74 h -215 Z",
+          height: "74",
+          radius: "0",
+          width: "215",
+          x: "65",
+          y: "198",
+        },
+        {
+          d: "M 65,290 h 286.6667 v 74 h -286.6667 Z",
+          height: "74",
+          radius: "0",
+          width: "286.6667",
+          x: "65",
+          y: "290",
+        },
+        {
+          d: "M 65,382 h 358.3333 v 74 h -358.3333 Z",
+          height: "74",
+          radius: "0",
+          width: "358.3333",
+          x: "65",
+          y: "382",
+        },
+      ]);
+    });
+
+    it("should make bars shorter in vertical chart", () => {
+      const barSize = 72;
+      const { container } = renderChart(() => (
+        <ChartElement layout="vertical" data={data}>
+          <YAxis type="category" />
+          <XAxis type="number" />
+          <Bar isAnimationActive={false} dataKey="value" barSize={barSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          d: "M 65,15 h 71.6667 v 72 h -71.6667 Z",
+          height: "72",
+          radius: "0",
+          width: "71.6667",
+          x: "65",
+          y: "15",
+        },
+        {
+          d: "M 65,107 h 143.3333 v 72 h -143.3333 Z",
+          height: "72",
+          radius: "0",
+          width: "143.3333",
+          x: "65",
+          y: "107",
+        },
+        {
+          d: "M 65,199 h 215 v 72 h -215 Z",
+          height: "72",
+          radius: "0",
+          width: "215",
+          x: "65",
+          y: "199",
+        },
+        {
+          d: "M 65,291 h 286.6667 v 72 h -286.6667 Z",
+          height: "72",
+          radius: "0",
+          width: "286.6667",
+          x: "65",
+          y: "291",
+        },
+        {
+          d: "M 65,383 h 358.3333 v 72 h -358.3333 Z",
+          height: "72",
+          radius: "0",
+          width: "358.3333",
+          x: "65",
+          y: "383",
+        },
+      ]);
+    });
+  });
+
+  describe("maxBarSize", () => {
+    it("should do nothing if bars are already smaller than the maxBarSize", () => {
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" maxBarSize={79} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          d: "M 14.8,413.3333 h 78 v 81.6667 h -78 Z",
+          height: "81.6667",
+          radius: "0",
+          width: "78",
+          x: "14.8",
+          y: "413.3333",
+        },
+        {
+          d: "M 112.8,331.6667 h 78 v 163.3333 h -78 Z",
+          height: "163.3333",
+          radius: "0",
+          width: "78",
+          x: "112.8",
+          y: "331.6667",
+        },
+        {
+          d: "M 210.8,250 h 78 v 245 h -78 Z",
+          height: "245",
+          radius: "0",
+          width: "78",
+          x: "210.8",
+          y: "250",
+        },
+        {
+          d: "M 308.8,168.3333 h 78 v 326.6667 h -78 Z",
+          height: "326.6667",
+          radius: "0",
+          width: "78",
+          x: "308.8",
+          y: "168.3333",
+        },
+        {
+          d: "M 406.8,86.6667 h 78 v 408.3333 h -78 Z",
+          height: "408.3333",
+          radius: "0",
+          width: "78",
+          x: "406.8",
+          y: "86.6667",
+        },
+      ]);
+    });
+
+    it("should change all bars width when bars are larger than the maxBarSize", () => {
+      const maxBarSize = 77;
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar isAnimationActive={false} dataKey="value" maxBarSize={maxBarSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          d: "M 15.3,413.3333 h 77 v 81.6667 h -77 Z",
+          height: "81.6667",
+          radius: "0",
+          width: String(maxBarSize),
+          x: "15.3",
+          y: "413.3333",
+        },
+        {
+          d: "M 113.3,331.6667 h 77 v 163.3333 h -77 Z",
+          height: "163.3333",
+          radius: "0",
+          width: String(maxBarSize),
+          x: "113.3",
+          y: "331.6667",
+        },
+        {
+          d: "M 211.3,250 h 77 v 245 h -77 Z",
+          height: "245",
+          radius: "0",
+          width: String(maxBarSize),
+          x: "211.3",
+          y: "250",
+        },
+        {
+          d: "M 309.3,168.3333 h 77 v 326.6667 h -77 Z",
+          height: "326.6667",
+          radius: "0",
+          width: String(maxBarSize),
+          x: "309.3",
+          y: "168.3333",
+        },
+        {
+          d: "M 407.3,86.6667 h 77 v 408.3333 h -77 Z",
+          height: "408.3333",
+          radius: "0",
+          width: String(maxBarSize),
+          x: "407.3",
+          y: "86.6667",
+        },
+      ]);
+    });
+
+    it("should do nothing if barSize is set", () => {
+      const maxBarSize = 77;
+      const { container } = renderChart(() => (
+        <ChartElement layout="horizontal" data={data}>
+          <Bar
+            isAnimationActive={false}
+            dataKey="value"
+            maxBarSize={maxBarSize}
+            barSize={maxBarSize + 5}
+          />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          d: "M 13,413.3333 h 82 v 81.6667 h -82 Z",
+          height: "81.6667",
+          radius: "0",
+          width: "82",
+          x: "13",
+          y: "413.3333",
+        },
+        {
+          d: "M 111,331.6667 h 82 v 163.3333 h -82 Z",
+          height: "163.3333",
+          radius: "0",
+          width: "82",
+          x: "111",
+          y: "331.6667",
+        },
+        {
+          d: "M 209,250 h 82 v 245 h -82 Z",
+          height: "245",
+          radius: "0",
+          width: "82",
+          x: "209",
+          y: "250",
+        },
+        {
+          d: "M 307,168.3333 h 82 v 326.6667 h -82 Z",
+          height: "326.6667",
+          radius: "0",
+          width: "82",
+          x: "307",
+          y: "168.3333",
+        },
+        {
+          d: "M 405,86.6667 h 82 v 408.3333 h -82 Z",
+          height: "408.3333",
+          radius: "0",
+          width: "82",
+          x: "405",
+          y: "86.6667",
+        },
+      ]);
+    });
+
+    it("should do nothing in vertical chart if all bars are smaller than the maxBarSize", () => {
+      const { container } = renderChart(() => (
+        <ChartElement layout="vertical" data={data}>
+          <YAxis type="category" />
+          <XAxis type="number" />
+          <Bar isAnimationActive={false} dataKey="value" maxBarSize={74} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "65",
+          y: "14.2",
+          width: "71.6667",
+          height: "74",
+          radius: "0",
+          d: "M 65,14.2 h 71.6667 v 74 h -71.6667 Z",
+        },
+        {
+          x: "65",
+          y: "106.2",
+          width: "143.3333",
+          height: "74",
+          radius: "0",
+          d: "M 65,106.2 h 143.3333 v 74 h -143.3333 Z",
+        },
+        {
+          x: "65",
+          y: "198.2",
+          width: "215",
+          height: "74",
+          radius: "0",
+          d: "M 65,198.2 h 215 v 74 h -215 Z",
+        },
+        {
+          x: "65",
+          y: "290.2",
+          width: "286.6667",
+          height: "74",
+          radius: "0",
+          d: "M 65,290.2 h 286.6667 v 74 h -286.6667 Z",
+        },
+        {
+          x: "65",
+          y: "382.2",
+          width: "358.3333",
+          height: "74",
+          radius: "0",
+          d: "M 65,382.2 h 358.3333 v 74 h -358.3333 Z",
+        },
+      ]);
+    });
+
+    it("should change all bars height in vertical chart if all bars are larger than the maxBarSize", () => {
+      const maxBarSize = 72;
+      const { container } = renderChart(() => (
+        <ChartElement layout="vertical" data={data}>
+          <YAxis type="category" />
+          <XAxis type="number" />
+          <Bar isAnimationActive={false} dataKey="value" maxBarSize={maxBarSize} />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "65",
+          y: "15.2",
+          width: "71.6667",
+          height: "72",
+          radius: "0",
+          d: "M 65,15.2 h 71.6667 v 72 h -71.6667 Z",
+        },
+        {
+          x: "65",
+          y: "107.2",
+          width: "143.3333",
+          height: "72",
+          radius: "0",
+          d: "M 65,107.2 h 143.3333 v 72 h -143.3333 Z",
+        },
+        {
+          x: "65",
+          y: "199.2",
+          width: "215",
+          height: "72",
+          radius: "0",
+          d: "M 65,199.2 h 215 v 72 h -215 Z",
+        },
+        {
+          x: "65",
+          y: "291.2",
+          width: "286.6667",
+          height: "72",
+          radius: "0",
+          d: "M 65,291.2 h 286.6667 v 72 h -286.6667 Z",
+        },
+        {
+          x: "65",
+          y: "383.2",
+          width: "358.3333",
+          height: "72",
+          radius: "0",
+          d: "M 65,383.2 h 358.3333 v 72 h -358.3333 Z",
+        },
+      ]);
+    });
+
+    it("should do nothing if barSize is set in vertical chart", () => {
+      const maxBarSize = 72;
+      const { container } = renderChart(() => (
+        <ChartElement layout="vertical" data={data}>
+          <YAxis type="category" />
+          <XAxis type="number" />
+          <Bar
+            isAnimationActive={false}
+            dataKey="value"
+            maxBarSize={maxBarSize}
+            barSize={maxBarSize + 7}
+          />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "65",
+          y: "12",
+          width: "71.6667",
+          height: "79",
+          radius: "0",
+          d: "M 65,12 h 71.6667 v 79 h -71.6667 Z",
+        },
+        {
+          x: "65",
+          y: "104",
+          width: "143.3333",
+          height: "79",
+          radius: "0",
+          d: "M 65,104 h 143.3333 v 79 h -143.3333 Z",
+        },
+        {
+          x: "65",
+          y: "196",
+          width: "215",
+          height: "79",
+          radius: "0",
+          d: "M 65,196 h 215 v 79 h -215 Z",
+        },
+        {
+          x: "65",
+          y: "288",
+          width: "286.6667",
+          height: "79",
+          radius: "0",
+          d: "M 65,288 h 286.6667 v 79 h -286.6667 Z",
+        },
+        {
+          x: "65",
+          y: "380",
+          width: "358.3333",
+          height: "79",
+          radius: "0",
+          d: "M 65,380 h 358.3333 v 79 h -358.3333 Z",
+        },
+      ]);
+    });
+  });
+
+  describe("label", () => {
+    describe("as boolean", () => {
+      it("should draw default labels when label = true", () => {
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive={false} label dataKey="value" />
+          </ChartElement>
+        ));
+
+        const labels = container.querySelectorAll(".recharts-text.recharts-label");
+        expect(labels).toHaveLength(data.length);
+        labels.forEach((l) => {
+          expect(l).toHaveAttribute("x", expect.any(String));
+          expect(l).toHaveAttribute("y", expect.any(String));
+          expect(l).toHaveAttribute("height", expect.any(String));
+          expect(l).toHaveAttribute("offset", "5");
+          expect(l).toHaveAttribute("text-anchor", "middle");
+          expect(l).toHaveAttribute("width", "78");
+          expect(l).toHaveAttribute("fill", "#808080");
+        });
+      });
+
+      it("should not draw labels while animating", () => {
+        const { container } = render(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive label dataKey="value" />
+          </ChartElement>
+        ));
+        flush();
+
+        const labels = container.querySelectorAll(".recharts-text.recharts-label");
+        expect(labels).toHaveLength(0);
+      });
+
+      it("should not draw labels when label = false", () => {
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive={false} label={false} dataKey="value" />
+          </ChartElement>
+        ));
+
+        const labels = container.querySelectorAll(".recharts-text.recharts-label");
+        expect(labels).toHaveLength(0);
+      });
+    });
+
+    describe("as svg properties object", () => {
+      it("should draw labels and add extra props from the object", () => {
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar
+              isAnimationActive={false}
+              label={
+                {
+                  fill: "red",
+                  elevation: 9,
+                } as never
+              }
+              dataKey="value"
+            />
+          </ChartElement>
+        ));
+
+        expectLabels(container, [
+          {
+            height: "81.66666666666669",
+            offset: "5",
+            textContent: "100",
+            width: "78",
+            x: "53.8",
+            y: "454.16666666666663",
+          },
+          {
+            height: "163.33333333333326",
+            offset: "5",
+            textContent: "200",
+            width: "78",
+            x: "151.8",
+            y: "413.33333333333337",
+          },
+          {
+            height: "245",
+            offset: "5",
+            textContent: "300",
+            width: "78",
+            x: "249.8",
+            y: "372.5",
+          },
+          {
+            height: "326.66666666666663",
+            offset: "5",
+            textContent: "400",
+            width: "78",
+            x: "347.8",
+            y: "331.6666666666667",
+          },
+          {
+            height: "408.33333333333337",
+            offset: "5",
+            textContent: "500",
+            width: "78",
+            x: "445.8",
+            y: "290.83333333333337",
+          },
+        ]);
+      });
+
+      it("should overwrite the recharts-label className but keep recharts-text className", () => {
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar
+              isAnimationActive={false}
+              label={{
+                class: "my-test-class",
+              }}
+              dataKey="value"
+            />
+          </ChartElement>
+        ));
+
+        const labels = container.querySelectorAll(".recharts-text.recharts-label");
+        expect(labels).toHaveLength(0);
+        const customLabels = container.querySelectorAll(".my-test-class");
+        expect(customLabels).toHaveLength(data.length);
+        customLabels.forEach((l) => {
+          expect(l).toHaveAttribute("class", "recharts-text my-test-class");
+        });
+      });
+    });
+
+    describe("as function", () => {
+      it("should pass props to the label function", () => {
+        const spy = vi.fn().mockReturnValue(null);
+        renderChart(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive={false} label={spy} dataKey="value" />
+          </ChartElement>
+        ));
+
+        expect(spy).toHaveBeenCalledTimes(data.length);
+        // Solid has no StrictMode double-mount; assert the first label call (recharts
+        // checks the last of 2×data.length calls after React StrictMode remount).
+        expect(spy).toHaveBeenNthCalledWith(1, {
+          angle: 0,
+          height: expect.any(Number),
+          index: expect.any(Number),
+          offset: 5,
+          parentViewBox: {
+            height: expect.any(Number),
+            width: expect.any(Number),
+            x: expect.any(Number),
+            y: expect.any(Number),
+          },
+          textBreakAll: false,
+          position: "middle",
+          value: expect.any(Number),
+          viewBox: {
+            height: expect.any(Number),
+            width: expect.any(Number),
+            lowerWidth: expect.any(Number),
+            upperWidth: expect.any(Number),
+            x: expect.any(Number),
+            y: 413.3333333333333,
+          },
+          width: expect.any(Number),
+          x: expect.any(Number),
+          y: expect.any(Number),
+          zIndex: 0,
+        });
+      });
+
+      it("should render what the label function returned", () => {
+        const labelFn = () => <g class="my-mock-class" />;
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive={false} label={labelFn} dataKey="value" />
+          </ChartElement>
+        ));
+
+        const labels = container.querySelectorAll(".my-mock-class");
+        expect(labels).toHaveLength(data.length);
+        labels.forEach((l) => {
+          expect.soft(l).not.toHaveAttribute("x");
+          expect.soft(l).not.toHaveAttribute("y");
+          expect.soft(l).not.toHaveAttribute("height");
+          expect.soft(l).not.toHaveAttribute("offset");
+          expect.soft(l).not.toHaveAttribute("text-anchor");
+          expect.soft(l).not.toHaveAttribute("width");
+          expect.soft(l).not.toHaveAttribute("fill");
+        });
+      });
+    });
+
+    describe("as a custom Element", () => {
+      it(`should render what the function returned, and then inject extra sneaky props in it
+                - but not all of them, and not the same as in the other ways of rendering labels`, () => {
+        // Solid 2 has no cloneElement; a pre-created `<g />` is an opaque object.
+        // Behavioral parity: render fn spreads entry attrs onto the template class.
+        const MyLabel = (labelProps: LabelProps) => (
+          <g
+            class="my-mock-class"
+            {...svgPropertiesAndEvents(
+              omit(
+                labelProps as Record<string, unknown>,
+                "content",
+                "viewBox",
+                "formatter",
+                "value",
+                "children",
+                "position",
+                "angle",
+                "textBreakAll",
+                "index",
+                "id",
+                "zIndex",
+                "parentViewBox",
+                "class",
+              ),
+            )}
+          />
+        );
+        const { container } = renderChart(() => (
+          <ChartElement data={data}>
+            <Bar isAnimationActive={false} label={MyLabel} dataKey="value" />
+          </ChartElement>
+        ));
+
+        expectLabels(
+          container,
+          [
+            {
+              height: "81.66666666666669",
+              offset: "5",
+              textContent: "",
+              width: "78",
+              x: "14.8",
+              y: "413.3333333333333",
+            },
+            {
+              height: "163.33333333333326",
+              offset: "5",
+              textContent: "",
+              width: "78",
+              x: "112.8",
+              y: "331.66666666666674",
+            },
+            {
+              height: "245",
+              offset: "5",
+              textContent: "",
+              width: "78",
+              x: "210.8",
+              y: "250",
+            },
+            {
+              height: "326.66666666666663",
+              offset: "5",
+              textContent: "",
+              width: "78",
+              x: "308.8",
+              y: "168.33333333333337",
+            },
+            {
+              height: "408.33333333333337",
+              offset: "5",
+              textContent: "",
+              width: "78",
+              x: "406.8",
+              y: "86.66666666666666",
+            },
+          ],
+          ".my-mock-class",
+        );
+      });
+    });
+  });
+
+  describe("minPointSize", () => {
+    const highLowData = [
+      { name: "test1", value: 10000 },
+      { name: "test2", value: 0 },
+      { name: "test3", value: 1 },
+    ];
+
+    it("should pass props to the minPointSize function", () => {
+      const spy = vi.fn().mockImplementation(() => 5);
+      renderChart(() => (
+        <ChartElement data={highLowData}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Bar isAnimationActive={false} minPointSize={spy} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expect(spy).toBeCalledWith(expect.any(Number), expect.any(Number));
+    });
+
+    it("should ignore 0 value bars when minPointSize is undefined, and render the small bars really really small", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={highLowData}>
+          <XAxis dataKey="name" />
+          <Bar isAnimationActive={false} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "21.3333",
+          y: "5",
+          width: "131",
+          height: "460",
+          radius: "0",
+          d: "M 21.3333,5 h 131 v 460 h -131 Z",
+        },
+        {
+          x: "348",
+          y: "464.954",
+          width: "131",
+          height: "0.046",
+          radius: "0",
+          d: "M 348,464.954 h 131 v 0.046 h -131 Z",
+        },
+      ]);
+    });
+
+    it("should assign minimum height to low value bars if minPointSize is a number", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={highLowData}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Bar isAnimationActive={false} minPointSize={5} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "79.3333",
+          y: "5",
+          width: "115",
+          height: "460",
+          radius: "0",
+          d: "M 79.3333,5 h 115 v 460 h -115 Z",
+        },
+        {
+          x: "222.6667",
+          y: "460",
+          width: "115",
+          height: "5",
+          radius: "0",
+          d: "M 222.6667,460 h 115 v 5 h -115 Z",
+        },
+        {
+          x: "366",
+          y: "460",
+          width: "115",
+          height: "5",
+          radius: "0",
+          d: "M 366,460 h 115 v 5 h -115 Z",
+        },
+      ]);
+    });
+
+    it("should assign minimum width, in a vertical chart", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={highLowData} layout="vertical">
+          <XAxis dataKey="value" type="number" />
+          <YAxis dataKey="name" type="category" />
+          <Bar isAnimationActive={false} minPointSize={5} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "65",
+          y: "20.3333",
+          width: "430",
+          height: "123",
+          radius: "0",
+          d: "M 65,20.3333 h 430 v 123 h -430 Z",
+        },
+        {
+          x: "65",
+          y: "173.6667",
+          width: "5",
+          height: "123",
+          radius: "0",
+          d: "M 65,173.6667 h 5 v 123 h -5 Z",
+        },
+        {
+          x: "65",
+          y: "327",
+          width: "5",
+          height: "123",
+          radius: "0",
+          d: "M 65,327 h 5 v 123 h -5 Z",
+        },
+      ]);
+    });
+
+    it("should render with varying minPointSize as per function results", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={highLowData}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Bar
+            isAnimationActive={false}
+            minPointSize={(value: number | undefined | null) =>
+              value != null && value > 0 ? 2 : 0
+            }
+            dataKey="value"
+          />
+        </ChartElement>
+      ));
+
+      expectBars(container, [
+        {
+          x: "79.3333",
+          y: "5",
+          width: "115",
+          height: "460",
+          radius: "0",
+          d: "M 79.3333,5 h 115 v 460 h -115 Z",
+        },
+        {
+          x: "366",
+          y: "463",
+          width: "115",
+          height: "2",
+          radius: "0",
+          d: "M 366,463 h 115 v 2 h -115 Z",
+        },
+      ]);
+    });
+  });
+
+  describe("With background", () => {
+    const composedDataWithBackground = [
+      {
+        x: 10,
+        y: 50,
+        width: 20,
+        height: 20,
+        value: 40,
+        label: "test",
+        background: { x: 10, y: 50, width: 20, height: 50 },
+      },
+      {
+        x: 50,
+        y: 50,
+        width: 20,
+        height: 50,
+        value: 100,
+        label: "test",
+        background: { x: 50, y: 50, width: 20, height: 50 },
+      },
+    ];
+
+    it("Will create a background Rectangle with the passed in props", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={composedDataWithBackground}>
+          <Bar background={{ fill: "#000" }} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expect(container.querySelectorAll(".recharts-bar-background-rectangle")).toHaveLength(
+        composedDataWithBackground.length,
+      );
+
+      expectBars(container, []);
+    });
+
+    it("Will accept a function for the background prop", () => {
+      const className = "test-custom-background";
+      const backgroundComponent = () => {
+        return <g class={className} />;
+      };
+      const { container } = renderChart(() => (
+        <ChartElement data={composedDataWithBackground}>
+          <Bar background={backgroundComponent} dataKey="value" />
+        </ChartElement>
+      ));
+
+      expect(container.querySelectorAll(`.${className}`)).toHaveLength(
+        composedDataWithBackground.length,
+      );
+    });
+
+    it("should pass props to the custom background function", () => {
+      const expectedProps = {
+        class: "recharts-bar-background-rectangle",
+        dataKey: "value",
+        fill: "#eee",
+        height: 490,
+        index: expect.any(Number),
+        isActive: false,
+        label: "test",
+        onMouseEnter: expect.any(Function),
+        onMouseLeave: expect.any(Function),
+        onClick: expect.any(Function),
+        originalDataIndex: expect.any(Number),
+        payload: {
+          background: {
+            height: 50,
+            width: 20,
+            x: expect.any(Number),
+            y: 50,
+          },
+          height: expect.any(Number),
+          label: "test",
+          value: expect.any(Number),
+          width: 20,
+          x: expect.any(Number),
+          y: 50,
+        },
+        stackedBarStart: expect.any(Number),
+        width: 196,
+        x: expect.any(Number),
+        y: 5,
+        parentViewBox: {
+          height: expect.any(Number),
+          width: expect.any(Number),
+          x: expect.any(Number),
+          y: expect.any(Number),
+        },
+      };
+      const backgroundComponent = (props: unknown) => {
+        expect.soft(props).toEqual(expectedProps);
+        return <></>;
+      };
+      renderChart(() => (
+        <ChartElement data={composedDataWithBackground}>
+          <Bar background={backgroundComponent} dataKey="value" />
+        </ChartElement>
+      ));
+    });
+  });
+
+  describe("state integration", () => {
+    it("should report its props to redux state, and remove them when removed from DOM", () => {
+      const spy = vi.fn();
+      const [showBar, setShowBar] = createSignal(true);
+
+      const Comp = (): null => {
+        const cartesianItems = useAppSelector((state) => state.graphicalItems.cartesianItems);
+        createEffect(
+          () => cartesianItems(),
+          (items) => spy(items),
+        );
+        return null;
+      };
+
+      renderChart(() => (
+        <ChartElement data={data}>
+          <Show when={showBar()}>
+            <Bar
+              dataKey="value"
+              xAxisId={7}
+              yAxisId={9}
+              stackId="q"
+              hide
+              minPointSize={3}
+              maxBarSize={90}
+              barSize={13}
+            />
+          </Show>
+          <Comp />
+        </ChartElement>
+      ));
+
+      const expected: ReadonlyArray<BarSettings> = [
+        {
+          id: expect.stringMatching("^recharts-bar-[:a-z0-9]+$"),
+          isPanorama: false,
+          type: "bar",
+          data: undefined,
+          dataKey: "value",
+          xAxisId: 7,
+          yAxisId: 9,
+          zAxisId: 0,
+          stackId: "q",
+          hide: true,
+          barSize: 13,
+          minPointSize: 3,
+          maxBarSize: 90,
+          hasCustomShape: false,
+        },
+      ];
+      expectLastCalledWith(spy, expected);
+
+      setShowBar(false);
+      flush();
+      flush();
+      expectLastCalledWith(spy, []);
+    });
+
+    it("should report default props to redux state", () => {
+      const spy = vi.fn();
+
+      const Comp = (): null => {
+        const cartesianItems = useAppSelector((state) => state.graphicalItems.cartesianItems);
+        createEffect(
+          () => cartesianItems(),
+          (items) => spy(items),
+        );
+        return null;
+      };
+
+      renderChart(() => (
+        <ChartElement data={data}>
+          <Bar dataKey="value" />
+          <Comp />
+        </ChartElement>
+      ));
+
+      const expected: ReadonlyArray<CartesianGraphicalItemSettings> = [
+        {
+          id: expect.stringMatching("^recharts-bar-[:a-z0-9]+$"),
+          isPanorama: false,
+          type: "bar",
+          data: undefined,
+          dataKey: "value",
+          xAxisId: 0,
+          yAxisId: 0,
+          zAxisId: 0,
+          stackId: undefined,
+          hide: false,
+          barSize: undefined,
+          minPointSize: 0,
+          maxBarSize: undefined,
+          hasCustomShape: false,
+        },
+      ];
+      expectLastCalledWith(spy, expected);
+    });
+  });
+
+  describe("legendType", () => {
+    const allLegendTypesExceptNone: ReadonlyArray<LegendType> = [
+      "circle",
+      "cross",
+      "diamond",
+      "line",
+      "plainline",
+      "rect",
+      "square",
+      "star",
+      "triangle",
+      "wye",
+    ];
+
+    test.each(allLegendTypesExceptNone)("should render legendType %s", (legendType) => {
+      const { container } = renderChart(() => (
+        <ChartElement data={data}>
+          <Bar dataKey="value" legendType={legendType} />
+          <Legend />
+        </ChartElement>
+      ));
+
+      const legendIcon = container.querySelectorAll(".recharts-legend-item-text");
+      expect(legendIcon).toHaveLength(1);
+    });
+
+    it("should not render any legend if legendType = none", () => {
+      const { container } = renderChart(() => (
+        <ChartElement data={data}>
+          <Bar dataKey="value" legendType="none" />
+          <Legend />
+        </ChartElement>
+      ));
+
+      const legendIcon = container.querySelectorAll(".recharts-legend-item-text");
+      expect(legendIcon).toHaveLength(0);
+    });
+  });
+});
+
+describe.each(chartsThatDoNotSupportBar)("<Bar /> as a child of $testName", ({ ChartElement }) => {
+  it("should not render anything", () => {
+    const { container } = renderChart(() => (
+      <ChartElement data={data}>
+        <Bar isAnimationActive={false} dataKey="value" />
+      </ChartElement>
+    ));
+
+    expect(container.querySelectorAll(".recharts-bar-rectangle")).toHaveLength(0);
+  });
+});
+
+describe("mouse interactions in stacked bar: https://github.com/recharts/recharts/issues/5124", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  const stackedData = [{ x: 1, y: 2 }];
+
+  const stackedBars = [
+    {
+      d: "M 14,65 h 72 v 30 h -72 Z",
+      height: "30",
+      radius: "0",
+      width: "72",
+      x: "14",
+      y: "65",
+    },
+    {
+      d: "M 14,5 h 72 v 60 h -72 Z",
+      height: "60",
+      radius: "0",
+      width: "72",
+      x: "14",
+      y: "5",
+    },
+  ];
+
+  describe("with Tooltip shared=true", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart data={stackedData} width={100} height={100}>
+        <Bar activeBar dataKey="x" stackId="1" isAnimationActive={false} />
+        <Bar activeBar dataKey="y" stackId="1" isAnimationActive={false} />
+        <Tooltip shared isAnimationActive={false} />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should render two bars on the same index", () => {
+      const { container } = renderTestCase();
+      expectBars(container, stackedBars);
+    });
+
+    it("should render all bars inactive before user interaction", () => {
+      const { container } = renderTestCase();
+      const bars = getAllBars(container);
+      expectActiveBars(container, []);
+      expect(bars).toHaveLength(2);
+    });
+
+    it("should show tooltip when hovering over a chart", () => {
+      const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+      expectLastCalledWith(spy, null);
+
+      showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+        clientX: 10,
+        clientY: 10,
+      });
+      expectLastCalledWith(spy, "0");
+      expectTooltipPayload(container, "0", ["x : 1", "y : 2"]);
+    });
+
+    it("should show tooltip somewhere close to the mouse cursor", () => {
+      mockGetBoundingClientRect({
+        width: 10,
+        height: 10,
+      });
+      const { container } = renderTestCase();
+
+      showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+        clientX: 10,
+        clientY: 10,
+      });
+      expectTooltipCoordinate(container, { x: 60, y: 20 });
+
+      showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 60, y: 30 });
+    });
+
+    it("should make both bars active when hovering over the chart", () => {
+      const { container } = renderTestCase();
+
+      expectActiveBars(container, []);
+
+      showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+        clientX: 10,
+        clientY: 10,
+      });
+      vi.runOnlyPendingTimers();
+      flush();
+
+      expectActiveBars(container, stackedBars);
+    });
+  });
+
+  describe("with Tooltip shared=false", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart data={stackedData} width={100} height={100}>
+        <Bar activeBar dataKey="x" stackId="1" isAnimationActive={false} />
+        <Bar activeBar dataKey="y" stackId="1" isAnimationActive={false} />
+        <Tooltip shared={false} isAnimationActive={false} />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should render two bars on the same index", () => {
+      const { container } = renderTestCase();
+      expectBars(container, stackedBars);
+    });
+
+    it("should render all bars inactive before user interaction", () => {
+      const { container } = renderTestCase();
+      const bars = getAllBars(container);
+
+      expectActiveBars(container, []);
+      expect(bars).toHaveLength(2);
+    });
+
+    it("should show tooltip when hovering over a bar", () => {
+      const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+      expectLastCalledWith(spy, null);
+
+      const bars = getAllBars(container);
+      showTooltipOnCoordinate(bars[0]!, undefined, { clientX: 10, clientY: 10 });
+      expectLastCalledWith(spy, "0");
+      expectTooltipPayload(container, "", ["x : 1"]);
+    });
+
+    it("should select tooltip axis ticks", () => {
+      const { spy } = renderTestCase(selectTooltipAxisTicks);
+      expectLastCalledWith(spy, [
+        {
+          coordinate: 50,
+          index: 0,
+          offset: 45,
+          value: 0,
+        },
+      ]);
+    });
+
+    it("should update tooltip interaction state after mouse hover", () => {
+      const { container, spy } = renderTestCase((state) => state.tooltip);
+      const expectedStateBeforeHover: TooltipState = {
+        axisInteraction: {
+          click: noInteraction,
+          hover: noInteraction,
+        },
+        itemInteraction: {
+          click: noInteraction,
+          hover: noInteraction,
+        },
+        keyboardInteraction: noInteraction,
+        settings: {
+          active: undefined,
+          axisId: 0,
+          defaultIndex: undefined,
+          shared: false,
+          trigger: "hover",
+        },
+        syncInteraction: {
+          ...noInteraction,
+          label: undefined,
+          sourceViewBox: undefined,
+        },
+        tooltipItemPayloads: [
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: expect.any(Function),
+            settings: {
+              color: undefined,
+              dataKey: "x",
+              fill: undefined,
+              graphicalItemId: expect.stringMatching(/^recharts-bar-.+/),
+              hide: false,
+              name: "x",
+              nameKey: undefined,
+              stroke: undefined,
+              strokeWidth: undefined,
+              type: undefined,
+              unit: undefined,
+            },
+          },
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: expect.any(Function),
+            settings: {
+              color: undefined,
+              dataKey: "y",
+              fill: undefined,
+              graphicalItemId: expect.stringMatching(/^recharts-bar-.+/),
+              hide: false,
+              name: "y",
+              nameKey: undefined,
+              stroke: undefined,
+              strokeWidth: undefined,
+              type: undefined,
+              unit: undefined,
+            },
+          },
+        ],
+      };
+      expectLastCalledWith(spy, expectedStateBeforeHover);
+
+      const bars = getAllBars(container);
+      showTooltipOnCoordinate(bars[0]!, undefined, { clientX: 10, clientY: 10 });
+
+      const expectedStateAfterHover: TooltipState = {
+        axisInteraction: {
+          click: noInteraction,
+          hover: noInteraction,
+        },
+        itemInteraction: {
+          click: noInteraction,
+          hover: {
+            active: true,
+            coordinate: {
+              x: 50,
+              y: 80,
+            },
+            dataKey: "x",
+            index: "0",
+            graphicalItemId: expect.stringMatching(/^recharts-bar-.+/),
+          },
+        },
+        keyboardInteraction: noInteraction,
+        settings: {
+          active: undefined,
+          axisId: 0,
+          defaultIndex: undefined,
+          shared: false,
+          trigger: "hover",
+        },
+        syncInteraction: {
+          ...noInteraction,
+          label: undefined,
+          sourceViewBox: undefined,
+        },
+        tooltipItemPayloads: [
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: expect.any(Function),
+            settings: {
+              color: undefined,
+              dataKey: "x",
+              fill: undefined,
+              graphicalItemId: expect.stringMatching(/^recharts-bar-.+/),
+              hide: false,
+              name: "x",
+              nameKey: undefined,
+              stroke: undefined,
+              strokeWidth: undefined,
+              type: undefined,
+              unit: undefined,
+            },
+          },
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: expect.any(Function),
+            settings: {
+              color: undefined,
+              dataKey: "y",
+              fill: undefined,
+              graphicalItemId: expect.stringMatching(/^recharts-bar-.+/),
+              hide: false,
+              name: "y",
+              nameKey: undefined,
+              stroke: undefined,
+              strokeWidth: undefined,
+              type: undefined,
+              unit: undefined,
+            },
+          },
+        ],
+      };
+      expectLastCalledWith(spy, expectedStateAfterHover);
+    });
+
+    it("should show tooltip somewhere close to the mouse cursor", () => {
+      mockGetBoundingClientRect({
+        width: 10,
+        height: 10,
+      });
+      const { container } = renderTestCase();
+
+      const bars = getAllBars(container);
+      showTooltipOnCoordinate(bars[0]!, undefined, { clientX: 10, clientY: 10 });
+      expectTooltipCoordinate(container, { x: 60, y: 60 });
+
+      showTooltipOnCoordinate(bars[0]!, undefined, { clientX: 20, clientY: 20 });
+      /*
+       * okay so it shows the tooltip at the same place as the last time, not the new mouse position
+       * - fine, it's sticking to the item, not the mouse.
+       */
+      expectTooltipCoordinate(container, { x: 60, y: 60 });
+
+      // let's hover over the second bar and check the coordinate again
+      showTooltipOnCoordinate(bars[1]!, undefined, { clientX: 20, clientY: 20 });
+      expectTooltipCoordinate(container, { x: 60, y: 45.00000000000001 });
+    });
+
+    it("should make the first bar active - but not the second one - when hovering over it", () => {
+      const { container } = renderTestCase();
+      const bars = getAllBars(container);
+      expectActiveBars(container, []);
+
+      showTooltipOnCoordinate(bars[0]!, undefined, { clientX: 10, clientY: 10 });
+      expectActiveBars(container, [stackedBars[0]!]);
+    });
+  });
+});
+
+describe("Bar events", () => {
+  it("should fire onClick event when clicking on a bar", () => {
+    const handleClick = vi.fn();
+    const { container } = renderChart(() => (
+      <BarChart width={200} height={200} layout="horizontal" data={data}>
+        <Bar isAnimationActive={false} dataKey="value" onClick={handleClick} />
+      </BarChart>
+    ));
+
+    const bars = getAllBars(container);
+    const index = 1;
+    fireEvent.click(bars[index]!);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleClick,
+      expect.objectContaining({
+        label: "test2",
+        originalDataIndex: 1,
+        value: 200,
+        payload: expect.objectContaining({ label: "test2", value: 200 }),
+      }),
+      index,
+      expect.any(Object),
+    );
+  });
+
+  it("should fire onMouseOver and onMouseOut events when hovering over a bar", () => {
+    const handleMouseOver = vi.fn();
+    const handleMouseOut = vi.fn();
+
+    const { container } = renderChart(() => (
+      <BarChart width={200} height={200} layout="horizontal" data={data}>
+        <Bar
+          isAnimationActive={false}
+          dataKey="value"
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+        />
+      </BarChart>
+    ));
+
+    const bars = getAllBars(container);
+    fireEvent.mouseOver(bars[1]!);
+    expect(handleMouseOver).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleMouseOver,
+      expect.objectContaining({ label: "test2", originalDataIndex: 1, value: 200 }),
+      1,
+      expect.any(Object),
+    );
+
+    fireEvent.mouseOut(bars[1]!);
+    expect(handleMouseOut).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleMouseOut,
+      expect.objectContaining({ label: "test2", originalDataIndex: 1, value: 200 }),
+      1,
+      expect.any(Object),
+    );
+  });
+
+  it("should fire onMouseMove, onMouseDown and onMouseUp events on a bar", () => {
+    const handleMouseMove = vi.fn();
+    const handleMouseDown = vi.fn();
+    const handleMouseUp = vi.fn();
+
+    const { container } = renderChart(() => (
+      <BarChart width={200} height={200} layout="horizontal" data={data}>
+        <Bar
+          isAnimationActive={false}
+          dataKey="value"
+          onMouseMove={handleMouseMove}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+        />
+      </BarChart>
+    ));
+
+    // move/down/up ride the rectangle path itself (the reference's wrapping-g
+    // attachment is bubble-equivalent for these events) — fire on the path.
+    const bars = getAllBarPaths(container);
+
+    fireEvent.mouseMove(bars[1]!, { clientX: 10, clientY: 10 });
+    expect(handleMouseMove).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleMouseMove,
+      expect.objectContaining({ label: "test2", originalDataIndex: 1, value: 200 }),
+      1,
+      expect.any(Object),
+    );
+
+    fireEvent.mouseDown(bars[1]!);
+    expect(handleMouseDown).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleMouseDown,
+      expect.objectContaining({ label: "test2", originalDataIndex: 1, value: 200 }),
+      1,
+      expect.any(Object),
+    );
+
+    fireEvent.mouseUp(bars[1]!);
+    expect(handleMouseUp).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleMouseUp,
+      expect.objectContaining({ label: "test2", originalDataIndex: 1, value: 200 }),
+      1,
+      expect.any(Object),
+    );
+  });
+
+  it("should fire onTouchMove and onTouchEnd events when touching a bar", () => {
+    const handleTouchMove = vi.fn();
+    const handleTouchEnd = vi.fn();
+
+    const { container } = renderChart(() => (
+      <BarChart width={200} height={200} layout="horizontal" data={data} throttledEvents={[]}>
+        <Bar
+          isAnimationActive={false}
+          dataKey="value"
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        />
+      </BarChart>
+    ));
+
+    const bars = getAllBars(container);
+    fireEvent.touchMove(bars[0]!, { touches: [{ clientX: 200, clientY: 200 }] });
+    expect(handleTouchMove).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleTouchMove,
+      expect.objectContaining({ label: "test1", originalDataIndex: 0, value: 100 }),
+      0,
+      expect.any(Object),
+    );
+  });
+});
+
+// Regression: the item-dispatch hooks used to receive `dataKey`/handlers BY VALUE
+// from an untracked component-body read — a signal-driven dataKey tripped
+// STRICT_READ_UNTRACKED (the global diagnostics guard fails this test if it
+// fires) and the dispatched payload's activeDataKey went stale. The hooks now
+// take getters and read at event time.
+describe("Bar with a signal-driven dataKey", () => {
+  const dualKeyData = [
+    { label: "test1", value: 100, value2: 500 },
+    { label: "test2", value: 200, value2: 400 },
+    { label: "test3", value: 300, value2: 300 },
+  ];
+
+  it("re-renders the bars and dispatches the fresh dataKey after the signal changes", () => {
+    const [barDataKey, setBarDataKey] = createSignal<string>("value");
+    const handleClick = vi.fn();
+    const activeDataKeySpy = vi.fn();
+
+    function ActiveDataKeySpy(): JSX.Element {
+      const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
+      createEffect(
+        () => activeDataKey(),
+        (dk) => {
+          activeDataKeySpy(dk);
+        },
+      );
+      return null;
+    }
+
+    const { container } = renderChart(() => (
+      <BarChart width={200} height={200} layout="horizontal" data={dualKeyData}>
+        <Bar isAnimationActive={false} dataKey={barDataKey()} onClick={handleClick} />
+        {/* shared={false} → item-type tooltip, so the item dispatch's activeDataKey
+            lands in the stored interaction state the spy reads. */}
+        <Tooltip shared={false} />
+        <ActiveDataKeySpy />
+      </BarChart>
+    ));
+
+    const before = Array.from(getAllBarPaths(container)).map((bar) => bar.getAttribute("d"));
+    expect(before).toHaveLength(dualKeyData.length);
+
+    // Exercise the item-dispatch path while the dataKey comes from a signal.
+    showTooltipOnCoordinate(getAllBars(container)[0]!, undefined, { clientX: 10, clientY: 10 });
+    flush();
+    expect(activeDataKeySpy).toHaveBeenLastCalledWith("value");
+    fireEvent.click(getAllBars(container)[0]!);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(
+      handleClick,
+      expect.objectContaining({ value: 100 }),
+      0,
+      expect.any(Object),
+    );
+
+    setBarDataKey("value2");
+    flush();
+
+    // The chart re-rendered against the new dataKey…
+    const after = Array.from(getAllBarPaths(container)).map((bar) => bar.getAttribute("d"));
+    expect(after).toHaveLength(dualKeyData.length);
+    expect(after).not.toEqual(before);
+
+    // …and a fresh interaction dispatches the NEW dataKey (the by-value hook
+    // captured the mount-time "value" forever).
+    showTooltipOnCoordinate(getAllBars(container)[1]!, undefined, { clientX: 11, clientY: 11 });
+    flush();
+    expect(activeDataKeySpy).toHaveBeenLastCalledWith("value2");
+    fireEvent.click(getAllBars(container)[1]!);
+    expect(handleClick).toHaveBeenCalledTimes(2);
+    expectLastCalledWith(
+      handleClick,
+      expect.objectContaining({ value: 400 }),
+      1,
+      expect.any(Object),
+    );
+  });
+});
+
+describe("Bar background zIndex", () => {
+  const composedDataWithBackground = [
+    {
+      x: 10,
+      y: 50,
+      width: 20,
+      height: 20,
+      value: 40,
+      label: "test",
+      background: { x: 10, y: 50, width: 20, height: 50 },
+    },
+    {
+      x: 50,
+      y: 50,
+      width: 20,
+      height: 50,
+      value: 100,
+      label: "test",
+      background: { x: 50, y: 50, width: 20, height: 50 },
+    },
+  ];
+
+  it("should use default barBackground zIndex when background prop is true", () => {
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar background isAnimationActive={false} dataKey="value" />
+      </BarChart>
+    ));
+
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    expect(backgroundRects).toHaveLength(composedDataWithBackground.length);
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: backgroundRects[0]! });
+  });
+
+  it("should use default barBackground zIndex when background prop is an object without zIndex", () => {
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar background={{ fill: "#eee" }} isAnimationActive={false} dataKey="value" />
+      </BarChart>
+    ));
+
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    expect(backgroundRects).toHaveLength(composedDataWithBackground.length);
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: backgroundRects[0]! });
+  });
+
+  it("should use custom zIndex when background prop is an object with zIndex", () => {
+    const customZIndex = DefaultZIndexes.bar + 1;
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar
+          background={{ fill: "#eee", zIndex: customZIndex }}
+          isAnimationActive={false}
+          dataKey="value"
+        />
+      </BarChart>
+    ));
+    flush();
+
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    assertZIndexLayerOrder({ back: bars[0]!, front: backgroundRects[0]! });
+  });
+
+  it("should handle background prop with zIndex as 0", () => {
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar background={{ fill: "#eee", zIndex: 0 }} isAnimationActive={false} dataKey="value" />
+      </BarChart>
+    ));
+
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: backgroundRects[0]! });
+  });
+
+  it("should handle negative zIndex values in background prop", () => {
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar
+          background={{ fill: "#eee", zIndex: -200 }}
+          isAnimationActive={false}
+          dataKey="value"
+        />
+      </BarChart>
+    ));
+    flush();
+
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: backgroundRects[0]! });
+  });
+
+  it("should ignore non-number zIndex values in background prop", () => {
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar
+          background={
+            { fill: "#eee", zIndex: "1100" } as unknown as BarProps["background"] & {
+              zIndex: string;
+            }
+          }
+          isAnimationActive={false}
+          dataKey="value"
+        />
+      </BarChart>
+    ));
+
+    const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: backgroundRects[0]! });
+  });
+
+  it("should handle background prop when it is a function", () => {
+    const backgroundComponent = () => <rect class="custom-background" />;
+    const { container } = renderChart(() => (
+      <BarChart width={500} height={300} data={composedDataWithBackground}>
+        <Bar background={backgroundComponent} isAnimationActive={false} dataKey="value" />
+      </BarChart>
+    ));
+
+    const customBackgrounds = container.querySelectorAll(".custom-background");
+    expect(customBackgrounds).toHaveLength(composedDataWithBackground.length);
+    const bars = container.querySelectorAll(".recharts-bar-rectangle");
+    assertZIndexLayerOrder({ front: bars[0]!, back: customBackgrounds[0]! });
+  });
+});
+
+describe("activeBar with missing data", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 500, height: 300 });
+  });
+
+  it("should highlight the correct bar when data has null values", () => {
+    const dataWithMissingValues = [
+      { name: "Page A", uv: 2400, pv: 4000 },
+      { name: "Page B", uv: null, pv: null },
+      { name: "Page C", uv: 9800, pv: 2000 },
+      { name: "Page D", uv: null, pv: null },
+      { name: "Page E", uv: 4800, pv: 1890 },
+    ];
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart data={dataWithMissingValues} width={500} height={300}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Bar activeBar dataKey="uv" isAnimationActive={false} />
+        <Tooltip isAnimationActive={false} />
+        {props.children}
+      </BarChart>
+    ));
+
+    const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+
+    expectActiveBars(container, []);
+    expectLastCalledWith(spy, null);
+
+    const allBars = getAllBars(container);
+    expect(allBars).toHaveLength(3);
+
+    showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+      clientX: 450,
+      clientY: 150,
+    });
+
+    expectLastCalledWith(spy, "4");
+
+    vi.runOnlyPendingTimers();
+    flush();
+
+    const activeBars = container.querySelectorAll(".recharts-active-bar");
+    expect(activeBars).toHaveLength(1);
+
+    expectTooltipPayload(container, "Page E", ["uv : 4800"]);
+  });
+
+  it("should highlight the correct bar when hovering over middle bar with surrounding nulls", () => {
+    const dataWithMissingValues = [
+      { name: "Page A", uv: 2400 },
+      { name: "Page B", uv: null },
+      { name: "Page C", uv: 9800 },
+      { name: "Page D", uv: null },
+      { name: "Page E", uv: 4800 },
+    ];
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart data={dataWithMissingValues} width={500} height={300}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Bar activeBar dataKey="uv" isAnimationActive={false} />
+        <Tooltip isAnimationActive={false} />
+        {props.children}
+      </BarChart>
+    ));
+
+    const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+
+    showTooltipOnCoordinate(container, barChartMouseHoverTooltipSelector, {
+      clientX: 250,
+      clientY: 150,
+    });
+
+    expectLastCalledWith(spy, "2");
+
+    vi.runOnlyPendingTimers();
+    flush();
+
+    const activeBars = container.querySelectorAll(".recharts-active-bar");
+    expect(activeBars).toHaveLength(1);
+
+    expectTooltipPayload(container, "Page C", ["uv : 9800"]);
+  });
+});
+
+describe("Bar background disabled", () => {
+  const composedDataWithBackground = [
+    {
+      x: 10,
+      y: 50,
+      width: 20,
+      height: 20,
+      value: 40,
+      label: "test",
+      background: { x: 10, y: 50, width: 20, height: 50 },
+    },
+    {
+      x: 50,
+      y: 50,
+      width: 20,
+      height: 50,
+      value: 100,
+      label: "test",
+      background: { x: 50, y: 50, width: 20, height: 50 },
+    },
+  ];
+
+  it.each([null, false, undefined] as const)(
+    "should not render any background elements when background=%s",
+    (background) => {
+      const { container } = renderChart(() => (
+        <BarChart width={500} height={300} data={composedDataWithBackground}>
+          <Bar
+            background={background as BarProps["background"]}
+            isAnimationActive={false}
+            dataKey="value"
+          />
+        </BarChart>
+      ));
+
+      const backgroundRects = container.querySelectorAll(".recharts-bar-background-rectangle");
+      expect(backgroundRects).toHaveLength(0);
+    },
+  );
+});