From db01643dc7f80a119c95e2cf9b53f4eb4321035d Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Tue, 12 Nov 2024 12:33:32 -0600
Subject: [PATCH] Enable prettier formatting for stories (#2961)

---
 .prettierignore                               |   3 +-
 eslint.config.mjs                             |   1 -
 .../victory-area/events.stories.tsx           |  94 ++--
 .../victory-area/labels.stories.tsx           |  94 ++--
 .../polar-interpolation.stories.tsx           |   5 +-
 .../victory-area/polar.stories.tsx            | 140 +++---
 .../victory-area/stacked.stories.tsx          | 166 +++---
 .../victory-area/styles.stories.tsx           | 124 ++---
 .../victory-area/time-scale.stories.tsx       | 110 ++--
 .../victory-area/tooltips.stories.tsx         | 112 ++---
 .../victory-axis/axis-value.stories.tsx       | 112 ++---
 .../brush-axis-grid-line-width.stories.tsx    |  78 +--
 .../fix-label-overlap.stories.tsx             | 118 ++---
 .../victory-axis/orientation.stories.tsx      | 112 ++---
 .../victory-axis/tick-values.stories.tsx      | 148 +++---
 .../victory-axis/with-domain.stories.tsx      | 152 +++---
 .../victory-bar/alignment.stories.tsx         | 108 ++--
 .../victory-bar/bar-ratio.stories.tsx         | 138 ++---
 .../victory-bar/corner-radius.stories.tsx     | 256 +++++-----
 .../victory-bar/data.stories.tsx              | 134 ++---
 .../victory-bar/focus-with-refs.stories.tsx   | 128 ++---
 .../victory-bar/get-path.stories.tsx          |  94 ++--
 .../victory-bar/grouped-bars.stories.tsx      | 436 ++++++++--------
 .../victory-bar/labels.stories.tsx            | 140 +++---
 .../victory-bar/polar-bars.stories.tsx        | 234 ++++-----
 .../victory-bar/regressions.stories.tsx       | 152 +++---
 .../victory-bar/scale.stories.tsx             | 186 +++----
 .../victory-bar/sorting.stories.tsx           |  78 +--
 .../victory-bar/stacked-bars.stories.tsx      | 252 +++++-----
 .../victory-bar/style.stories.tsx             | 108 ++--
 .../victory-bar/theme.stories.tsx             | 124 ++---
 .../victory-bar/tooltips.stories.tsx          | 172 +++----
 .../victory-box-plot/box-width.stories.tsx    |  86 ++--
 .../victory-box-plot/data.stories.tsx         | 136 ++---
 .../victory-box-plot/group.stories.tsx        |  84 ++--
 .../victory-box-plot/labels.stories.tsx       | 154 +++---
 .../victory-box-plot/style.stories.tsx        | 120 ++---
 .../victory-box-plot/tooltips.stories.tsx     | 118 ++---
 .../victory-candlestick/data.stories.tsx      | 128 ++---
 .../victory-candlestick/domain.stories.tsx    | 162 +++---
 .../victory-candlestick/labels.stories.tsx    | 156 +++---
 .../victory-candlestick/style.stories.tsx     | 100 ++--
 .../victory-candlestick/tooltips.stories.tsx  | 206 ++++----
 .../domain-from-data.stories.tsx              | 238 ++++-----
 .../victory-chart/domain-padding.stories.tsx  | 138 ++---
 .../victory-chart/domain.stories.tsx          | 172 +++----
 .../victory-chart/orientations.stories.tsx    |  92 ++--
 .../victory-chart/style.stories.tsx           | 476 +++++++++---------
 ...victory-zoom-container-default.stories.tsx | 104 ++--
 .../preserve-aspect-ratio.stories.tsx         | 138 ++---
 .../victory-errorbar/data.stories.tsx         | 150 +++---
 .../victory-errorbar/domain.stories.tsx       | 140 +++---
 .../victory-errorbar/labels.stories.tsx       | 160 +++---
 .../victory-errorbar/style.stories.tsx        | 100 ++--
 .../victory-errorbar/theme.stories.tsx        |   2 +-
 .../victory-histogram/bin-spacing.stories.tsx |  10 +-
 .../corner-radius.stories.tsx                 |  94 ++--
 .../victory-histogram/data.stories.tsx        | 139 ++---
 .../victory-histogram/date-bins.stories.tsx   | 173 +++----
 .../disable-inline-styles.stories.tsx         |   5 +-
 .../victory-histogram/empty-data.stories.tsx  | 102 ++--
 .../victory-histogram/get-path.stories.tsx    |  98 ++--
 .../victory-histogram/labels.stories.tsx      | 154 +++---
 .../mixed-charts.stories.tsx                  | 116 ++---
 .../numeric-bins.stories.tsx                  | 116 ++---
 .../victory-histogram/scale.stories.tsx       | 128 ++---
 .../victory-histogram/stacked.stories.tsx     | 198 ++++----
 .../victory-histogram/styles.stories.tsx      |  88 ++--
 .../victory-label/anchors.stories.tsx         | 256 +++++-----
 .../victory-label/angles.stories.tsx          | 182 +++----
 .../background-padding.stories.tsx            | 312 ++++++------
 .../background-styles.stories.tsx             | 229 ++++-----
 .../victory-label/inline.stories.tsx          | 149 +++---
 .../victory-label/line-height.stories.tsx     | 216 ++++----
 .../victory-label/positioning.stories.tsx     | 112 ++---
 .../victory-label/styles.stories.tsx          | 384 +++++++-------
 .../victory-legend/line-height.stories.tsx    |  94 ++--
 .../victory-legend/title.stories.tsx          | 206 ++++----
 .../victory-line/data-accessors.stories.tsx   | 179 +++----
 .../victory-line/events.stories.tsx           |  95 ++--
 .../victory-line/interpolation.stories.tsx    | 116 ++---
 .../victory-line/labels.stories.tsx           |  94 ++--
 .../plotting-functions.stories.tsx            | 102 ++--
 .../victory-line/polar.stories.tsx            | 150 +++---
 .../victory-line/stacked.stories.tsx          | 154 +++---
 .../victory-line/styles.stories.tsx           |  88 ++--
 .../victory-line/theme.stories.tsx            | 150 +++---
 .../victory-line/time-scale.stories.tsx       | 110 ++--
 .../victory-line/tooltips.stories.tsx         | 118 ++---
 .../victory-pie/corner-radius.stories.tsx     | 114 ++---
 .../victory-pie/data.stories.tsx              | 104 ++--
 .../victory-pie/inner-radius.stories.tsx      | 124 ++---
 .../victory-pie/label-indicator.stories.tsx   | 144 +++---
 .../victory-pie/label-placement.stories.tsx   | 134 ++---
 .../victory-pie/label-radius.stories.tsx      | 140 +++---
 .../victory-pie/labels.stories.tsx            |  84 ++--
 .../victory-pie/origin.stories.tsx            |  90 ++--
 .../victory-pie/pad-angle.stories.tsx         | 114 ++---
 .../victory-pie/radius.stories.tsx            | 136 ++---
 .../start-and-end-angles.stories.tsx          | 152 +++---
 .../victory-pie/styles.stories.tsx            | 148 +++---
 .../victory-pie/tooltips.stories.tsx          | 140 +++---
 .../victory-polar-axis/axis-angle.stories.tsx | 100 ++--
 .../victory-polar-axis/axis-value.stories.tsx | 100 ++--
 .../victory-polar-axis/domain.stories.tsx     | 142 +++---
 .../label-placement.stories.tsx               |  97 ++--
 .../victory-polar-axis/scale.stories.tsx      |  94 ++--
 .../victory-polar-axis/style.stories.tsx      |  86 ++--
 .../tick-format.stories.tsx                   |  98 ++--
 .../tick-values.stories.tsx                   | 114 ++---
 .../victory-portal/default.stories.tsx        | 120 ++---
 .../victory-scatter/bubble-charts.stories.tsx | 160 +++---
 .../data-accessors.stories.tsx                | 170 +++----
 .../victory-scatter/domain.stories.tsx        |   4 +-
 .../functional-symbols.stories.tsx            | 158 +++---
 .../victory-scatter/labels.stories.tsx        |  91 ++--
 .../victory-scatter/polar.stories.tsx         | 148 +++---
 .../victory-scatter/stacked.stories.tsx       | 152 +++---
 .../victory-scatter/styles.stories.tsx        |  98 ++--
 .../victory-scatter/theme.stories.tsx         | 142 +++---
 .../victory-scatter/time-scale.stories.tsx    | 108 ++--
 .../victory-scatter/tooltips.stories.tsx      | 114 +++--
 .../victory-tooltip/center-offset.stories.tsx | 324 ++++++------
 .../constrain-to-visible-area.stories.tsx     | 172 +++----
 .../victory-tooltip/corner-radius.stories.tsx | 176 +++----
 .../victory-tooltip/flyout-height.stories.tsx | 176 +++----
 .../flyout-padding.stories.tsx                | 134 ++---
 .../victory-tooltip/flyout-style.stories.tsx  | 132 ++---
 .../victory-tooltip/flyout-width.stories.tsx  | 176 +++----
 .../pointer-length.stories.tsx                | 192 +++----
 .../pointer-orientation.stories.tsx           | 226 ++++-----
 .../victory-tooltip/pointer-width.stories.tsx | 192 +++----
 132 files changed, 9242 insertions(+), 9164 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index ed5b91cfe..95314853a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,11 +1,13 @@
 .cache
 .changeset
+.docusaurus
 .expo
 .storybook
 .wireit
 .vscode
 coverage
 dist
+build
 lib
 lib-vendor
 es
@@ -21,5 +23,4 @@ tsconfig.*.json
 storybook-static
 public
 artifacts
-stories
 demo
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3b80801fa..a23e2deb3 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -144,7 +144,6 @@ export default tseslint.config(
     files: ["**/stories/**/*.ts", "**/stories/**/*.stories.tsx"],
     rules: {
       "no-magic-numbers": "off",
-      "prettier/prettier": "off",
     },
   },
 );
diff --git a/stories/victory-charts/victory-area/events.stories.tsx b/stories/victory-charts/victory-area/events.stories.tsx
index bb9ccaa62..34a1a6ee3 100644
--- a/stories/victory-charts/victory-area/events.stories.tsx
+++ b/stories/victory-charts/victory-area/events.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const Events: Story = {
-  args: {},
-  render: (props) => (
-    <VictoryChart theme={VictoryTheme[props.themeKey]}>
-      <VictoryArea
-        {...props}
-        style={{ data: { fill: "tomato" } }}
-        events={[
-          {
-            target: "data",
-            eventHandlers: {
-              onClick: () => {
-                return [
-                  {
-                    eventKey: "all",
-                    target: "data",
-                    mutation: (eventProps) => {
-                      const fill = eventProps.style && eventProps.style.fill;
-                      return fill === "black"
-                        ? null
-                        : { style: { fill: "black" } };
-                    },
-                  },
-                ];
-              },
-            },
-          },
-        ]}
-        data={getData(5)}
-      />
-    </VictoryChart>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const Events: Story = {
+  args: {},
+  render: (props) => (
+    <VictoryChart theme={VictoryTheme[props.themeKey]}>
+      <VictoryArea
+        {...props}
+        style={{ data: { fill: "tomato" } }}
+        events={[
+          {
+            target: "data",
+            eventHandlers: {
+              onClick: () => {
+                return [
+                  {
+                    eventKey: "all",
+                    target: "data",
+                    mutation: (eventProps) => {
+                      const fill = eventProps.style && eventProps.style.fill;
+                      return fill === "black"
+                        ? null
+                        : { style: { fill: "black" } };
+                    },
+                  },
+                ];
+              },
+            },
+          },
+        ]}
+        data={getData(5)}
+      />
+    </VictoryChart>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/labels.stories.tsx b/stories/victory-charts/victory-area/labels.stories.tsx
index db218f368..7c12da1c2 100644
--- a/stories/victory-charts/victory-area/labels.stories.tsx
+++ b/stories/victory-charts/victory-area/labels.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryArea, VictoryChart } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart>
-        <VictoryArea
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryArea
-          {...props}
-          data={getData(7)}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryArea
-          {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: -2, label: "bird" },
-            { x: 5, y: -5, label: "cat" },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryArea, VictoryChart } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart>
+        <VictoryArea
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryArea
+          {...props}
+          data={getData(7)}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryArea
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: -2, label: "bird" },
+            { x: 5, y: -5, label: "cat" },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/polar-interpolation.stories.tsx b/stories/victory-charts/victory-area/polar-interpolation.stories.tsx
index f3831db92..b694b92e8 100644
--- a/stories/victory-charts/victory-area/polar-interpolation.stories.tsx
+++ b/stories/victory-charts/victory-area/polar-interpolation.stories.tsx
@@ -35,7 +35,10 @@ export const PolarInterpolation: Story = {
             style={{ textAnchor: "middle" }}
             text={interpolation}
           />
-          <VictoryArea {...props} interpolation={interpolation as InterpolationPropType} />
+          <VictoryArea
+            {...props}
+            interpolation={interpolation as InterpolationPropType}
+          />
         </VictoryChart>
       ))}
     </>
diff --git a/stories/victory-charts/victory-area/polar.stories.tsx b/stories/victory-charts/victory-area/polar.stories.tsx
index 1e7914a68..b8edbdfc4 100644
--- a/stories/victory-charts/victory-area/polar.stories.tsx
+++ b/stories/victory-charts/victory-area/polar.stories.tsx
@@ -1,70 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryArea,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const Polar: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryArea {...props} data={getData(5)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryArea {...props} data={getData(5)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const Polar: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryArea {...props} data={getData(5)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryArea {...props} data={getData(5)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/stacked.stories.tsx b/stories/victory-charts/victory-area/stacked.stories.tsx
index ff41ab1d6..1abea9472 100644
--- a/stories/victory-charts/victory-area/stacked.stories.tsx
+++ b/stories/victory-charts/victory-area/stacked.stories.tsx
@@ -1,83 +1,83 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryArea,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData, getDataWithBaseline } from "../../utils/data";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const Stacked: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(7)} />
-          <VictoryArea {...props} data={getData(7, "seed-1")} />
-          <VictoryArea {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(9)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(7)} />
-          <VictoryArea {...props} data={getData(7, "seed-1")} />
-          <VictoryArea {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(9)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(7)} />
-          <VictoryArea {...props} data={getData(7, "seed-1")} />
-          <VictoryArea {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryArea {...props} data={getData(9)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryArea {...props} data={getDataWithBaseline(5)} />
-          <VictoryArea {...props} data={getData(5, "seed-1")} />
-          <VictoryArea {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData, getDataWithBaseline } from "../../utils/data";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const Stacked: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(7)} />
+          <VictoryArea {...props} data={getData(7, "seed-1")} />
+          <VictoryArea {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(9)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(7)} />
+          <VictoryArea {...props} data={getData(7, "seed-1")} />
+          <VictoryArea {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(9)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(7)} />
+          <VictoryArea {...props} data={getData(7, "seed-1")} />
+          <VictoryArea {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryArea {...props} data={getData(9)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryArea {...props} data={getDataWithBaseline(5)} />
+          <VictoryArea {...props} data={getData(5, "seed-1")} />
+          <VictoryArea {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/styles.stories.tsx b/stories/victory-charts/victory-area/styles.stories.tsx
index ee702ba12..aec65b3ef 100644
--- a/stories/victory-charts/victory-area/styles.stories.tsx
+++ b/stories/victory-charts/victory-area/styles.stories.tsx
@@ -1,62 +1,62 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryArea,
-  VictoryChart,
-  VictoryLabelStyleObject,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-const labelStyle: VictoryLabelStyleObject = {
-  fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"),
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => datum.x}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: {
-              fill: "tomato",
-              fillOpacity: 0.7,
-              stroke: "tomato",
-              strokeWidth: 2,
-            },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          style={{
-            labels: labelStyle,
-          }}
-          labels={({ datum }) => datum.x}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryLabelStyleObject,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+const labelStyle: VictoryLabelStyleObject = {
+  fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"),
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => datum.x}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: {
+              fill: "tomato",
+              fillOpacity: 0.7,
+              stroke: "tomato",
+              strokeWidth: 2,
+            },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          style={{
+            labels: labelStyle,
+          }}
+          labels={({ datum }) => datum.x}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/time-scale.stories.tsx b/stories/victory-charts/victory-area/time-scale.stories.tsx
index 7958232f4..90d9fe4ef 100644
--- a/stories/victory-charts/victory-area/time-scale.stories.tsx
+++ b/stories/victory-charts/victory-area/time-scale.stories.tsx
@@ -1,55 +1,55 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryArea,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getTimeData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const TimeScale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryArea {...props} data={getTimeData(5)} />
-          <VictoryArea {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryArea {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryArea {...props} data={getTimeData(5)} />
-          <VictoryArea {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryArea {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getTimeData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const TimeScale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryArea {...props} data={getTimeData(5)} />
+          <VictoryArea {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryArea {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryArea {...props} data={getTimeData(5)} />
+          <VictoryArea {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryArea {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-area/tooltips.stories.tsx b/stories/victory-charts/victory-area/tooltips.stories.tsx
index 4818bc1a4..c608867b2 100644
--- a/stories/victory-charts/victory-area/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-area/tooltips.stories.tsx
@@ -1,56 +1,56 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryArea,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData, getMixedData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryArea> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryArea",
-};
-
-export const Tooltips: Story = {
-  args: {
-    labelComponent: <VictoryTooltip active />,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getMixedData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryArea
-          {...props}
-          data={getData(5)}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData, getMixedData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryArea> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryArea",
+};
+
+export const Tooltips: Story = {
+  args: {
+    labelComponent: <VictoryTooltip active />,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getMixedData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryArea
+          {...props}
+          data={getData(5)}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/axis-value.stories.tsx b/stories/victory-charts/victory-axis/axis-value.stories.tsx
index e1e706d98..e628c1e73 100644
--- a/stories/victory-charts/victory-axis/axis-value.stories.tsx
+++ b/stories/victory-charts/victory-axis/axis-value.stories.tsx
@@ -1,56 +1,56 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const AxisValue: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} tickValues={[1, 2, 3, 4, 5]} />
-        <VictoryAxis {...props} dependentAxis axisValue={3} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} axisValue={"zero"} />
-        <VictoryAxis {...props} dependentAxis tickValues={["-", "zero", "+"]} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "time" }}>
-        <VictoryAxis
-          {...props}
-          tickValues={[
-            new Date(1985, 1, 1),
-            new Date(1995, 1, 1),
-            new Date(2005, 1, 1),
-            new Date(2015, 1, 1),
-          ]}
-          tickFormat={(t) => t.getFullYear()}
-        />
-        <VictoryAxis
-          {...props}
-          dependentAxis
-          axisValue={new Date(2000, 1, 1)}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBar
-          data={[
-            { x: "a", y: 1 },
-            { x: "b", y: 2 },
-            { x: "c", y: 5 },
-          ]}
-        />
-        <VictoryAxis {...props} dependentAxis axisValue="b" />
-        <VictoryAxis {...props} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const AxisValue: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} tickValues={[1, 2, 3, 4, 5]} />
+        <VictoryAxis {...props} dependentAxis axisValue={3} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} axisValue={"zero"} />
+        <VictoryAxis {...props} dependentAxis tickValues={["-", "zero", "+"]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "time" }}>
+        <VictoryAxis
+          {...props}
+          tickValues={[
+            new Date(1985, 1, 1),
+            new Date(1995, 1, 1),
+            new Date(2005, 1, 1),
+            new Date(2015, 1, 1),
+          ]}
+          tickFormat={(t) => t.getFullYear()}
+        />
+        <VictoryAxis
+          {...props}
+          dependentAxis
+          axisValue={new Date(2000, 1, 1)}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBar
+          data={[
+            { x: "a", y: 1 },
+            { x: "b", y: 2 },
+            { x: "c", y: 5 },
+          ]}
+        />
+        <VictoryAxis {...props} dependentAxis axisValue="b" />
+        <VictoryAxis {...props} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx
index 537db68c8..f12e091b4 100644
--- a/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx
+++ b/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx
@@ -1,39 +1,39 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryBrushLine } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const BrushAxisGridLineWidth: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryAxis
-        {...props}
-        label="Label"
-        gridComponent={
-          <VictoryBrushLine
-            brushDomain={[0.25, 0.5]}
-            brushWidth={40}
-            brushAreaWidth={20}
-            handleWidth={4}
-            brushAreaStyle={{
-              fill: "orange",
-              stroke: "tomato",
-              strokeWidth: 2,
-            }}
-            brushStyle={{ fill: "teal", stroke: "navy", strokeWidth: 2 }}
-            handleStyle={{ strokeWidth: 1, stroke: "grey" }}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryBrushLine } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const BrushAxisGridLineWidth: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryAxis
+        {...props}
+        label="Label"
+        gridComponent={
+          <VictoryBrushLine
+            brushDomain={[0.25, 0.5]}
+            brushWidth={40}
+            brushAreaWidth={20}
+            handleWidth={4}
+            brushAreaStyle={{
+              fill: "orange",
+              stroke: "tomato",
+              strokeWidth: 2,
+            }}
+            brushStyle={{ fill: "teal", stroke: "navy", strokeWidth: 2 }}
+            handleStyle={{ strokeWidth: 1, stroke: "grey" }}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx b/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx
index e5728c2a2..85977985e 100644
--- a/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx
+++ b/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx
@@ -1,59 +1,59 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryTheme } from "@/victory";
-
-import { getRandomValues, getTimeValues, getValues } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const FixLabelOverlap: Story = {
-  args: {
-    fixLabelOverlap: true,
-  },
-  render: (props) => (
-    <>
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getValues(30)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={getValues(30)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getRandomValues(30)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={getRandomValues(30)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        scale="time"
-        tickValues={getTimeValues(30)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        scale="time"
-        tickValues={getTimeValues(30)}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryTheme } from "@/victory";
+
+import { getRandomValues, getTimeValues, getValues } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const FixLabelOverlap: Story = {
+  args: {
+    fixLabelOverlap: true,
+  },
+  render: (props) => (
+    <>
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getValues(30)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={getValues(30)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getRandomValues(30)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={getRandomValues(30)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        scale="time"
+        tickValues={getTimeValues(30)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        scale="time"
+        tickValues={getTimeValues(30)}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/orientation.stories.tsx b/stories/victory-charts/victory-axis/orientation.stories.tsx
index 651a4fdf1..54b95a014 100644
--- a/stories/victory-charts/victory-axis/orientation.stories.tsx
+++ b/stories/victory-charts/victory-axis/orientation.stories.tsx
@@ -1,56 +1,56 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getValues } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const Orientation: Story = {
-  args: {
-    tickValues: getValues(5),
-  },
-  render: (props) => (
-    <>
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        orientation="top"
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        orientation="bottom"
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        orientation="left"
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        orientation="right"
-      />
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} orientation="top" />
-        <VictoryAxis {...props} dependentAxis orientation="right" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} orientation="top" invertAxis />
-        <VictoryAxis {...props} dependentAxis orientation="right" invertAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[-5, 5]}>
-        <VictoryAxis {...props} orientation="top" />
-        <VictoryAxis {...props} dependentAxis orientation="right" />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getValues } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const Orientation: Story = {
+  args: {
+    tickValues: getValues(5),
+  },
+  render: (props) => (
+    <>
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        orientation="top"
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        orientation="bottom"
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        orientation="left"
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        orientation="right"
+      />
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} orientation="top" />
+        <VictoryAxis {...props} dependentAxis orientation="right" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} orientation="top" invertAxis />
+        <VictoryAxis {...props} dependentAxis orientation="right" invertAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[-5, 5]}>
+        <VictoryAxis {...props} orientation="top" />
+        <VictoryAxis {...props} dependentAxis orientation="right" />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/tick-values.stories.tsx b/stories/victory-charts/victory-axis/tick-values.stories.tsx
index eb4e7f261..e5294a880 100644
--- a/stories/victory-charts/victory-axis/tick-values.stories.tsx
+++ b/stories/victory-charts/victory-axis/tick-values.stories.tsx
@@ -1,74 +1,74 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getRandomValues, getTimeValues, getValues } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const TickValues: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} tickValues={getValues(5)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} dependentAxis tickValues={getValues(5)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} tickValues={getRandomValues(5)} />
-        <VictoryAxis {...props} dependentAxis tickValues={getRandomValues(5)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis {...props} tickValues={["one", "two", "three", "four"]} />
-        <VictoryAxis
-          {...props}
-          dependentAxis
-          tickValues={["one", "two", "three", "four"]}
-        />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        scale={{ x: "time" }}
-      >
-        <VictoryAxis {...props} tickValues={getTimeValues(5)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "time" }}>
-        <VictoryAxis {...props} tickValues={getTimeValues(5)} />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        scale={{ x: "log" }}
-      >
-        <VictoryAxis
-          {...props}
-          tickValues={[1, 3, 5, 7, 10, 50, 100, 500, 1000]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "log" }}>
-        <VictoryAxis
-          {...props}
-          tickValues={[1, 3, 5, 7, 10, 50, 100, 500, 1000]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis
-          {...props}
-          label={"Empty Tick Values"}
-          tickValues={[]}
-          orientation="right"
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getRandomValues, getTimeValues, getValues } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const TickValues: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} tickValues={getValues(5)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} dependentAxis tickValues={getValues(5)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} tickValues={getRandomValues(5)} />
+        <VictoryAxis {...props} dependentAxis tickValues={getRandomValues(5)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis {...props} tickValues={["one", "two", "three", "four"]} />
+        <VictoryAxis
+          {...props}
+          dependentAxis
+          tickValues={["one", "two", "three", "four"]}
+        />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        scale={{ x: "time" }}
+      >
+        <VictoryAxis {...props} tickValues={getTimeValues(5)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "time" }}>
+        <VictoryAxis {...props} tickValues={getTimeValues(5)} />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        scale={{ x: "log" }}
+      >
+        <VictoryAxis
+          {...props}
+          tickValues={[1, 3, 5, 7, 10, 50, 100, 500, 1000]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} scale={{ x: "log" }}>
+        <VictoryAxis
+          {...props}
+          tickValues={[1, 3, 5, 7, 10, 50, 100, 500, 1000]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis
+          {...props}
+          label={"Empty Tick Values"}
+          tickValues={[]}
+          orientation="right"
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-axis/with-domain.stories.tsx b/stories/victory-charts/victory-axis/with-domain.stories.tsx
index 9c542e7c3..5f25036dc 100644
--- a/stories/victory-charts/victory-axis/with-domain.stories.tsx
+++ b/stories/victory-charts/victory-axis/with-domain.stories.tsx
@@ -1,76 +1,76 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryAxis,
-  VictoryChart,
-  VictoryScatter,
-  VictoryTheme,
-} from "@/victory";
-
-import { getValues } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryAxis",
-};
-
-export const WithDomain: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[-10, 10]}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[-10, 10]}
-        tickValues={getValues(5)}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[-10, 10]}
-        tickValues={[8, 9, 10, 11, 12, 13]}
-      />
-      <VictoryAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[-2, 2]}
-        tickValues={["cat", "dog", "bird"]}
-      />
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[1, 4]}>
-        <VictoryScatter
-          data={[
-            { x: 0, y: 1 },
-            { x: 1, y: 2 },
-            { x: 1, y: 3 },
-            { x: 2, y: 4 },
-            { x: 3, y: 3 },
-          ]}
-        />
-        <VictoryAxis {...props} dependentAxis />
-        <VictoryAxis {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[1, 4]}>
-        <VictoryScatter
-          data={[
-            { x: 0, y: 1 },
-            { x: 1, y: 2 },
-            { x: 1, y: 3 },
-            { x: 2, y: 4 },
-            { x: 3, y: 3 },
-          ]}
-        />
-        <VictoryAxis {...props} dependentAxis invertAxis />
-        <VictoryAxis {...props} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryAxis,
+  VictoryChart,
+  VictoryScatter,
+  VictoryTheme,
+} from "@/victory";
+
+import { getValues } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryAxis",
+};
+
+export const WithDomain: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[-10, 10]}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[-10, 10]}
+        tickValues={getValues(5)}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[-10, 10]}
+        tickValues={[8, 9, 10, 11, 12, 13]}
+      />
+      <VictoryAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[-2, 2]}
+        tickValues={["cat", "dog", "bird"]}
+      />
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[1, 4]}>
+        <VictoryScatter
+          data={[
+            { x: 0, y: 1 },
+            { x: 1, y: 2 },
+            { x: 1, y: 3 },
+            { x: 2, y: 4 },
+            { x: 3, y: 3 },
+          ]}
+        />
+        <VictoryAxis {...props} dependentAxis />
+        <VictoryAxis {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domain={[1, 4]}>
+        <VictoryScatter
+          data={[
+            { x: 0, y: 1 },
+            { x: 1, y: 2 },
+            { x: 1, y: 3 },
+            { x: 2, y: 4 },
+            { x: 3, y: 3 },
+          ]}
+        />
+        <VictoryAxis {...props} dependentAxis invertAxis />
+        <VictoryAxis {...props} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/alignment.stories.tsx b/stories/victory-charts/victory-bar/alignment.stories.tsx
index ef72fd4e8..d01fbba92 100644
--- a/stories/victory-charts/victory-bar/alignment.stories.tsx
+++ b/stories/victory-charts/victory-bar/alignment.stories.tsx
@@ -1,54 +1,54 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Alignment: Story = {
-  args: {
-    data: getData(7),
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="start" />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="start" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="middle" />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="middle" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="end" />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} alignment="end" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getMixedData(5)} alignment="start" />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getMixedData(5)} alignment="start" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getMixedData(5)} alignment="end" />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getMixedData(5)} alignment="end" />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Alignment: Story = {
+  args: {
+    data: getData(7),
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="start" />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="start" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="middle" />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="middle" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="end" />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} alignment="end" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getMixedData(5)} alignment="start" />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getMixedData(5)} alignment="start" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getMixedData(5)} alignment="end" />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getMixedData(5)} alignment="end" />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/bar-ratio.stories.tsx b/stories/victory-charts/victory-bar/bar-ratio.stories.tsx
index 8487a5e38..5f07a2bd7 100644
--- a/stories/victory-charts/victory-bar/bar-ratio.stories.tsx
+++ b/stories/victory-charts/victory-bar/bar-ratio.stories.tsx
@@ -1,69 +1,69 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const BarRatio: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(2)} barRatio={0.01}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(50)} barRatio={0.01}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={0.01}  />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={0.01}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(2)} barRatio={0.5}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(50)} barRatio={0.5}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={0.5}  />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={0.5}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(2)} barRatio={1}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(50)} barRatio={1}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={1}  />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={1}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(2)} barRatio={1.5}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(50)} barRatio={1.5}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={1.5}  />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} barRatio={1.5}  />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const BarRatio: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(2)} barRatio={0.01} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(50)} barRatio={0.01} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={0.01} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={0.01} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(2)} barRatio={0.5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(50)} barRatio={0.5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={0.5} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={0.5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(2)} barRatio={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(50)} barRatio={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={1} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(2)} barRatio={1.5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(50)} barRatio={1.5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={1.5} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} barRatio={1.5} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/corner-radius.stories.tsx b/stories/victory-charts/victory-bar/corner-radius.stories.tsx
index 66bbcdd87..1eeee6471 100644
--- a/stories/victory-charts/victory-bar/corner-radius.stories.tsx
+++ b/stories/victory-charts/victory-bar/corner-radius.stories.tsx
@@ -1,128 +1,128 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryPolarAxis,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData, getMixedData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const CornerRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} cornerRadius={1} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} cornerRadius={5} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} cornerRadius={7} />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(7)} cornerRadius={7} />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getMixedData(7)}
-          barWidth={40}
-          cornerRadius={20}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getMixedData(7)}
-          barWidth={40}
-          cornerRadius={20}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getMixedData(7)}
-          barWidth={40}
-          cornerRadius={{
-            topLeft: 5,
-            topRight: 20,
-            bottomLeft: 20,
-            bottomRight: 0,
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getMixedData(7)}
-          barWidth={40}
-          cornerRadius={{
-            topLeft: 5,
-            topRight: 20,
-            bottomLeft: 20,
-            bottomRight: 0,
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={60} theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: 45, y: 6 },
-            { x: 90, y: 30 },
-            { x: 135, y: 65 },
-            { x: 180, y: 50 },
-            { x: 270, y: 40 },
-            { x: 315, y: 30 },
-          ]}
-          style={{ data: { fill: "tomato", width: 40 } }}
-          cornerRadius={{
-            topRight: 1,
-            topLeft: 20,
-            bottomRight: 5,
-            bottomLeft: 0,
-          }}
-        />
-        <VictoryPolarAxis
-          labelPlacement="parallel"
-          tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: 45, y: 6 },
-            { x: 90, y: 30 },
-            { x: 135, y: 65 },
-            { x: 180, y: 50 },
-            { x: 270, y: 40 },
-            { x: 315, y: 30 },
-          ]}
-          style={{ data: { fill: "tomato", width: 40 } }}
-          cornerRadius={{
-            topRight: 1,
-            topLeft: 20,
-            bottomRight: 5,
-            bottomLeft: 0,
-          }}
-        />
-        <VictoryPolarAxis
-          labelPlacement="parallel"
-          tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryPolarAxis,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData, getMixedData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const CornerRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} cornerRadius={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} cornerRadius={5} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} cornerRadius={7} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(7)} cornerRadius={7} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getMixedData(7)}
+          barWidth={40}
+          cornerRadius={20}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getMixedData(7)}
+          barWidth={40}
+          cornerRadius={20}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getMixedData(7)}
+          barWidth={40}
+          cornerRadius={{
+            topLeft: 5,
+            topRight: 20,
+            bottomLeft: 20,
+            bottomRight: 0,
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getMixedData(7)}
+          barWidth={40}
+          cornerRadius={{
+            topLeft: 5,
+            topRight: 20,
+            bottomLeft: 20,
+            bottomRight: 0,
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={60} theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: 45, y: 6 },
+            { x: 90, y: 30 },
+            { x: 135, y: 65 },
+            { x: 180, y: 50 },
+            { x: 270, y: 40 },
+            { x: 315, y: 30 },
+          ]}
+          style={{ data: { fill: "tomato", width: 40 } }}
+          cornerRadius={{
+            topRight: 1,
+            topLeft: 20,
+            bottomRight: 5,
+            bottomLeft: 0,
+          }}
+        />
+        <VictoryPolarAxis
+          labelPlacement="parallel"
+          tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: 45, y: 6 },
+            { x: 90, y: 30 },
+            { x: 135, y: 65 },
+            { x: 180, y: 50 },
+            { x: 270, y: 40 },
+            { x: 315, y: 30 },
+          ]}
+          style={{ data: { fill: "tomato", width: 40 } }}
+          cornerRadius={{
+            topRight: 1,
+            topLeft: 20,
+            bottomRight: 5,
+            bottomLeft: 0,
+          }}
+        />
+        <VictoryPolarAxis
+          labelPlacement="parallel"
+          tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/data.stories.tsx b/stories/victory-charts/victory-bar/data.stories.tsx
index 06bdde779..0269741c7 100644
--- a/stories/victory-charts/victory-bar/data.stories.tsx
+++ b/stories/victory-charts/victory-bar/data.stories.tsx
@@ -1,67 +1,67 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Data: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={[
-            { animal: "Cat", pet: 45, wild: 17 },
-            { animal: "Dog", pet: 85, wild: 6 },
-            { animal: "Fish", pet: 55, wild: 0 },
-            { animal: "Bird", pet: 15, wild: 40 },
-          ]}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={[
-            { a: { b: { c: 1, d: 1 } } },
-            { a: { b: { c: 2, d: 3 } } },
-            { a: { b: { c: 3, d: 2 } } },
-          ]}
-          x={"a.b.c"}
-          y={"a.b.d"}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: -2, label: "bird" },
-            { x: 5, y: -5, label: "cat" },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Data: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={[
+            { animal: "Cat", pet: 45, wild: 17 },
+            { animal: "Dog", pet: 85, wild: 6 },
+            { animal: "Fish", pet: 55, wild: 0 },
+            { animal: "Bird", pet: 15, wild: 40 },
+          ]}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(8)} y0={(d) => d.y - d.x} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={[
+            { a: { b: { c: 1, d: 1 } } },
+            { a: { b: { c: 2, d: 3 } } },
+            { a: { b: { c: 3, d: 2 } } },
+          ]}
+          x={"a.b.c"}
+          y={"a.b.d"}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: -2, label: "bird" },
+            { x: 5, y: -5, label: "cat" },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx b/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx
index e4a86effe..e1654b15d 100644
--- a/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx
+++ b/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx
@@ -1,64 +1,64 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useEffect, useCallback, useRef } from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  Bar,
-  VictoryBar,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const FocusWithRefs: Story = {
-  args: {},
-  render: (props) => {
-    const barsRef = useRef(new Map());
-
-    const focusOnBar = (id) => {
-      const map = barsRef.current;
-      const node = map.get(id);
-      node.focus();
-    };
-
-    useEffect(() => {
-      if (barsRef.current) {
-        focusOnBar("1");
-      }
-    }, []);
-
-    const setRef = useCallback((node) => {
-      const map = barsRef.current;
-      if (node) {
-        map.set(node.attributes.index.value, node);
-      }
-    }, []);
-
-    return (
-      <>
-        <VictoryChart
-          horizontal
-          theme={VictoryTheme[props.themeKey]}
-          domainPadding={10}
-        >
-          <VictoryBar
-            {...props}
-            data={getData(5)}
-            labels={({ datum }) => `x: ${datum.x}`}
-            labelComponent={<VictoryTooltip active />}
-            dataComponent={<Bar tabIndex={0} ref={setRef} />}
-          />
-        </VictoryChart>
-      </>
-    );
-  },
-};
-
-export default meta;
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useCallback, useRef } from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  Bar,
+  VictoryBar,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const FocusWithRefs: Story = {
+  args: {},
+  render: (props) => {
+    const barsRef = useRef(new Map());
+
+    const focusOnBar = (id) => {
+      const map = barsRef.current;
+      const node = map.get(id);
+      node.focus();
+    };
+
+    useEffect(() => {
+      if (barsRef.current) {
+        focusOnBar("1");
+      }
+    }, []);
+
+    const setRef = useCallback((node) => {
+      const map = barsRef.current;
+      if (node) {
+        map.set(node.attributes.index.value, node);
+      }
+    }, []);
+
+    return (
+      <>
+        <VictoryChart
+          horizontal
+          theme={VictoryTheme[props.themeKey]}
+          domainPadding={10}
+        >
+          <VictoryBar
+            {...props}
+            data={getData(5)}
+            labels={({ datum }) => `x: ${datum.x}`}
+            labelComponent={<VictoryTooltip active />}
+            dataComponent={<Bar tabIndex={0} ref={setRef} />}
+          />
+        </VictoryChart>
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/get-path.stories.tsx b/stories/victory-charts/victory-bar/get-path.stories.tsx
index 0c78494d5..ba8528fc1 100644
--- a/stories/victory-charts/victory-bar/get-path.stories.tsx
+++ b/stories/victory-charts/victory-bar/get-path.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const GetPath: Story = {
-  args: {
-    data: getData(7),
-  },
-  render: (props) => {
-    const verticalPathFn = (callbackArgs) => {
-      const { x0, x1, y0, y1 } = callbackArgs;
-      return `M ${x0}, ${y0}
-      L ${(x1 + x0) / 2}, ${y1}
-      L ${x1}, ${y0}
-      z`;
-    };
-
-    const horizontalPathFn = (callbackArgs) => {
-      const { x0, x1, y0, y1 } = callbackArgs;
-      return `M ${x0}, ${y1}
-      L ${x1}, ${(y0 + y1) / 2}
-      L ${x0}, ${y0}
-      z`;
-    };
-
-    return (
-      <>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryBar {...props} getPath={verticalPathFn} />
-        </VictoryChart>
-        <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-          <VictoryBar {...props} getPath={horizontalPathFn} />
-        </VictoryChart>
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const GetPath: Story = {
+  args: {
+    data: getData(7),
+  },
+  render: (props) => {
+    const verticalPathFn = (callbackArgs) => {
+      const { x0, x1, y0, y1 } = callbackArgs;
+      return `M ${x0}, ${y0}
+      L ${(x1 + x0) / 2}, ${y1}
+      L ${x1}, ${y0}
+      z`;
+    };
+
+    const horizontalPathFn = (callbackArgs) => {
+      const { x0, x1, y0, y1 } = callbackArgs;
+      return `M ${x0}, ${y1}
+      L ${x1}, ${(y0 + y1) / 2}
+      L ${x0}, ${y0}
+      z`;
+    };
+
+    return (
+      <>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryBar {...props} getPath={verticalPathFn} />
+        </VictoryChart>
+        <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+          <VictoryBar {...props} getPath={horizontalPathFn} />
+        </VictoryChart>
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/grouped-bars.stories.tsx b/stories/victory-charts/victory-bar/grouped-bars.stories.tsx
index ee165712f..1a19df707 100644
--- a/stories/victory-charts/victory-bar/grouped-bars.stories.tsx
+++ b/stories/victory-charts/victory-bar/grouped-bars.stories.tsx
@@ -1,218 +1,218 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryGroup,
-  VictoryStack,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData, getMixedData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const GroupedBars: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getData(3)} />
-          <VictoryBar {...props} data={getData(3, "seed-1")} />
-          <VictoryBar {...props} data={getData(3, "seed-2")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={10} labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getData(5)} />
-          <VictoryBar {...props} data={getData(3, "seed-1")} />
-          <VictoryBar {...props} data={getData(2, "seed-2")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getMixedData(3)} />
-          <VictoryBar {...props} data={getMixedData(3, "seed")} />
-          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getMixedData(3)} />
-          <VictoryBar {...props} data={getMixedData(3, "seed")} />
-          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryBar {...props} data={getMixedData(3)} />
-          <VictoryBar {...props} data={getMixedData(3, "seed")} />
-          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryBar {...props} data={getMixedData(3)} />
-          <VictoryBar {...props} data={getMixedData(3, "seed")} />
-          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryStack colorScale="red">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-1")} />
-            <VictoryBar {...props} data={getData(3, "seed-2")} />
-          </VictoryStack>
-          <VictoryStack colorScale="green">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-3")} />
-            <VictoryBar {...props} data={getData(3, "seed-4")} />
-          </VictoryStack>
-          <VictoryStack colorScale="blue">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-5")} />
-            <VictoryBar {...props} data={getData(3, "seed-6")} />
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryStack colorScale="red">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-1")} />
-            <VictoryBar {...props} data={getData(3, "seed-2")} />
-          </VictoryStack>
-          <VictoryStack colorScale="green">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-3")} />
-            <VictoryBar {...props} data={getData(3, "seed-4")} />
-          </VictoryStack>
-          <VictoryStack colorScale="blue">
-            <VictoryBar {...props} data={getData(3)} />
-            <VictoryBar {...props} data={getData(3, "seed-5")} />
-            <VictoryBar {...props} data={getData(3, "seed-6")} />
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryStack colorScale="red">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-1")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-2")}
-              barWidth={6}
-            />
-          </VictoryStack>
-          <VictoryStack colorScale="green">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-3")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-4")}
-              barWidth={6}
-            />
-          </VictoryStack>
-          <VictoryStack colorScale="blue">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-5")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-6")}
-              barWidth={6}
-            />
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup
-          offset={20}
-          labels={({ datum }) => datum.x}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryStack colorScale="red">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-1")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-2")}
-              barWidth={6}
-            />
-          </VictoryStack>
-          <VictoryStack colorScale="green">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-3")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-4")}
-              barWidth={6}
-            />
-          </VictoryStack>
-          <VictoryStack colorScale="blue">
-            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-5")}
-              barWidth={6}
-            />
-            <VictoryBar
-              {...props}
-              data={getMixedData(3, "seed-6")}
-              barWidth={6}
-            />
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryGroup,
+  VictoryStack,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData, getMixedData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const GroupedBars: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getData(3)} />
+          <VictoryBar {...props} data={getData(3, "seed-1")} />
+          <VictoryBar {...props} data={getData(3, "seed-2")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={10} labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getData(5)} />
+          <VictoryBar {...props} data={getData(3, "seed-1")} />
+          <VictoryBar {...props} data={getData(2, "seed-2")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getMixedData(3)} />
+          <VictoryBar {...props} data={getMixedData(3, "seed")} />
+          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={20} labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getMixedData(3)} />
+          <VictoryBar {...props} data={getMixedData(3, "seed")} />
+          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryBar {...props} data={getMixedData(3)} />
+          <VictoryBar {...props} data={getMixedData(3, "seed")} />
+          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryBar {...props} data={getMixedData(3)} />
+          <VictoryBar {...props} data={getMixedData(3, "seed")} />
+          <VictoryBar {...props} data={getMixedData(3, "seed-1")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryStack colorScale="red">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-1")} />
+            <VictoryBar {...props} data={getData(3, "seed-2")} />
+          </VictoryStack>
+          <VictoryStack colorScale="green">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-3")} />
+            <VictoryBar {...props} data={getData(3, "seed-4")} />
+          </VictoryStack>
+          <VictoryStack colorScale="blue">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-5")} />
+            <VictoryBar {...props} data={getData(3, "seed-6")} />
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryStack colorScale="red">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-1")} />
+            <VictoryBar {...props} data={getData(3, "seed-2")} />
+          </VictoryStack>
+          <VictoryStack colorScale="green">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-3")} />
+            <VictoryBar {...props} data={getData(3, "seed-4")} />
+          </VictoryStack>
+          <VictoryStack colorScale="blue">
+            <VictoryBar {...props} data={getData(3)} />
+            <VictoryBar {...props} data={getData(3, "seed-5")} />
+            <VictoryBar {...props} data={getData(3, "seed-6")} />
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryStack colorScale="red">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-1")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-2")}
+              barWidth={6}
+            />
+          </VictoryStack>
+          <VictoryStack colorScale="green">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-3")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-4")}
+              barWidth={6}
+            />
+          </VictoryStack>
+          <VictoryStack colorScale="blue">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-5")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-6")}
+              barWidth={6}
+            />
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup
+          offset={20}
+          labels={({ datum }) => datum.x}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryStack colorScale="red">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-1")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-2")}
+              barWidth={6}
+            />
+          </VictoryStack>
+          <VictoryStack colorScale="green">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-3")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-4")}
+              barWidth={6}
+            />
+          </VictoryStack>
+          <VictoryStack colorScale="blue">
+            <VictoryBar {...props} data={getMixedData(3)} barWidth={6} />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-5")}
+              barWidth={6}
+            />
+            <VictoryBar
+              {...props}
+              data={getMixedData(3, "seed-6")}
+              barWidth={6}
+            />
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/labels.stories.tsx b/stories/victory-charts/victory-bar/labels.stories.tsx
index e327f6fca..7ea5cbcc3 100644
--- a/stories/victory-charts/victory-bar/labels.stories.tsx
+++ b/stories/victory-charts/victory-bar/labels.stories.tsx
@@ -1,70 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryPolarAxis,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryBar
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryBar
-          {...props}
-          data={getData(7)}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: -2, label: "bird" },
-            { x: 5, y: -5, label: "cat" },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart
-        polar
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={{ y: 20 }}
-      >
-        <VictoryBar
-          {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: 2, label: "bird" },
-            { x: 5, y: 5, label: "cat" },
-          ]}
-        />
-        <VictoryPolarAxis />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryPolarAxis,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryBar
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryBar
+          {...props}
+          data={getData(7)}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: -2, label: "bird" },
+            { x: 5, y: -5, label: "cat" },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart
+        polar
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ y: 20 }}
+      >
+        <VictoryBar
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: 2, label: "bird" },
+            { x: 5, y: 5, label: "cat" },
+          ]}
+        />
+        <VictoryPolarAxis />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/polar-bars.stories.tsx b/stories/victory-charts/victory-bar/polar-bars.stories.tsx
index 3f55e994f..b882def0c 100644
--- a/stories/victory-charts/victory-bar/polar-bars.stories.tsx
+++ b/stories/victory-charts/victory-bar/polar-bars.stories.tsx
@@ -1,117 +1,117 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryGroup,
-  VictoryPolarAxis,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const PolarBars: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryBar
-          {...props}
-          style={{ data: { width: 20 } }}
-          data={getData(7)}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryBar
-          {...props}
-          style={{ data: { stroke: "red", strokeWidth: 2 } }}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar endAngle={180}>
-        <VictoryBar
-          {...props}
-          style={{ data: { stroke: "red", strokeWidth: 2 } }}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryStack colorScale="qualitative">
-          <VictoryBar {...props} data={getData(7)} />
-          <VictoryBar {...props} data={getData(7, "seed-1")} />
-          <VictoryBar {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryStack colorScale="qualitative" style={{ data: { width: 15 } }}>
-          <VictoryBar {...props} data={getData(7)} />
-          <VictoryBar {...props} data={getData(7, "seed-1")} />
-          <VictoryBar {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryGroup
-          offset={25}
-          colorScale="qualitative"
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryBar {...props} data={getData(5)} />
-          <VictoryBar {...props} data={getData(5, "seed-1")} />
-          <VictoryBar {...props} data={getData(5, "seed-2")} />
-        </VictoryGroup>
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar innerRadius={50}>
-        <VictoryGroup
-          offset={25}
-          colorScale="qualitative"
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryBar {...props} data={getData(5)} />
-          <VictoryBar {...props} data={getData(5, "seed-1")} />
-          <VictoryBar {...props} data={getData(5, "seed-2")} />
-        </VictoryGroup>
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        polar
-        endAngle={180}
-        innerRadius={50}
-      >
-        <VictoryStack colorScale="qualitative" style={{ data: { width: 15 } }}>
-          <VictoryBar {...props} data={getData(5)} />
-          <VictoryBar {...props} data={getData(5, "seed-1")} />
-          <VictoryBar {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-        <VictoryPolarAxis />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryGroup,
+  VictoryPolarAxis,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const PolarBars: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryBar
+          {...props}
+          style={{ data: { width: 20 } }}
+          data={getData(7)}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryBar
+          {...props}
+          style={{ data: { stroke: "red", strokeWidth: 2 } }}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar endAngle={180}>
+        <VictoryBar
+          {...props}
+          style={{ data: { stroke: "red", strokeWidth: 2 } }}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryStack colorScale="qualitative">
+          <VictoryBar {...props} data={getData(7)} />
+          <VictoryBar {...props} data={getData(7, "seed-1")} />
+          <VictoryBar {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryStack colorScale="qualitative" style={{ data: { width: 15 } }}>
+          <VictoryBar {...props} data={getData(7)} />
+          <VictoryBar {...props} data={getData(7, "seed-1")} />
+          <VictoryBar {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryGroup
+          offset={25}
+          colorScale="qualitative"
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryBar {...props} data={getData(5)} />
+          <VictoryBar {...props} data={getData(5, "seed-1")} />
+          <VictoryBar {...props} data={getData(5, "seed-2")} />
+        </VictoryGroup>
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar innerRadius={50}>
+        <VictoryGroup
+          offset={25}
+          colorScale="qualitative"
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryBar {...props} data={getData(5)} />
+          <VictoryBar {...props} data={getData(5, "seed-1")} />
+          <VictoryBar {...props} data={getData(5, "seed-2")} />
+        </VictoryGroup>
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        polar
+        endAngle={180}
+        innerRadius={50}
+      >
+        <VictoryStack colorScale="qualitative" style={{ data: { width: 15 } }}>
+          <VictoryBar {...props} data={getData(5)} />
+          <VictoryBar {...props} data={getData(5, "seed-1")} />
+          <VictoryBar {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+        <VictoryPolarAxis />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/regressions.stories.tsx b/stories/victory-charts/victory-bar/regressions.stories.tsx
index 1da76b1fe..262e6e4d5 100644
--- a/stories/victory-charts/victory-bar/regressions.stories.tsx
+++ b/stories/victory-charts/victory-bar/regressions.stories.tsx
@@ -1,76 +1,76 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryGroup,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData, getStackedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Regressions: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={20} style={{ data: { width: 10 } }}>
-          <VictoryStack colorScale={"red"}>
-            {getStackedData(5, 3, "useStrings").map((data, index) => {
-              return (
-                <VictoryBar {...props} horizontal key={index} data={data} />
-              );
-            })}
-          </VictoryStack>
-          <VictoryStack colorScale={"green"}>
-            {getStackedData(5, 3, "useStrings").map((data, index) => {
-              return (
-                <VictoryBar {...props} horizontal key={index} data={data} />
-              );
-            })}
-          </VictoryStack>
-          <VictoryStack colorScale={"blue"}>
-            {getStackedData(5, 3, "useStrings").map((data, index) => {
-              return (
-                <VictoryBar {...props} horizontal key={index} data={data} />
-              );
-            })}
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryGroup
-          offset={20}
-          style={{ data: { width: 15 } }}
-          labels={({ datum }) => datum.x}
-        >
-          <VictoryStack colorScale="red">
-            <VictoryBar {...props} data={getData(4)} />
-            <VictoryBar {...props} data={getData(4, "seed-1")} />
-            <VictoryBar {...props} data={getData(4, "seed-2")} />
-          </VictoryStack>
-          <VictoryStack colorScale="green">
-            <VictoryBar {...props} data={getData(4)} />
-            <VictoryBar {...props} data={getData(4, "seed-3")} />
-            <VictoryBar {...props} data={getData(4, "seed-4")} />
-          </VictoryStack>
-          <VictoryStack colorScale="blue">
-            <VictoryBar {...props} data={getData(4)} />
-            <VictoryBar {...props} data={getData(4, "seed-5")} />
-            <VictoryBar {...props} data={getData(4, "seed-6")} />
-          </VictoryStack>
-        </VictoryGroup>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryGroup,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData, getStackedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Regressions: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={20} style={{ data: { width: 10 } }}>
+          <VictoryStack colorScale={"red"}>
+            {getStackedData(5, 3, "useStrings").map((data, index) => {
+              return (
+                <VictoryBar {...props} horizontal key={index} data={data} />
+              );
+            })}
+          </VictoryStack>
+          <VictoryStack colorScale={"green"}>
+            {getStackedData(5, 3, "useStrings").map((data, index) => {
+              return (
+                <VictoryBar {...props} horizontal key={index} data={data} />
+              );
+            })}
+          </VictoryStack>
+          <VictoryStack colorScale={"blue"}>
+            {getStackedData(5, 3, "useStrings").map((data, index) => {
+              return (
+                <VictoryBar {...props} horizontal key={index} data={data} />
+              );
+            })}
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryGroup
+          offset={20}
+          style={{ data: { width: 15 } }}
+          labels={({ datum }) => datum.x}
+        >
+          <VictoryStack colorScale="red">
+            <VictoryBar {...props} data={getData(4)} />
+            <VictoryBar {...props} data={getData(4, "seed-1")} />
+            <VictoryBar {...props} data={getData(4, "seed-2")} />
+          </VictoryStack>
+          <VictoryStack colorScale="green">
+            <VictoryBar {...props} data={getData(4)} />
+            <VictoryBar {...props} data={getData(4, "seed-3")} />
+            <VictoryBar {...props} data={getData(4, "seed-4")} />
+          </VictoryStack>
+          <VictoryStack colorScale="blue">
+            <VictoryBar {...props} data={getData(4)} />
+            <VictoryBar {...props} data={getData(4, "seed-5")} />
+            <VictoryBar {...props} data={getData(4, "seed-6")} />
+          </VictoryStack>
+        </VictoryGroup>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/scale.stories.tsx b/stories/victory-charts/victory-bar/scale.stories.tsx
index e855b0a34..3f763797d 100644
--- a/stories/victory-charts/victory-bar/scale.stories.tsx
+++ b/stories/victory-charts/victory-bar/scale.stories.tsx
@@ -1,93 +1,93 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryGroup,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getLogData, getTimeData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Scale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        scale={{ y: "log" }}
-        minDomain={1}
-      >
-        <VictoryBar
-          {...props}
-          data={getLogData(7)}
-          labels={({ datum }) => datum.y.toPrecision(1)}
-        />
-      </VictoryChart>
-      <VictoryChart
-        horizontal
-        theme={VictoryTheme[props.themeKey]}
-        scale={{ y: "log" }}
-        minDomain={1}
-      >
-        <VictoryBar
-          {...props}
-          data={getLogData(7)}
-          labels={({ datum }) => datum.y.toPrecision(1)}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryBar {...props} data={getTimeData(5)} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryBar {...props} data={getTimeData(5)} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={10} labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryBar {...props} data={getTimeData(5)} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryGroup offset={10} labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryBar {...props} data={getTimeData(5)} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryGroup>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryGroup,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getLogData, getTimeData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Scale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        scale={{ y: "log" }}
+        minDomain={1}
+      >
+        <VictoryBar
+          {...props}
+          data={getLogData(7)}
+          labels={({ datum }) => datum.y.toPrecision(1)}
+        />
+      </VictoryChart>
+      <VictoryChart
+        horizontal
+        theme={VictoryTheme[props.themeKey]}
+        scale={{ y: "log" }}
+        minDomain={1}
+      >
+        <VictoryBar
+          {...props}
+          data={getLogData(7)}
+          labels={({ datum }) => datum.y.toPrecision(1)}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryBar {...props} data={getTimeData(5)} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryBar {...props} data={getTimeData(5)} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={10} labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryBar {...props} data={getTimeData(5)} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryGroup offset={10} labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryBar {...props} data={getTimeData(5)} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryBar {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryGroup>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/sorting.stories.tsx b/stories/victory-charts/victory-bar/sorting.stories.tsx
index c33405f86..193ed9c9d 100644
--- a/stories/victory-charts/victory-bar/sorting.stories.tsx
+++ b/stories/victory-charts/victory-bar/sorting.stories.tsx
@@ -1,39 +1,39 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Sorting: Story = {
-  args: {
-    data: [
-      { x: "low", y: 1 },
-      { x: "med", y: 2 },
-      { x: "high", y: 3 },
-    ],
-    sortKey: "sort",
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBar {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBar {...props} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Sorting: Story = {
+  args: {
+    data: [
+      { x: "low", y: 1 },
+      { x: "med", y: 2 },
+      { x: "high", y: 3 },
+    ],
+    sortKey: "sort",
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBar {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBar {...props} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/stacked-bars.stories.tsx b/stories/victory-charts/victory-bar/stacked-bars.stories.tsx
index 59db80104..07a386aed 100644
--- a/stories/victory-charts/victory-bar/stacked-bars.stories.tsx
+++ b/stories/victory-charts/victory-bar/stacked-bars.stories.tsx
@@ -1,126 +1,126 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryLabel,
-  VictoryStack,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getData, getDataWithBaseline, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const StackedBars: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
-          <VictoryBar {...props} data={getData(7)} />
-          <VictoryBar {...props} data={getData(7, "seed-1")} />
-          <VictoryBar {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryStack>
-          <VictoryBar
-            {...props}
-            data={getData(7)}
-            labels={({ datum }) => datum.y.toPrecision(2)}
-            labelComponent={<VictoryLabel renderInPortal />}
-          />
-          <VictoryBar
-            {...props}
-            data={getData(7, "seed-1")}
-            labels={({ datum }) => datum.y.toPrecision(2)}
-            labelComponent={<VictoryLabel renderInPortal />}
-          />
-          <VictoryBar
-            {...props}
-            data={getData(7, "seed-2")}
-            labels={({ datum }) => datum.y.toPrecision(2)}
-            labelComponent={<VictoryLabel renderInPortal />}
-          />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
-          <VictoryBar {...props} data={getData(9)} />
-          <VictoryBar {...props} data={getData(5, "seed-1")} />
-          <VictoryBar {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
-          <VictoryBar {...props} data={getMixedData(7)} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        horizontal
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={8}
-      >
-        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
-          <VictoryBar {...props} data={getMixedData(7)} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
-        <VictoryStack
-          labels={({ datum }) => datum._y1.toPrecision(2)}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryBar {...props} data={getMixedData(7)} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        horizontal
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={8}
-      >
-        <VictoryStack
-          labels={({ datum }) => datum._y1.toPrecision(2)}
-          labelComponent={<VictoryTooltip active />}
-        >
-          <VictoryBar {...props} data={getMixedData(7)} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
-          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryBar {...props} data={getData(90)} />
-          <VictoryBar {...props} data={getData(50, "seed-1")} />
-          <VictoryBar {...props} data={getData(200, "seed-2")} />
-          <VictoryBar {...props} data={getData(30, "seed-3")} />
-          <VictoryBar {...props} data={getData(200, "seed-4")} />
-          <VictoryBar {...props} data={getData(100, "seed-5")} />
-          <VictoryBar {...props} data={getData(200, "seed-6")} />
-          <VictoryBar {...props} data={getData(190, "seed-7")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryBar {...props} data={getDataWithBaseline(7)} />
-          <VictoryBar {...props} data={getData(7, "seed-1")} />
-          <VictoryBar {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryLabel,
+  VictoryStack,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getData, getDataWithBaseline, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const StackedBars: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
+          <VictoryBar {...props} data={getData(7)} />
+          <VictoryBar {...props} data={getData(7, "seed-1")} />
+          <VictoryBar {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryStack>
+          <VictoryBar
+            {...props}
+            data={getData(7)}
+            labels={({ datum }) => datum.y.toPrecision(2)}
+            labelComponent={<VictoryLabel renderInPortal />}
+          />
+          <VictoryBar
+            {...props}
+            data={getData(7, "seed-1")}
+            labels={({ datum }) => datum.y.toPrecision(2)}
+            labelComponent={<VictoryLabel renderInPortal />}
+          />
+          <VictoryBar
+            {...props}
+            data={getData(7, "seed-2")}
+            labels={({ datum }) => datum.y.toPrecision(2)}
+            labelComponent={<VictoryLabel renderInPortal />}
+          />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
+          <VictoryBar {...props} data={getData(9)} />
+          <VictoryBar {...props} data={getData(5, "seed-1")} />
+          <VictoryBar {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
+          <VictoryBar {...props} data={getMixedData(7)} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        horizontal
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={8}
+      >
+        <VictoryStack labels={({ datum }) => datum._y1.toPrecision(2)}>
+          <VictoryBar {...props} data={getMixedData(7)} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={8}>
+        <VictoryStack
+          labels={({ datum }) => datum._y1.toPrecision(2)}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryBar {...props} data={getMixedData(7)} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        horizontal
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={8}
+      >
+        <VictoryStack
+          labels={({ datum }) => datum._y1.toPrecision(2)}
+          labelComponent={<VictoryTooltip active />}
+        >
+          <VictoryBar {...props} data={getMixedData(7)} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-1")} />
+          <VictoryBar {...props} data={getMixedData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryBar {...props} data={getData(90)} />
+          <VictoryBar {...props} data={getData(50, "seed-1")} />
+          <VictoryBar {...props} data={getData(200, "seed-2")} />
+          <VictoryBar {...props} data={getData(30, "seed-3")} />
+          <VictoryBar {...props} data={getData(200, "seed-4")} />
+          <VictoryBar {...props} data={getData(100, "seed-5")} />
+          <VictoryBar {...props} data={getData(200, "seed-6")} />
+          <VictoryBar {...props} data={getData(190, "seed-7")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryBar {...props} data={getDataWithBaseline(7)} />
+          <VictoryBar {...props} data={getData(7, "seed-1")} />
+          <VictoryBar {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/style.stories.tsx b/stories/victory-charts/victory-bar/style.stories.tsx
index 11bcae763..ac257218b 100644
--- a/stories/victory-charts/victory-bar/style.stories.tsx
+++ b/stories/victory-charts/victory-bar/style.stories.tsx
@@ -1,54 +1,54 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Style: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          labels={({ datum }) => datum.y}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: {
-              fill: "tomato",
-              fillOpacity: 0.7,
-              stroke: "tomato",
-              strokeWidth: 2,
-            },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          style={{
-            data: {
-              stroke: ({ datum }) => (datum.y > 75 ? "red" : "transparent"),
-              strokeWidth: 3,
-              opacity: ({ datum }) => (datum.y > 75 ? 1 : 0.4),
-            },
-          }}
-          labels={({ datum }) => datum.x}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Style: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          labels={({ datum }) => datum.y}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: {
+              fill: "tomato",
+              fillOpacity: 0.7,
+              stroke: "tomato",
+              strokeWidth: 2,
+            },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          style={{
+            data: {
+              stroke: ({ datum }) => (datum.y > 75 ? "red" : "transparent"),
+              strokeWidth: 3,
+              opacity: ({ datum }) => (datum.y > 75 ? 1 : 0.4),
+            },
+          }}
+          labels={({ datum }) => datum.x}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/theme.stories.tsx b/stories/victory-charts/victory-bar/theme.stories.tsx
index 723e5056f..3ef66e922 100644
--- a/stories/victory-charts/victory-bar/theme.stories.tsx
+++ b/stories/victory-charts/victory-bar/theme.stories.tsx
@@ -1,62 +1,62 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Theme: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getData(8)} />
-          <VictoryBar {...props} data={getData(8, "seed-1")} />
-          <VictoryBar {...props} data={getData(8, "seed-2")} />
-          <VictoryBar {...props} data={getData(8, "seed-3")} />
-          <VictoryBar {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.grayscale}>
-        <VictoryBar {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.grayscale}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getData(8)} />
-          <VictoryBar {...props} data={getData(8, "seed-1")} />
-          <VictoryBar {...props} data={getData(8, "seed-2")} />
-          <VictoryBar {...props} data={getData(8, "seed-3")} />
-          <VictoryBar {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryBar {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryBar {...props} data={getData(8)} />
-          <VictoryBar {...props} data={getData(8, "seed-1")} />
-          <VictoryBar {...props} data={getData(8, "seed-2")} />
-          <VictoryBar {...props} data={getData(8, "seed-3")} />
-          <VictoryBar {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Theme: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getData(8)} />
+          <VictoryBar {...props} data={getData(8, "seed-1")} />
+          <VictoryBar {...props} data={getData(8, "seed-2")} />
+          <VictoryBar {...props} data={getData(8, "seed-3")} />
+          <VictoryBar {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.grayscale}>
+        <VictoryBar {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.grayscale}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getData(8)} />
+          <VictoryBar {...props} data={getData(8, "seed-1")} />
+          <VictoryBar {...props} data={getData(8, "seed-2")} />
+          <VictoryBar {...props} data={getData(8, "seed-3")} />
+          <VictoryBar {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryBar {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryBar {...props} data={getData(8)} />
+          <VictoryBar {...props} data={getData(8, "seed-1")} />
+          <VictoryBar {...props} data={getData(8, "seed-2")} />
+          <VictoryBar {...props} data={getData(8, "seed-3")} />
+          <VictoryBar {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-bar/tooltips.stories.tsx b/stories/victory-charts/victory-bar/tooltips.stories.tsx
index 18b5b65b5..14a983e9f 100644
--- a/stories/victory-charts/victory-bar/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-bar/tooltips.stories.tsx
@@ -1,86 +1,86 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryPolarAxis,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBar",
-};
-
-export const Tooltips: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart
-        horizontal
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={10}
-      >
-        <VictoryBar
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          data={getMixedData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart
-        horizontal
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={10}
-      >
-        <VictoryBar
-          {...props}
-          data={getMixedData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
-        <VictoryBar
-          {...props}
-          data={getData(5)}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryBar
-          {...props}
-          data={getData(5)}
-          style={{ data: { width: 20 } }}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-          labelComponent={<VictoryTooltip active />}
-        />
-        <VictoryPolarAxis />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryPolarAxis,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBar",
+};
+
+export const Tooltips: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart
+        horizontal
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={10}
+      >
+        <VictoryBar
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          data={getMixedData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart
+        horizontal
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={10}
+      >
+        <VictoryBar
+          {...props}
+          data={getMixedData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={10}>
+        <VictoryBar
+          {...props}
+          data={getData(5)}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryBar
+          {...props}
+          data={getData(5)}
+          style={{ data: { width: 20 } }}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+          labelComponent={<VictoryTooltip active />}
+        />
+        <VictoryPolarAxis />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/box-width.stories.tsx b/stories/victory-charts/victory-box-plot/box-width.stories.tsx
index 622e4b72b..11c683ce6 100644
--- a/stories/victory-charts/victory-box-plot/box-width.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/box-width.stories.tsx
@@ -1,43 +1,43 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getBoxPlotData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const BoxWidth: Story = {
-  args: {
-    data: getBoxPlotData(5),
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot boxWidth={5} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot boxWidth={5} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot boxWidth={35} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot boxWidth={35} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot boxWidth={35} whiskerWidth={0} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot boxWidth={0} {...props} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getBoxPlotData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const BoxWidth: Story = {
+  args: {
+    data: getBoxPlotData(5),
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot boxWidth={5} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot boxWidth={5} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot boxWidth={35} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot boxWidth={35} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot boxWidth={35} whiskerWidth={0} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot boxWidth={0} {...props} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/data.stories.tsx b/stories/victory-charts/victory-box-plot/data.stories.tsx
index 12f2e275a..bc8409b60 100644
--- a/stories/victory-charts/victory-box-plot/data.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/data.stories.tsx
@@ -1,68 +1,68 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getArrayData, getBoxPlotRepeatData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const Data: Story = {
-  args: {
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          data={[
-            { type: 1, Min: 1, Max: 18, Median: 8, Q1: 5, Q3: 15 },
-            { type: 2, Min: 4, Max: 20, Median: 10, Q1: 7, Q3: 15 },
-            { type: 3, Min: 3, Max: 12, Median: 6, Q1: 5, Q3: 10 },
-          ]}
-          x="type"
-          min="Min"
-          max="Max"
-          median="Median"
-          q1="Q1"
-          q3="Q3"
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot
-          data={[
-            { type: 1, Min: 1, Max: 18, Median: 8, Q1: 5, Q3: 15 },
-            { type: 2, Min: 4, Max: 20, Median: 10, Q1: 7, Q3: 15 },
-            { type: 3, Min: 3, Max: 12, Median: 6, Q1: 5, Q3: 10 },
-          ]}
-          x="type"
-          min="Min"
-          max="Max"
-          median="Median"
-          q1="Q1"
-          q3="Q3"
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot data={getArrayData(5, 10)} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot data={getArrayData(5, 10)} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot data={getBoxPlotRepeatData(5, 10)} {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot data={getBoxPlotRepeatData(5, 10)} {...props} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getArrayData, getBoxPlotRepeatData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const Data: Story = {
+  args: {
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          data={[
+            { type: 1, Min: 1, Max: 18, Median: 8, Q1: 5, Q3: 15 },
+            { type: 2, Min: 4, Max: 20, Median: 10, Q1: 7, Q3: 15 },
+            { type: 3, Min: 3, Max: 12, Median: 6, Q1: 5, Q3: 10 },
+          ]}
+          x="type"
+          min="Min"
+          max="Max"
+          median="Median"
+          q1="Q1"
+          q3="Q3"
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot
+          data={[
+            { type: 1, Min: 1, Max: 18, Median: 8, Q1: 5, Q3: 15 },
+            { type: 2, Min: 4, Max: 20, Median: 10, Q1: 7, Q3: 15 },
+            { type: 3, Min: 3, Max: 12, Median: 6, Q1: 5, Q3: 10 },
+          ]}
+          x="type"
+          min="Min"
+          max="Max"
+          median="Median"
+          q1="Q1"
+          q3="Q3"
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot data={getArrayData(5, 10)} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot data={getArrayData(5, 10)} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot data={getBoxPlotRepeatData(5, 10)} {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot data={getBoxPlotRepeatData(5, 10)} {...props} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/group.stories.tsx b/stories/victory-charts/victory-box-plot/group.stories.tsx
index bfab546e2..f8c230060 100644
--- a/stories/victory-charts/victory-box-plot/group.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/group.stories.tsx
@@ -1,42 +1,42 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBoxPlot, VictoryGroup } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const Group: Story = {
-  args: {
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <VictoryGroup>
-      <VictoryBoxPlot
-        minLabels
-        maxLabels
-        data={[
-          { x: 1, y: [1, 2, 3, 5] },
-          { x: 2, y: [3, 2, 8, 10] },
-          { x: 3, y: [2, 8, 6, 5] },
-          { x: 4, y: [1, 3, 2, 9] },
-        ]}
-        style={{
-          min: { stroke: "tomato" },
-          max: { stroke: "orange" },
-          q1: { fill: "tomato" },
-          q3: { fill: "orange" },
-          median: { stroke: "white", strokeWidth: 2 },
-          minLabels: { fill: "tomato" },
-          maxLabels: { fill: "orange" },
-        }}
-        {...props}
-      />
-    </VictoryGroup>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBoxPlot, VictoryGroup } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const Group: Story = {
+  args: {
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <VictoryGroup>
+      <VictoryBoxPlot
+        minLabels
+        maxLabels
+        data={[
+          { x: 1, y: [1, 2, 3, 5] },
+          { x: 2, y: [3, 2, 8, 10] },
+          { x: 3, y: [2, 8, 6, 5] },
+          { x: 4, y: [1, 3, 2, 9] },
+        ]}
+        style={{
+          min: { stroke: "tomato" },
+          max: { stroke: "orange" },
+          q1: { fill: "tomato" },
+          q3: { fill: "orange" },
+          median: { stroke: "white", strokeWidth: 2 },
+          minLabels: { fill: "tomato" },
+          maxLabels: { fill: "orange" },
+        }}
+        {...props}
+      />
+    </VictoryGroup>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/labels.stories.tsx b/stories/victory-charts/victory-box-plot/labels.stories.tsx
index addeaa6e9..dfb5da728 100644
--- a/stories/victory-charts/victory-box-plot/labels.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/labels.stories.tsx
@@ -1,77 +1,77 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getBoxPlotData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const Labels: Story = {
-  args: {
-    data: getBoxPlotData(3),
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot labels {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot labels {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot minLabels maxLabels medianLabels {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot q1Labels q3Labels {...props} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          minLabels={({ datum }) => `min: ${datum.min}`}
-          maxLabels={({ datum }) => `max: ${datum.max}`}
-          medianLabels={({ datum }) => `med: ${datum.median}`}
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          q1Labels={({ datum }) => `q1: ${datum.q1}`}
-          q3Labels={({ datum }) => `q3: ${datum.q3}`}
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          labels
-          labelOrientation={{
-            q1: "left",
-            q3: "left",
-            min: "right",
-            max: "right",
-            median: "right",
-          }}
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot
-          labels
-          labelOrientation={{
-            q1: "top",
-            q3: "top",
-            min: "bottom",
-            max: "bottom",
-            median: "bottom",
-          }}
-          {...props}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getBoxPlotData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const Labels: Story = {
+  args: {
+    data: getBoxPlotData(3),
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot labels {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot labels {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot minLabels maxLabels medianLabels {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot q1Labels q3Labels {...props} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          minLabels={({ datum }) => `min: ${datum.min}`}
+          maxLabels={({ datum }) => `max: ${datum.max}`}
+          medianLabels={({ datum }) => `med: ${datum.median}`}
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          q1Labels={({ datum }) => `q1: ${datum.q1}`}
+          q3Labels={({ datum }) => `q3: ${datum.q3}`}
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          labels
+          labelOrientation={{
+            q1: "left",
+            q3: "left",
+            min: "right",
+            max: "right",
+            median: "right",
+          }}
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot
+          labels
+          labelOrientation={{
+            q1: "top",
+            q3: "top",
+            min: "bottom",
+            max: "bottom",
+            median: "bottom",
+          }}
+          {...props}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/style.stories.tsx b/stories/victory-charts/victory-box-plot/style.stories.tsx
index 4c9c64e47..5905e2167 100644
--- a/stories/victory-charts/victory-box-plot/style.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/style.stories.tsx
@@ -1,60 +1,60 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getBoxPlotData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const Style: Story = {
-  args: {
-    data: getBoxPlotData(4),
-    domainPadding: 20,
-    labels: true,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          style={{
-            min: { stroke: "#FF530D", strokeWidth: 2 },
-            max: { stroke: "#2bbee0", strokeWidth: 2 },
-            q1: { fill: "#FF530D", fillOpacity: 0.5 },
-            q3: { fill: "#2bbee0", fillOpacity: 0.5 },
-            median: { stroke: "#fff", strokeWidth: 2 },
-            minLabels: { fill: "#FF530D", padding: 10 },
-            maxLabels: { fill: "#2bbee0", padding: 10 },
-          }}
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot
-          style={{
-            min: { stroke: "#FF530D", strokeWidth: 2 },
-            max: { stroke: "#2bbee0", strokeWidth: 2 },
-            q1: {
-              fill: "#FF530D",
-              fillOpacity: ({ datum }) => (datum.q1 < 10 ? 1 : 0.5),
-            },
-            q3: {
-              fill: "#2bbee0",
-              fillOpacity: ({ datum }) => (datum.q3 > 15 ? 1 : 0.5),
-            },
-            median: { stroke: "#fff", strokeWidth: 2 },
-            minLabels: { fill: "#FF530D", padding: 10 },
-            maxLabels: { fill: "#2bbee0", padding: 10 },
-          }}
-          {...props}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getBoxPlotData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const Style: Story = {
+  args: {
+    data: getBoxPlotData(4),
+    domainPadding: 20,
+    labels: true,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          style={{
+            min: { stroke: "#FF530D", strokeWidth: 2 },
+            max: { stroke: "#2bbee0", strokeWidth: 2 },
+            q1: { fill: "#FF530D", fillOpacity: 0.5 },
+            q3: { fill: "#2bbee0", fillOpacity: 0.5 },
+            median: { stroke: "#fff", strokeWidth: 2 },
+            minLabels: { fill: "#FF530D", padding: 10 },
+            maxLabels: { fill: "#2bbee0", padding: 10 },
+          }}
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot
+          style={{
+            min: { stroke: "#FF530D", strokeWidth: 2 },
+            max: { stroke: "#2bbee0", strokeWidth: 2 },
+            q1: {
+              fill: "#FF530D",
+              fillOpacity: ({ datum }) => (datum.q1 < 10 ? 1 : 0.5),
+            },
+            q3: {
+              fill: "#2bbee0",
+              fillOpacity: ({ datum }) => (datum.q3 > 15 ? 1 : 0.5),
+            },
+            median: { stroke: "#fff", strokeWidth: 2 },
+            minLabels: { fill: "#FF530D", padding: 10 },
+            maxLabels: { fill: "#2bbee0", padding: 10 },
+          }}
+          {...props}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-box-plot/tooltips.stories.tsx b/stories/victory-charts/victory-box-plot/tooltips.stories.tsx
index 8f11fe984..77b264a98 100644
--- a/stories/victory-charts/victory-box-plot/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-box-plot/tooltips.stories.tsx
@@ -1,59 +1,59 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBoxPlot,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getBoxPlotData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryBoxPlot> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryBoxPlot",
-};
-
-export const Tooltips: Story = {
-  args: {
-    data: getBoxPlotData(3),
-    domainPadding: 20,
-    labels: true,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot
-          minLabelComponent={<VictoryTooltip active />}
-          q3LabelComponent={<VictoryTooltip active />}
-          labelOrientation={{
-            q1: "left",
-            q3: "left",
-            min: "right",
-            max: "right",
-            median: "right",
-          }}
-          {...props}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot
-          minLabelComponent={<VictoryTooltip active />}
-          q3LabelComponent={<VictoryTooltip active />}
-          labelOrientation={{
-            q1: "top",
-            q3: "top",
-            min: "bottom",
-            max: "bottom",
-            median: "bottom",
-          }}
-          {...props}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBoxPlot,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getBoxPlotData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryBoxPlot> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryBoxPlot",
+};
+
+export const Tooltips: Story = {
+  args: {
+    data: getBoxPlotData(3),
+    domainPadding: 20,
+    labels: true,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot
+          minLabelComponent={<VictoryTooltip active />}
+          q3LabelComponent={<VictoryTooltip active />}
+          labelOrientation={{
+            q1: "left",
+            q3: "left",
+            min: "right",
+            max: "right",
+            median: "right",
+          }}
+          {...props}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot
+          minLabelComponent={<VictoryTooltip active />}
+          q3LabelComponent={<VictoryTooltip active />}
+          labelOrientation={{
+            q1: "top",
+            q3: "top",
+            min: "bottom",
+            max: "bottom",
+            median: "bottom",
+          }}
+          {...props}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-candlestick/data.stories.tsx b/stories/victory-charts/victory-candlestick/data.stories.tsx
index 00dfa4f56..2a41f3dfc 100644
--- a/stories/victory-charts/victory-candlestick/data.stories.tsx
+++ b/stories/victory-charts/victory-candlestick/data.stories.tsx
@@ -1,64 +1,64 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryCandlestick> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryCandlestick",
-};
-
-export const Data: Story = {
-  args: {
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { series: 1, start: 9, close: 30, big: 560, low: 7 },
-            { series: 2, start: 80, close: 40, big: 1200, low: 10 },
-            { series: 3, start: 50, close: 80, big: 900, low: 20 },
-            { series: 4, start: 70, close: 22, big: 700, low: 5 },
-            { series: 5, start: 20, close: 35, big: 500, low: 10 },
-          ]}
-          x="series"
-          open="start"
-          high={(data: any) => data.big /10 }
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { series: 1, start: 9, close: 30, big: 560, low: 7 },
-            { series: 2, start: 80, close: 40, big: 1200, low: 10 },
-            { series: 3, start: 50, close: 80, big: 900, low: 20 },
-            { series: 4, start: 70, close: 22, big: 700, low: 5 },
-            { series: 5, start: 20, close: 35, big: 500, low: 10 },
-          ]}
-          x="series"
-          open="start"
-          high={(data: any) => data.big / 10}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { x: 1, open: 9, close: 30, high: 56, low: 7 },
-            { x: 2, open: 80, close: 40, high: 120, low: 10 },
-            { x: 3, open: 50, close: 80, high: 90, low: 20 },
-            { x: 4, open: 70, close: 22, high: 70, low: 5 },
-            { x: 5, open: 20, close: 35, high: 50, low: 10 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryCandlestick> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryCandlestick",
+};
+
+export const Data: Story = {
+  args: {
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { series: 1, start: 9, close: 30, big: 560, low: 7 },
+            { series: 2, start: 80, close: 40, big: 1200, low: 10 },
+            { series: 3, start: 50, close: 80, big: 900, low: 20 },
+            { series: 4, start: 70, close: 22, big: 700, low: 5 },
+            { series: 5, start: 20, close: 35, big: 500, low: 10 },
+          ]}
+          x="series"
+          open="start"
+          high={(data: any) => data.big / 10}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { series: 1, start: 9, close: 30, big: 560, low: 7 },
+            { series: 2, start: 80, close: 40, big: 1200, low: 10 },
+            { series: 3, start: 50, close: 80, big: 900, low: 20 },
+            { series: 4, start: 70, close: 22, big: 700, low: 5 },
+            { series: 5, start: 20, close: 35, big: 500, low: 10 },
+          ]}
+          x="series"
+          open="start"
+          high={(data: any) => data.big / 10}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { x: 1, open: 9, close: 30, high: 56, low: 7 },
+            { x: 2, open: 80, close: 40, high: 120, low: 10 },
+            { x: 3, open: 50, close: 80, high: 90, low: 20 },
+            { x: 4, open: 70, close: 22, high: 70, low: 5 },
+            { x: 5, open: 20, close: 35, high: 50, low: 10 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-candlestick/domain.stories.tsx b/stories/victory-charts/victory-candlestick/domain.stories.tsx
index ce7109bff..2857c4a32 100644
--- a/stories/victory-charts/victory-candlestick/domain.stories.tsx
+++ b/stories/victory-charts/victory-candlestick/domain.stories.tsx
@@ -1,81 +1,81 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryCandlestick> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryCandlestick",
-};
-
-export const Domain: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryCandlestick
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={{ x: [2, 5], y: [50, 150] }}
-        domainPadding={25}
-        data={[
-          { x: 1, open: 9, close: 30, high: 56, low: 7 },
-          { x: 2, open: 80, close: 40, high: 120, low: 10 },
-          { x: 3, open: 50, close: 80, high: 90, low: 20 },
-          { x: 4, open: 70, close: 22, high: 70, low: 5 },
-          { x: 5, open: 20, close: 35, high: 50, low: 10 },
-        ]}
-      />
-      <VictoryChart
-        domain={{ x: [2, 5], y: [50, 150] }}
-        domainPadding={25}
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { x: 1, open: 9, close: 30, high: 56, low: 7 },
-            { x: 2, open: 80, close: 40, high: 120, low: 10 },
-            { x: 3, open: 50, close: 80, high: 90, low: 20 },
-            { x: 4, open: 70, close: 22, high: 70, low: 5 },
-            { x: 5, open: 20, close: 35, high: 50, low: 10 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={25}
-        minDomain={{ y: 70 }}
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { x: 1, open: 9, close: 30, high: 56, low: 7 },
-            { x: 2, open: 80, close: 40, high: 120, low: 10 },
-            { x: 3, open: 50, close: 80, high: 90, low: 20 },
-            { x: 4, open: 70, close: 22, high: 70, low: 5 },
-            { x: 5, open: 20, close: 35, high: 50, low: 10 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={25}
-        maxDomain={{ x: 4 }}
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryCandlestick
-          {...props}
-          data={[
-            { x: 1, open: 9, close: 30, high: 56, low: 7 },
-            { x: 2, open: 80, close: 40, high: 120, low: 10 },
-            { x: 3, open: 50, close: 80, high: 90, low: 20 },
-            { x: 4, open: 70, close: 22, high: 70, low: 5 },
-            { x: 5, open: 20, close: 35, high: 50, low: 10 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryCandlestick> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryCandlestick",
+};
+
+export const Domain: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryCandlestick
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={{ x: [2, 5], y: [50, 150] }}
+        domainPadding={25}
+        data={[
+          { x: 1, open: 9, close: 30, high: 56, low: 7 },
+          { x: 2, open: 80, close: 40, high: 120, low: 10 },
+          { x: 3, open: 50, close: 80, high: 90, low: 20 },
+          { x: 4, open: 70, close: 22, high: 70, low: 5 },
+          { x: 5, open: 20, close: 35, high: 50, low: 10 },
+        ]}
+      />
+      <VictoryChart
+        domain={{ x: [2, 5], y: [50, 150] }}
+        domainPadding={25}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { x: 1, open: 9, close: 30, high: 56, low: 7 },
+            { x: 2, open: 80, close: 40, high: 120, low: 10 },
+            { x: 3, open: 50, close: 80, high: 90, low: 20 },
+            { x: 4, open: 70, close: 22, high: 70, low: 5 },
+            { x: 5, open: 20, close: 35, high: 50, low: 10 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={25}
+        minDomain={{ y: 70 }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { x: 1, open: 9, close: 30, high: 56, low: 7 },
+            { x: 2, open: 80, close: 40, high: 120, low: 10 },
+            { x: 3, open: 50, close: 80, high: 90, low: 20 },
+            { x: 4, open: 70, close: 22, high: 70, low: 5 },
+            { x: 5, open: 20, close: 35, high: 50, low: 10 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={25}
+        maxDomain={{ x: 4 }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryCandlestick
+          {...props}
+          data={[
+            { x: 1, open: 9, close: 30, high: 56, low: 7 },
+            { x: 2, open: 80, close: 40, high: 120, low: 10 },
+            { x: 3, open: 50, close: 80, high: 90, low: 20 },
+            { x: 4, open: 70, close: 22, high: 70, low: 5 },
+            { x: 5, open: 20, close: 35, high: 50, low: 10 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-candlestick/labels.stories.tsx b/stories/victory-charts/victory-candlestick/labels.stories.tsx
index 2b030cf80..af976e34a 100644
--- a/stories/victory-charts/victory-candlestick/labels.stories.tsx
+++ b/stories/victory-charts/victory-candlestick/labels.stories.tsx
@@ -1,78 +1,78 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getCandlestickData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryCandlestick> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryCandlestick",
-};
-
-const sampleData = [
-  { x: 1, open: 9, close: 30, high: 56, low: 7 },
-  { x: 2, open: 80, close: 40, high: 120, low: 10 },
-  { x: 3, open: 50, close: 80, high: 90, low: 20 },
-  { x: 4, open: 70, close: 22, high: 70, low: 5 },
-];
-
-export const Labels: Story = {
-  args: {
-    domainPadding: 20,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={getCandlestickData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryCandlestick
-          {...props}
-          data={getCandlestickData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          openLabels={({ datum }) => datum.open}
-          closeLabels={({ datum }) => datum.close}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          openLabels={({ datum }) => datum.open}
-          closeLabels={({ datum }) => datum.close}
-          labelOrientation={{ open: "top", close: "bottom" }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          highLabels={({ datum }) => datum.high}
-          lowLabels={({ datum }) => datum.low}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          highLabels={({ datum }) => datum.high}
-          lowLabels={({ datum }) => datum.low}
-          labelOrientation={{ low: "left", high: "right" }}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getCandlestickData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryCandlestick> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryCandlestick",
+};
+
+const sampleData = [
+  { x: 1, open: 9, close: 30, high: 56, low: 7 },
+  { x: 2, open: 80, close: 40, high: 120, low: 10 },
+  { x: 3, open: 50, close: 80, high: 90, low: 20 },
+  { x: 4, open: 70, close: 22, high: 70, low: 5 },
+];
+
+export const Labels: Story = {
+  args: {
+    domainPadding: 20,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={getCandlestickData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryCandlestick
+          {...props}
+          data={getCandlestickData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+          labelOrientation={{ open: "top", close: "bottom" }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          highLabels={({ datum }) => datum.high}
+          lowLabels={({ datum }) => datum.low}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          highLabels={({ datum }) => datum.high}
+          lowLabels={({ datum }) => datum.low}
+          labelOrientation={{ low: "left", high: "right" }}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-candlestick/style.stories.tsx b/stories/victory-charts/victory-candlestick/style.stories.tsx
index 88ab9351d..ed5e67c43 100644
--- a/stories/victory-charts/victory-candlestick/style.stories.tsx
+++ b/stories/victory-charts/victory-candlestick/style.stories.tsx
@@ -1,50 +1,50 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getCandlestickData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryCandlestick> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryCandlestick",
-};
-
-export const Style: Story = {
-  args: {
-    data: getCandlestickData(7),
-  },
-  render: (props) => (
-    <>
-      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          labels={({ datum }) => datum.x}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: {
-              fill: "tomato",
-              fillOpacity: 0.7,
-              stroke: "tomato",
-              strokeWidth: 2,
-            },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          style={{
-            data: {
-              stroke: ({ datum }) =>
-                datum.open > datum.close ? "red" : "black",
-            },
-          }}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getCandlestickData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryCandlestick> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryCandlestick",
+};
+
+export const Style: Story = {
+  args: {
+    data: getCandlestickData(7),
+  },
+  render: (props) => (
+    <>
+      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          labels={({ datum }) => datum.x}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: {
+              fill: "tomato",
+              fillOpacity: 0.7,
+              stroke: "tomato",
+              strokeWidth: 2,
+            },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          style={{
+            data: {
+              stroke: ({ datum }) =>
+                datum.open > datum.close ? "red" : "black",
+            },
+          }}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-candlestick/tooltips.stories.tsx b/stories/victory-charts/victory-candlestick/tooltips.stories.tsx
index 68574ea8a..73b3ac354 100644
--- a/stories/victory-charts/victory-candlestick/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-candlestick/tooltips.stories.tsx
@@ -1,103 +1,103 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryCandlestick,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getCandlestickData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryCandlestick> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryCandlestick",
-};
-
-const sampleData = [
-  { x: 1, open: 9, close: 30, high: 56, low: 7 },
-  { x: 2, open: 80, close: 40, high: 120, low: 10 },
-  { x: 3, open: 50, close: 80, high: 90, low: 20 },
-  { x: 4, open: 70, close: 22, high: 70, low: 5 },
-];
-
-export const Tooltips: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={getCandlestickData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={20}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-      >
-        <VictoryCandlestick
-          {...props}
-          data={getCandlestickData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={20}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-      >
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          openLabels={({ datum }) => datum.open}
-          closeLabels={({ datum }) => datum.close}
-          openLabelComponent={<VictoryTooltip active />}
-          closeLabelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={20}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-      >
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          openLabels={({ datum }) => datum.open}
-          closeLabels={({ datum }) => datum.close}
-          openLabelComponent={<VictoryTooltip active />}
-          closeLabelComponent={<VictoryTooltip active />}
-          labelOrientation={{ open: "top", close: "bottom" }}
-        />
-      </VictoryChart>
-      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          highLabels={({ datum }) => datum.high}
-          lowLabels={({ datum }) => datum.low}
-          highLabelComponent={<VictoryTooltip active />}
-          lowLabelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
-        <VictoryCandlestick
-          {...props}
-          data={sampleData}
-          highLabels={({ datum }) => datum.high}
-          lowLabels={({ datum }) => datum.low}
-          highLabelComponent={<VictoryTooltip active />}
-          lowLabelComponent={<VictoryTooltip active />}
-          labelOrientation={{ low: "left", high: "right" }}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryCandlestick,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getCandlestickData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryCandlestick> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryCandlestick",
+};
+
+const sampleData = [
+  { x: 1, open: 9, close: 30, high: 56, low: 7 },
+  { x: 2, open: 80, close: 40, high: 120, low: 10 },
+  { x: 3, open: 50, close: 80, high: 90, low: 20 },
+  { x: 4, open: 70, close: 22, high: 70, low: 5 },
+];
+
+export const Tooltips: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={getCandlestickData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={20}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+      >
+        <VictoryCandlestick
+          {...props}
+          data={getCandlestickData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={20}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+      >
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+          openLabelComponent={<VictoryTooltip active />}
+          closeLabelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={20}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+      >
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+          openLabelComponent={<VictoryTooltip active />}
+          closeLabelComponent={<VictoryTooltip active />}
+          labelOrientation={{ open: "top", close: "bottom" }}
+        />
+      </VictoryChart>
+      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          highLabels={({ datum }) => datum.high}
+          lowLabels={({ datum }) => datum.low}
+          highLabelComponent={<VictoryTooltip active />}
+          lowLabelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart domainPadding={20} theme={VictoryTheme[props.themeKey]}>
+        <VictoryCandlestick
+          {...props}
+          data={sampleData}
+          highLabels={({ datum }) => datum.high}
+          lowLabels={({ datum }) => datum.low}
+          highLabelComponent={<VictoryTooltip active />}
+          lowLabelComponent={<VictoryTooltip active />}
+          labelOrientation={{ low: "left", high: "right" }}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/domain-from-data.stories.tsx b/stories/victory-charts/victory-chart/domain-from-data.stories.tsx
index b34ffc349..308faa652 100644
--- a/stories/victory-charts/victory-chart/domain-from-data.stories.tsx
+++ b/stories/victory-charts/victory-chart/domain-from-data.stories.tsx
@@ -1,119 +1,119 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryAxis,
-  VictoryBoxPlot,
-  VictoryChart,
-  VictoryLine,
-  VictoryScatter,
-  VictoryTheme,
-} from "@/victory";
-
-import { getArrayData, getData, getFourQuadrantData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const DomainFromData: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter size={5} symbol="plus" data={getData(10)} />
-        <VictoryScatter
-          size={5}
-          symbol="triangleUp"
-          data={getFourQuadrantData(10)}
-        />
-        <VictoryLine
-          samples={100}
-          y={(d) => 10 * Math.sin(13 * Math.PI * d.x)}
-        />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryScatter size={5} symbol="plus" data={getData(10)} />
-        <VictoryScatter
-          size={5}
-          symbol="triangleUp"
-          data={getFourQuadrantData(10)}
-        />
-        <VictoryLine
-          samples={100}
-          y={(d) => 10 * Math.sin(13 * Math.PI * d.x)}
-        />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis tickValues={[-10, -5, 5, 10]} />
-        <VictoryAxis dependentAxis tickValues={[-5, 5]} />
-        <VictoryScatter data={getData(10)} />
-        <VictoryLine samples={150} y={(d) => Math.sin(Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryAxis tickValues={[-10, -5, 5, 10]} />
-        <VictoryAxis dependentAxis tickValues={[-5, 5]} />
-        <VictoryScatter data={getData(10)} />
-        <VictoryLine samples={150} y={(d) => Math.sin(Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          size={6}
-          symbol="star"
-          data={[
-            { x: "cat", y: 2 },
-            { x: "dog", y: 3 },
-            { x: "bird", y: 1 },
-            { x: "frog", y: 4 },
-          ]}
-        />
-        <VictoryScatter
-          size={6}
-          symbol="square"
-          data={[
-            { x: "cat", y: 3 },
-            { x: "mouse", y: 3 },
-            { x: "bird", y: 5 },
-            { x: "frog", y: 7 },
-            { x: "dog", y: 1 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryScatter
-          size={6}
-          symbol="star"
-          data={[
-            { x: "cat", y: 2 },
-            { x: "dog", y: 3 },
-            { x: "bird", y: 1 },
-            { x: "frog", y: 4 },
-          ]}
-        />
-        <VictoryScatter
-          size={6}
-          symbol="square"
-          data={[
-            { x: "cat", y: 3 },
-            { x: "mouse", y: 3 },
-            { x: "bird", y: 5 },
-            { x: "frog", y: 7 },
-            { x: "dog", y: 1 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
-        <VictoryBoxPlot data={getArrayData(5)} />
-        <VictoryLine samples={100} y={(d) => 5 + 3 * Math.sin(Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryBoxPlot data={getArrayData(5)} />
-        <VictoryLine samples={100} y={(d) => 5 + 3 * Math.sin(Math.PI * d.x)} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryAxis,
+  VictoryBoxPlot,
+  VictoryChart,
+  VictoryLine,
+  VictoryScatter,
+  VictoryTheme,
+} from "@/victory";
+
+import { getArrayData, getData, getFourQuadrantData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const DomainFromData: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter size={5} symbol="plus" data={getData(10)} />
+        <VictoryScatter
+          size={5}
+          symbol="triangleUp"
+          data={getFourQuadrantData(10)}
+        />
+        <VictoryLine
+          samples={100}
+          y={(d) => 10 * Math.sin(13 * Math.PI * d.x)}
+        />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryScatter size={5} symbol="plus" data={getData(10)} />
+        <VictoryScatter
+          size={5}
+          symbol="triangleUp"
+          data={getFourQuadrantData(10)}
+        />
+        <VictoryLine
+          samples={100}
+          y={(d) => 10 * Math.sin(13 * Math.PI * d.x)}
+        />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis tickValues={[-10, -5, 5, 10]} />
+        <VictoryAxis dependentAxis tickValues={[-5, 5]} />
+        <VictoryScatter data={getData(10)} />
+        <VictoryLine samples={150} y={(d) => Math.sin(Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryAxis tickValues={[-10, -5, 5, 10]} />
+        <VictoryAxis dependentAxis tickValues={[-5, 5]} />
+        <VictoryScatter data={getData(10)} />
+        <VictoryLine samples={150} y={(d) => Math.sin(Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          size={6}
+          symbol="star"
+          data={[
+            { x: "cat", y: 2 },
+            { x: "dog", y: 3 },
+            { x: "bird", y: 1 },
+            { x: "frog", y: 4 },
+          ]}
+        />
+        <VictoryScatter
+          size={6}
+          symbol="square"
+          data={[
+            { x: "cat", y: 3 },
+            { x: "mouse", y: 3 },
+            { x: "bird", y: 5 },
+            { x: "frog", y: 7 },
+            { x: "dog", y: 1 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryScatter
+          size={6}
+          symbol="star"
+          data={[
+            { x: "cat", y: 2 },
+            { x: "dog", y: 3 },
+            { x: "bird", y: 1 },
+            { x: "frog", y: 4 },
+          ]}
+        />
+        <VictoryScatter
+          size={6}
+          symbol="square"
+          data={[
+            { x: "cat", y: 3 },
+            { x: "mouse", y: 3 },
+            { x: "bird", y: 5 },
+            { x: "frog", y: 7 },
+            { x: "dog", y: 1 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]}>
+        <VictoryBoxPlot data={getArrayData(5)} />
+        <VictoryLine samples={100} y={(d) => 5 + 3 * Math.sin(Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart {...props} theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryBoxPlot data={getArrayData(5)} />
+        <VictoryLine samples={100} y={(d) => 5 + 3 * Math.sin(Math.PI * d.x)} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/domain-padding.stories.tsx b/stories/victory-charts/victory-chart/domain-padding.stories.tsx
index 8c1b8fb0d..f122a20e5 100644
--- a/stories/victory-charts/victory-chart/domain-padding.stories.tsx
+++ b/stories/victory-charts/victory-chart/domain-padding.stories.tsx
@@ -1,69 +1,69 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const DomainPadding: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={25}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domainPadding={25}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={{ x: [25, 0], y: 25 }}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domainPadding={{ x: [25, 0], y: 25 }}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={{ x: 100 }}
-        singleQuadrantDomainPadding={false}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domainPadding={{ x: 100 }}
-        singleQuadrantDomainPadding={false}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const DomainPadding: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={25}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domainPadding={25}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ x: [25, 0], y: 25 }}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domainPadding={{ x: [25, 0], y: 25 }}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ x: 100 }}
+        singleQuadrantDomainPadding={false}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domainPadding={{ x: 100 }}
+        singleQuadrantDomainPadding={false}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/domain.stories.tsx b/stories/victory-charts/victory-chart/domain.stories.tsx
index 4ab58e8b8..b80942c21 100644
--- a/stories/victory-charts/victory-chart/domain.stories.tsx
+++ b/stories/victory-charts/victory-chart/domain.stories.tsx
@@ -1,86 +1,86 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryBar, VictoryChart, VictoryLine, VictoryTheme } from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const Domain: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[0, 10]}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domain={[0, 10]}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={{ x: [0, 6], y: [0, 10] }}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domain={{ x: [0, 6], y: [0, 10] }}
-      >
-        <VictoryBar data={getData(5)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        minDomain={1}
-        maxDomain={7}
-      >
-        <VictoryLine data={getData(100)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        minDomain={1}
-        maxDomain={7}
-      >
-        <VictoryLine data={getData(100)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        minDomain={{ x: 50 }}
-        maxDomain={{ y: 7 }}
-      >
-        <VictoryLine data={getData(100)} />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        minDomain={{ x: 50 }}
-        maxDomain={{ y: 7 }}
-      >
-        <VictoryLine data={getData(100)} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryBar, VictoryChart, VictoryLine, VictoryTheme } from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const Domain: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[0, 10]}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domain={[0, 10]}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={{ x: [0, 6], y: [0, 10] }}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domain={{ x: [0, 6], y: [0, 10] }}
+      >
+        <VictoryBar data={getData(5)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        minDomain={1}
+        maxDomain={7}
+      >
+        <VictoryLine data={getData(100)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        minDomain={1}
+        maxDomain={7}
+      >
+        <VictoryLine data={getData(100)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        minDomain={{ x: 50 }}
+        maxDomain={{ y: 7 }}
+      >
+        <VictoryLine data={getData(100)} />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        minDomain={{ x: 50 }}
+        maxDomain={{ y: 7 }}
+      >
+        <VictoryLine data={getData(100)} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/orientations.stories.tsx b/stories/victory-charts/victory-chart/orientations.stories.tsx
index 883e92b81..e2d062a27 100644
--- a/stories/victory-charts/victory-chart/orientations.stories.tsx
+++ b/stories/victory-charts/victory-chart/orientations.stories.tsx
@@ -1,46 +1,46 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryAxis, VictoryBar, VictoryChart } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const Orientations: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        {...props}
-        padding={{ left: 20, right: 30, top: 15, bottom: 40 }}
-      >
-        <VictoryAxis tickValues={[1, 2, 3, 4, 5]} />
-        <VictoryAxis
-          orientation="left"
-          dependentAxis
-          tickValues={[1, 2, 3, 4, 5, 6, 7, 8]}
-        />
-        <VictoryAxis
-          orientation="right"
-          dependentAxis
-          tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
-        />
-        <VictoryBar
-          style={{ data: { fill: "#c43a31" } }}
-          data={[
-            { x: 1, y: 1 },
-            { x: 2, y: 7 },
-            { x: 3, y: 4 },
-            { x: 4, y: 5 },
-            { x: 5, y: 2 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryAxis, VictoryBar, VictoryChart } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const Orientations: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        {...props}
+        padding={{ left: 20, right: 30, top: 15, bottom: 40 }}
+      >
+        <VictoryAxis tickValues={[1, 2, 3, 4, 5]} />
+        <VictoryAxis
+          orientation="left"
+          dependentAxis
+          tickValues={[1, 2, 3, 4, 5, 6, 7, 8]}
+        />
+        <VictoryAxis
+          orientation="right"
+          dependentAxis
+          tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
+        />
+        <VictoryBar
+          style={{ data: { fill: "#c43a31" } }}
+          data={[
+            { x: 1, y: 1 },
+            { x: 2, y: 7 },
+            { x: 3, y: 4 },
+            { x: 4, y: 5 },
+            { x: 5, y: 2 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/style.stories.tsx b/stories/victory-charts/victory-chart/style.stories.tsx
index 41dff9d63..696d255f8 100644
--- a/stories/victory-charts/victory-chart/style.stories.tsx
+++ b/stories/victory-charts/victory-chart/style.stories.tsx
@@ -1,238 +1,238 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryChart,
-  VictoryGroup,
-  VictoryPolarAxis,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const Style: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-        }}
-      />
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        polar
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-        }}
-      >
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      />
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        polar
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      >
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      >
-        <VictoryGroup
-          labels={["a", "b", "c"]}
-          offset={20}
-          colorScale={"qualitative"}
-        >
-          <VictoryBar
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 5 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 1 },
-              { x: 3, y: 7 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 4 },
-              { x: 3, y: 9 },
-            ]}
-          />
-        </VictoryGroup>
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        polar
-        domainPadding={{ y: 30 }}
-        innerRadius={30}
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      >
-        <VictoryGroup
-          labels={["a", "b", "c"]}
-          offset={20}
-          colorScale={"qualitative"}
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryBar
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 5 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 1 },
-              { x: 3, y: 7 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 4 },
-              { x: 3, y: 9 },
-            ]}
-          />
-        </VictoryGroup>
-        <VictoryPolarAxis />
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={{ x: 17 }}
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      >
-        <VictoryStack labels={["a", "b", "c"]} colorScale={"qualitative"}>
-          <VictoryBar
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 5 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 1 },
-              { x: 3, y: 7 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 4 },
-              { x: 3, y: 9 },
-            ]}
-          />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        polar
-        domainPadding={{ y: 30 }}
-        style={{
-          parent: {
-            border: "5px solid #000",
-            backgroundColor: "cyan",
-          },
-          background: { fill: "pink" },
-        }}
-      >
-        <VictoryStack
-          labels={["a", "b", "c"]}
-          colorScale={"qualitative"}
-          style={{ data: { width: 15 } }}
-        >
-          <VictoryBar
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 5 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 1 },
-              { x: 3, y: 7 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 4 },
-              { x: 3, y: 9 },
-            ]}
-          />
-        </VictoryStack>
-        <VictoryPolarAxis />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryChart,
+  VictoryGroup,
+  VictoryPolarAxis,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const Style: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+        }}
+      />
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        polar
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+        }}
+      >
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      />
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        polar
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      >
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      >
+        <VictoryGroup
+          labels={["a", "b", "c"]}
+          offset={20}
+          colorScale={"qualitative"}
+        >
+          <VictoryBar
+            data={[
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 5 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 2 },
+              { x: 2, y: 1 },
+              { x: 3, y: 7 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 3 },
+              { x: 2, y: 4 },
+              { x: 3, y: 9 },
+            ]}
+          />
+        </VictoryGroup>
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        polar
+        domainPadding={{ y: 30 }}
+        innerRadius={30}
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      >
+        <VictoryGroup
+          labels={["a", "b", "c"]}
+          offset={20}
+          colorScale={"qualitative"}
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryBar
+            data={[
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 5 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 2 },
+              { x: 2, y: 1 },
+              { x: 3, y: 7 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 3 },
+              { x: 2, y: 4 },
+              { x: 3, y: 9 },
+            ]}
+          />
+        </VictoryGroup>
+        <VictoryPolarAxis />
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ x: 17 }}
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      >
+        <VictoryStack labels={["a", "b", "c"]} colorScale={"qualitative"}>
+          <VictoryBar
+            data={[
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 5 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 2 },
+              { x: 2, y: 1 },
+              { x: 3, y: 7 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 3 },
+              { x: 2, y: 4 },
+              { x: 3, y: 9 },
+            ]}
+          />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        polar
+        domainPadding={{ y: 30 }}
+        style={{
+          parent: {
+            border: "5px solid #000",
+            backgroundColor: "cyan",
+          },
+          background: { fill: "pink" },
+        }}
+      >
+        <VictoryStack
+          labels={["a", "b", "c"]}
+          colorScale={"qualitative"}
+          style={{ data: { width: 15 } }}
+        >
+          <VictoryBar
+            data={[
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 5 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 2 },
+              { x: 2, y: 1 },
+              { x: 3, y: 7 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 3 },
+              { x: 2, y: 4 },
+              { x: 3, y: 9 },
+            ]}
+          />
+        </VictoryStack>
+        <VictoryPolarAxis />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx b/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx
index f0daabc86..c264713a2 100644
--- a/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx
+++ b/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx
@@ -1,52 +1,52 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryChart,
-  VictoryLine,
-  VictoryZoomContainer,
-  VictoryTheme,
-} from "@/victory";
-
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryChart> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryChart",
-};
-
-export const VictoryZoomContainerDefault: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        scale={{ x: "time" }}
-        containerComponent={
-          <VictoryZoomContainer
-            zoomDomain={{ x: [new Date(1993, 1, 1), new Date(2005, 1, 1)] }}
-          />
-        }
-      >
-        <VictoryLine
-          style={{
-            data: { stroke: "red", strokeWidth: 5 },
-          }}
-          data={[
-            { x: new Date(1982, 1, 1), y: 125 },
-            { x: new Date(1987, 1, 1), y: 257 },
-            { x: new Date(1993, 1, 1), y: 345 },
-            { x: new Date(1997, 1, 1), y: 515 },
-            { x: new Date(2001, 1, 1), y: 132 },
-            { x: new Date(2005, 1, 1), y: 305 },
-            { x: new Date(2011, 1, 1), y: 270 },
-            { x: new Date(2015, 1, 1), y: 470 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryChart,
+  VictoryLine,
+  VictoryZoomContainer,
+  VictoryTheme,
+} from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryChart> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryChart",
+};
+
+export const VictoryZoomContainerDefault: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        scale={{ x: "time" }}
+        containerComponent={
+          <VictoryZoomContainer
+            zoomDomain={{ x: [new Date(1993, 1, 1), new Date(2005, 1, 1)] }}
+          />
+        }
+      >
+        <VictoryLine
+          style={{
+            data: { stroke: "red", strokeWidth: 5 },
+          }}
+          data={[
+            { x: new Date(1982, 1, 1), y: 125 },
+            { x: new Date(1987, 1, 1), y: 257 },
+            { x: new Date(1993, 1, 1), y: 345 },
+            { x: new Date(1997, 1, 1), y: 515 },
+            { x: new Date(2001, 1, 1), y: 132 },
+            { x: new Date(2005, 1, 1), y: 305 },
+            { x: new Date(2011, 1, 1), y: 270 },
+            { x: new Date(2015, 1, 1), y: 470 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx b/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx
index 46a10d356..4e34cdce5 100644
--- a/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx
+++ b/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx
@@ -1,69 +1,69 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryContainer,
-  VictoryChart,
-  VictoryLabel,
-  VictoryLine,
-  VictoryTheme,
-} from "@/victory";
-
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryContainer> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryContainer",
-};
-
-export const PreserveAspectRatio: Story = {
-  args: {
-    height: 250,
-    width: 500,
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine />
-        <VictoryLabel x={50} y={20} text="default (undefined)" />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        containerComponent={
-          <VictoryContainer {...props} preserveAspectRatio="none" />
-        }
-      >
-        <VictoryLine />
-        <VictoryLabel x={50} y={20} text={`preserveAspectRatio="none"`} />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        containerComponent={
-          <VictoryContainer {...props} preserveAspectRatio="xMinYMin meet" />
-        }
-      >
-        <VictoryLine />
-        <VictoryLabel
-          x={50}
-          y={20}
-          text={`preserveAspectRatio="xMinYMin meet"`}
-        />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        containerComponent={
-          <VictoryContainer {...props} preserveAspectRatio="xMinYMin slice" />
-        }
-      >
-        <VictoryLine />
-        <VictoryLabel
-          x={50}
-          y={20}
-          text={`preserveAspectRatio="xMinYMin slice"`}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryContainer,
+  VictoryChart,
+  VictoryLabel,
+  VictoryLine,
+  VictoryTheme,
+} from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryContainer> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryContainer",
+};
+
+export const PreserveAspectRatio: Story = {
+  args: {
+    height: 250,
+    width: 500,
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine />
+        <VictoryLabel x={50} y={20} text="default (undefined)" />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        containerComponent={
+          <VictoryContainer {...props} preserveAspectRatio="none" />
+        }
+      >
+        <VictoryLine />
+        <VictoryLabel x={50} y={20} text={`preserveAspectRatio="none"`} />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        containerComponent={
+          <VictoryContainer {...props} preserveAspectRatio="xMinYMin meet" />
+        }
+      >
+        <VictoryLine />
+        <VictoryLabel
+          x={50}
+          y={20}
+          text={`preserveAspectRatio="xMinYMin meet"`}
+        />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        containerComponent={
+          <VictoryContainer {...props} preserveAspectRatio="xMinYMin slice" />
+        }
+      >
+        <VictoryLine />
+        <VictoryLabel
+          x={50}
+          y={20}
+          text={`preserveAspectRatio="xMinYMin slice"`}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-errorbar/data.stories.tsx b/stories/victory-charts/victory-errorbar/data.stories.tsx
index 99d084d5d..79c2cd6a9 100644
--- a/stories/victory-charts/victory-errorbar/data.stories.tsx
+++ b/stories/victory-charts/victory-errorbar/data.stories.tsx
@@ -1,75 +1,75 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryErrorBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryErrorBar",
-};
-
-export const Data: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
-            { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
-            { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
-            { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
-            { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { series: 1, value: 9, error: 3 },
-            { series: 2, value: 80, error: 4 },
-            { series: 3, value: 50, error: 8 },
-            { series: 4, value: 70, error: 2 },
-            { series: 5, value: 20, error: 3 },
-          ]}
-          x="series"
-          y="value"
-          errorY={(d) => [d.error, d.error + 2]}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { series: 1, value: 9, error: 3 },
-            { series: 2, value: 80, error: 4 },
-            { series: 3, value: 50, error: 8 },
-            { series: 4, value: 70, error: 2 },
-            { series: 5, value: 20, error: 3 },
-          ]}
-          x="series"
-          y="value"
-          errorY={(d) => [d.error, d.error + 2]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, error: 3 },
-            { x: 2, y: 80, error: 4 },
-            { x: 3, y: 50, error: 8 },
-            { x: 4, y: 70, error: 2 },
-            { x: 5, y: 20, error: 3 },
-          ]}
-          errorY={(d) => [d.error, d.error + 2]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryErrorBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryErrorBar",
+};
+
+export const Data: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
+            { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
+            { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
+            { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
+            { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { series: 1, value: 9, error: 3 },
+            { series: 2, value: 80, error: 4 },
+            { series: 3, value: 50, error: 8 },
+            { series: 4, value: 70, error: 2 },
+            { series: 5, value: 20, error: 3 },
+          ]}
+          x="series"
+          y="value"
+          errorY={(d) => [d.error, d.error + 2]}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { series: 1, value: 9, error: 3 },
+            { series: 2, value: 80, error: 4 },
+            { series: 3, value: 50, error: 8 },
+            { series: 4, value: 70, error: 2 },
+            { series: 5, value: 20, error: 3 },
+          ]}
+          x="series"
+          y="value"
+          errorY={(d) => [d.error, d.error + 2]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, error: 3 },
+            { x: 2, y: 80, error: 4 },
+            { x: 3, y: 50, error: 8 },
+            { x: 4, y: 70, error: 2 },
+            { x: 5, y: 20, error: 3 },
+          ]}
+          errorY={(d) => [d.error, d.error + 2]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-errorbar/domain.stories.tsx b/stories/victory-charts/victory-errorbar/domain.stories.tsx
index 40250583f..8be5ed043 100644
--- a/stories/victory-charts/victory-errorbar/domain.stories.tsx
+++ b/stories/victory-charts/victory-errorbar/domain.stories.tsx
@@ -1,70 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryErrorBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryErrorBar",
-};
-
-export const Domain: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryErrorBar
-        {...props}
-        domain={{ x: [2, 5], y: [25, 100] }}
-        data={[
-          { x: 1, y: 9, errorX: 0.3, errorY: 3 },
-          { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-          { x: 3, y: 50, errorX: 1.1, errorY: 2 },
-          { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-          { x: 5, y: 20, errorX: 0.3, errorY: 2 },
-        ]}
-      />
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        domain={{ x: [2, 5], y: [25, 100] }}
-      >
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
-            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
-            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} minDomain={{ x: 3 }}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
-            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
-            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} maxDomain={{ y: 65 }}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
-            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
-            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryErrorBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryErrorBar",
+};
+
+export const Domain: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryErrorBar
+        {...props}
+        domain={{ x: [2, 5], y: [25, 100] }}
+        data={[
+          { x: 1, y: 9, errorX: 0.3, errorY: 3 },
+          { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+          { x: 3, y: 50, errorX: 1.1, errorY: 2 },
+          { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+          { x: 5, y: 20, errorX: 0.3, errorY: 2 },
+        ]}
+      />
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        domain={{ x: [2, 5], y: [25, 100] }}
+      >
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
+            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
+            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} minDomain={{ x: 3 }}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
+            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
+            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} maxDomain={{ y: 65 }}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, errorX: 0.3, errorY: 3 },
+            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+            { x: 3, y: 50, errorX: 1.1, errorY: 2 },
+            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+            { x: 5, y: 20, errorX: 0.3, errorY: 2 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-errorbar/labels.stories.tsx b/stories/victory-charts/victory-errorbar/labels.stories.tsx
index 3f10a455d..d7cd65e39 100644
--- a/stories/victory-charts/victory-errorbar/labels.stories.tsx
+++ b/stories/victory-charts/victory-errorbar/labels.stories.tsx
@@ -1,80 +1,80 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryErrorBar,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getErrorBarData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryErrorBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryErrorBar",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryErrorBar
-          {...props}
-          data={getErrorBarData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryErrorBar
-          {...props}
-          data={getErrorBarData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, errorX: 0.3, errorY: 3, label: "first" },
-            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-            { x: 3, y: 50, errorX: 1.1, errorY: 2, label: "third" },
-            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-            { x: 5, y: 20, errorX: 0.3, errorY: 2, label: ["last", "label"] },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, errorX: 0.3, errorY: 3, label: "first" },
-            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
-            { x: 3, y: 50, errorX: 1.1, errorY: 2, label: "third" },
-            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
-            { x: 5, y: 20, errorX: 0.3, errorY: 2, label: ["last", "label"] },
-          ]}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={[
-            { x: 1, y: 9, error: 3 },
-            { x: 2, y: 80, error: 4 },
-            { x: 3, y: 50, error: 8 },
-            { x: 4, y: 70, error: 2 },
-            { x: 5, y: 20, error: 3 },
-          ]}
-          errorY={(d) => [d.error, d.error + 2]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryErrorBar,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getErrorBarData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryErrorBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryErrorBar",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryErrorBar
+          {...props}
+          data={getErrorBarData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryErrorBar
+          {...props}
+          data={getErrorBarData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, errorX: 0.3, errorY: 3, label: "first" },
+            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+            { x: 3, y: 50, errorX: 1.1, errorY: 2, label: "third" },
+            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+            { x: 5, y: 20, errorX: 0.3, errorY: 2, label: ["last", "label"] },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, errorX: 0.3, errorY: 3, label: "first" },
+            { x: 2, y: 80, errorX: 0.5, errorY: 2 },
+            { x: 3, y: 50, errorX: 1.1, errorY: 2, label: "third" },
+            { x: 4, y: 70, errorX: 0.2, errorY: 3 },
+            { x: 5, y: 20, errorX: 0.3, errorY: 2, label: ["last", "label"] },
+          ]}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={[
+            { x: 1, y: 9, error: 3 },
+            { x: 2, y: 80, error: 4 },
+            { x: 3, y: 50, error: 8 },
+            { x: 4, y: 70, error: 2 },
+            { x: 5, y: 20, error: 3 },
+          ]}
+          errorY={(d) => [d.error, d.error + 2]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-errorbar/style.stories.tsx b/stories/victory-charts/victory-errorbar/style.stories.tsx
index e2db38cee..43fccd8e8 100644
--- a/stories/victory-charts/victory-errorbar/style.stories.tsx
+++ b/stories/victory-charts/victory-errorbar/style.stories.tsx
@@ -1,50 +1,50 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getErrorBarData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryErrorBar> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryErrorBar",
-};
-
-export const Style: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          data={getErrorBarData(4)}
-          labels={({ datum }) => datum.x}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: {
-              fill: "tomato",
-              fillOpacity: 0.7,
-              stroke: "tomato",
-              strokeWidth: 2,
-            },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryErrorBar
-          {...props}
-          style={{
-            data: {
-              stroke: ({ datum }) =>
-                datum.errorX > datum.errorY ? "red" : "black",
-            },
-          }}
-          labels={({ datum }) => datum.x}
-          data={getErrorBarData(4, true)}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getErrorBarData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryErrorBar> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryErrorBar",
+};
+
+export const Style: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          data={getErrorBarData(4)}
+          labels={({ datum }) => datum.x}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: {
+              fill: "tomato",
+              fillOpacity: 0.7,
+              stroke: "tomato",
+              strokeWidth: 2,
+            },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryErrorBar
+          {...props}
+          style={{
+            data: {
+              stroke: ({ datum }) =>
+                datum.errorX > datum.errorY ? "red" : "black",
+            },
+          }}
+          labels={({ datum }) => datum.x}
+          data={getErrorBarData(4, true)}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-errorbar/theme.stories.tsx b/stories/victory-charts/victory-errorbar/theme.stories.tsx
index cadbe1f12..7f03dcd85 100644
--- a/stories/victory-charts/victory-errorbar/theme.stories.tsx
+++ b/stories/victory-charts/victory-errorbar/theme.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof VictoryErrorBar> = {
 
 export const Theme: Story = {
   args: {
-    data: getErrorBarData(5)
+    data: getErrorBarData(5),
   },
   render: (props) => (
     <>
diff --git a/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx b/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx
index 10d67c712..91086afef 100644
--- a/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx
+++ b/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx
@@ -13,21 +13,21 @@ const meta: Meta<typeof VictoryHistogram> = {
 
 export const BinSpacing: Story = {
   args: {
-    data
+    data,
   },
   render: (props) => (
     <>
       <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} binSpacing={10}  />
+        <VictoryHistogram {...props} binSpacing={10} />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} binSpacing={10}  />
+        <VictoryHistogram {...props} binSpacing={10} />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} binSpacing={5}  />
+        <VictoryHistogram {...props} binSpacing={5} />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} binSpacing={5}  />
+        <VictoryHistogram {...props} binSpacing={5} />
       </VictoryChart>
     </>
   ),
diff --git a/stories/victory-charts/victory-histogram/corner-radius.stories.tsx b/stories/victory-charts/victory-histogram/corner-radius.stories.tsx
index d46ad0535..b63a4daa4 100644
--- a/stories/victory-charts/victory-histogram/corner-radius.stories.tsx
+++ b/stories/victory-charts/victory-histogram/corner-radius.stories.tsx
@@ -1,46 +1,48 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const CornerRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} cornerRadius={1}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} cornerRadius={1}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} cornerRadius={10}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} cornerRadius={10}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props}
-          data={data}
-          cornerRadius={{ topLeft: 15, bottomRight: 30 }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props}
-          data={data}
-          cornerRadius={{ topLeft: 15, bottomRight: 22 }}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const CornerRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} cornerRadius={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} cornerRadius={1} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} cornerRadius={10} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} cornerRadius={10} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          cornerRadius={{ topLeft: 15, bottomRight: 30 }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          cornerRadius={{ topLeft: 15, bottomRight: 22 }}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/data.stories.tsx b/stories/victory-charts/victory-histogram/data.stories.tsx
index 69fc1b570..48ddf68e6 100644
--- a/stories/victory-charts/victory-histogram/data.stories.tsx
+++ b/stories/victory-charts/victory-histogram/data.stories.tsx
@@ -1,69 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data, timeData } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const Data: Story = {
-  args: {},
-  render: (props) => {
-    const oneYear = timeData.map(({ x }) => {
-      const newDate = new Date(x);
-      newDate.setFullYear(2020);
-      return { x: newDate };
-    });
-
-    const fourMonths = timeData.map(({ x }, index) => {
-      const newDate = new Date(x);
-      newDate.setFullYear(2020);
-      newDate.setMonth(Math.ceil(index / 200));
-      return { x: newDate };
-    });
-
-    const oneMonth = timeData.map(({ x }) => {
-      const newDate = new Date(x);
-      newDate.setMonth(4);
-      newDate.setFullYear(2020);
-      return { x: newDate };
-    });
-
-    return (
-      <>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props} data={timeData}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props} data={oneYear}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props} data={fourMonths}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props} data={oneMonth}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            data={data.map(({ x }) => ({ value: x }))}
-            x={({ value }) => value}
-          />
-        </VictoryChart>
-        {/* <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            bins="year"
-            data={timeData.map(({ x }) => ({ value: x }))}
-            x={({ value }) => value}
-          />
-        </VictoryChart> */}
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data, timeData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const Data: Story = {
+  args: {},
+  render: (props) => {
+    const oneYear = timeData.map(({ x }) => {
+      const newDate = new Date(x);
+      newDate.setFullYear(2020);
+      return { x: newDate };
+    });
+
+    const fourMonths = timeData.map(({ x }, index) => {
+      const newDate = new Date(x);
+      newDate.setFullYear(2020);
+      newDate.setMonth(Math.ceil(index / 200));
+      return { x: newDate };
+    });
+
+    const oneMonth = timeData.map(({ x }) => {
+      const newDate = new Date(x);
+      newDate.setMonth(4);
+      newDate.setFullYear(2020);
+      return { x: newDate };
+    });
+
+    return (
+      <>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryHistogram {...props} data={timeData} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram {...props} data={oneYear} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram {...props} data={fourMonths} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryHistogram {...props} data={oneMonth} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram
+            {...props}
+            data={data.map(({ x }) => ({ value: x }))}
+            x={({ value }) => value}
+          />
+        </VictoryChart>
+        {/* <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram {...props}
+            bins="year"
+            data={timeData.map(({ x }) => ({ value: x }))}
+            x={({ value }) => value}
+          />
+        </VictoryChart> */}
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/date-bins.stories.tsx b/stories/victory-charts/victory-histogram/date-bins.stories.tsx
index ca24b6512..f3bd62c5e 100644
--- a/stories/victory-charts/victory-histogram/date-bins.stories.tsx
+++ b/stories/victory-charts/victory-histogram/date-bins.stories.tsx
@@ -1,84 +1,89 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-import * as d3Array from "@/victory-vendor/d3-array";
-import * as d3Scale from "@/victory-vendor/d3-scale";
-import * as d3Time from "@/victory-vendor/d3-time";
-
-import { timeData } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const DateBins: Story = {
-  args: {},
-  render: (props) => {
-    // HACK: d3scale has a scaleTime function but the types
-    // are whack coming through the build
-    const niceTimeScale = (d3Scale as any)
-      .scaleTime()
-      .domain(d3Array.extent(timeData, ({ x }) => x))
-      .nice();
-
-    return (
-      <>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            data={timeData}
-            bins={[
-              new Date(2010, 0, 1),
-              new Date(2020, 5, 1),
-              new Date(2021, 0, 1),
-            ]}
-          />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props}
-            data={timeData}
-            bins={[
-              new Date(2010, 0, 1),
-              new Date(2020, 5, 1),
-              new Date(2021, 0, 1),
-            ]}
-          />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props} data={timeData} bins={2}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props} data={timeData} bins={2}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props} data={timeData} bins={10}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props} data={timeData} bins={10}  />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            data={timeData}
-            bins={niceTimeScale.ticks(d3Time.utcDay)}
-          />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            data={timeData}
-            bins={niceTimeScale.ticks(d3Time.utcMonth)}
-          />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props}
-            data={timeData}
-            bins={niceTimeScale.ticks(d3Time.utcYear)}
-          />
-        </VictoryChart>
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+import * as d3Array from "@/victory-vendor/d3-array";
+import * as d3Scale from "@/victory-vendor/d3-scale";
+import * as d3Time from "@/victory-vendor/d3-time";
+
+import { timeData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const DateBins: Story = {
+  args: {},
+  render: (props) => {
+    // HACK: d3scale has a scaleTime function but the types
+    // are whack coming through the build
+    const niceTimeScale = (d3Scale as any)
+      .scaleTime()
+      .domain(d3Array.extent(timeData, ({ x }) => x))
+      .nice();
+
+    return (
+      <>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram
+            {...props}
+            data={timeData}
+            bins={[
+              new Date(2010, 0, 1),
+              new Date(2020, 5, 1),
+              new Date(2021, 0, 1),
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryHistogram
+            {...props}
+            data={timeData}
+            bins={[
+              new Date(2010, 0, 1),
+              new Date(2020, 5, 1),
+              new Date(2021, 0, 1),
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram {...props} data={timeData} bins={2} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryHistogram {...props} data={timeData} bins={2} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram {...props} data={timeData} bins={10} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryHistogram {...props} data={timeData} bins={10} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram
+            {...props}
+            data={timeData}
+            bins={niceTimeScale.ticks(d3Time.utcDay)}
+          />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram
+            {...props}
+            data={timeData}
+            bins={niceTimeScale.ticks(d3Time.utcMonth)}
+          />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryHistogram
+            {...props}
+            data={timeData}
+            bins={niceTimeScale.ticks(d3Time.utcYear)}
+          />
+        </VictoryChart>
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx
index 010c0134d..7bce30d4b 100644
--- a/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx
+++ b/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx
@@ -16,10 +16,11 @@ export const DisableInlineStyles: Story = {
   render: (props) => (
     <>
       <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} disableInlineStyles  />
+        <VictoryHistogram {...props} data={data} disableInlineStyles />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props}
+        <VictoryHistogram
+          {...props}
           data={data}
           dataComponent={<Bar disableInlineStyles className="fill-purple" />}
         />
diff --git a/stories/victory-charts/victory-histogram/empty-data.stories.tsx b/stories/victory-charts/victory-histogram/empty-data.stories.tsx
index 5d3bb1c1b..4669e599d 100644
--- a/stories/victory-charts/victory-histogram/empty-data.stories.tsx
+++ b/stories/victory-charts/victory-histogram/empty-data.stories.tsx
@@ -1,51 +1,51 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const EmptyData: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={[]} bins={2} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={[]} bins={[0, 30, 100, 150]} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram
-          {...props}
-          scale={{ x: "time" }}
-          data={[]}
-          bins={[
-            new Date(2015, 0, 1),
-            new Date(2020, 0, 1),
-            new Date(2025, 0, 1),
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram
-          {...props}
-          scale={{ x: "time" }}
-          data={[]}
-          bins={[
-            new Date(2015, 0, 1),
-            new Date(2020, 0, 1),
-            new Date(2025, 0, 1),
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const EmptyData: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={[]} bins={2} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={[]} bins={[0, 30, 100, 150]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          scale={{ x: "time" }}
+          data={[]}
+          bins={[
+            new Date(2015, 0, 1),
+            new Date(2020, 0, 1),
+            new Date(2025, 0, 1),
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          scale={{ x: "time" }}
+          data={[]}
+          bins={[
+            new Date(2015, 0, 1),
+            new Date(2020, 0, 1),
+            new Date(2025, 0, 1),
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/get-path.stories.tsx b/stories/victory-charts/victory-histogram/get-path.stories.tsx
index 7f7b1f68a..50ba4c845 100644
--- a/stories/victory-charts/victory-histogram/get-path.stories.tsx
+++ b/stories/victory-charts/victory-histogram/get-path.stories.tsx
@@ -1,49 +1,49 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const GetPath: Story = {
-  args: {},
-  render: (props) => {
-    // const verticalPathFn = (callbackArgs) => {
-    //   const { x0, x1, y0, y1 } = callbackArgs;
-    //   return `M ${x0}, ${y0}
-    //   L ${(x1 + x0) / 2}, ${y1}
-    //   L ${x1}, ${y0}
-    //   z`;
-    // };
-
-    // const horizontalPathFn = (callbackArgs) => {
-    //   const { x0, x1, y0, y1 } = callbackArgs;
-    //   return `M ${x0}, ${y1}
-    //   L ${x1}, ${(y0 + y1) / 2}
-    //   L ${x0}, ${y0}
-    //   z`;
-    // };
-
-    // TODO: revert this when the getPath types are fixed.
-    return (
-      <>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          {/* <VictoryHistogram {...props} data={data} getPath={verticalPathFn} /> */}
-          <VictoryHistogram {...props} data={data} />
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          {/* <VictoryHistogram {...props} data={data} getPath={horizontalPathFn} /> */}
-          <VictoryHistogram {...props} data={data} />
-        </VictoryChart>
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const GetPath: Story = {
+  args: {},
+  render: (props) => {
+    // const verticalPathFn = (callbackArgs) => {
+    //   const { x0, x1, y0, y1 } = callbackArgs;
+    //   return `M ${x0}, ${y0}
+    //   L ${(x1 + x0) / 2}, ${y1}
+    //   L ${x1}, ${y0}
+    //   z`;
+    // };
+
+    // const horizontalPathFn = (callbackArgs) => {
+    //   const { x0, x1, y0, y1 } = callbackArgs;
+    //   return `M ${x0}, ${y1}
+    //   L ${x1}, ${(y0 + y1) / 2}
+    //   L ${x0}, ${y0}
+    //   z`;
+    // };
+
+    // TODO: revert this when the getPath types are fixed.
+    return (
+      <>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          {/* <VictoryHistogram {...props} data={data} getPath={verticalPathFn} /> */}
+          <VictoryHistogram {...props} data={data} />
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          {/* <VictoryHistogram {...props} data={data} getPath={horizontalPathFn} /> */}
+          <VictoryHistogram {...props} data={data} />
+        </VictoryChart>
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/labels.stories.tsx b/stories/victory-charts/victory-histogram/labels.stories.tsx
index e8a1ed8e7..4b2ce322f 100644
--- a/stories/victory-charts/victory-histogram/labels.stories.tsx
+++ b/stories/victory-charts/victory-histogram/labels.stories.tsx
@@ -1,77 +1,77 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryHistogram,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram
-          {...props}
-          data={data}
-          bins={5}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryHistogram,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          bins={5}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx b/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx
index b7d565352..847eea73d 100644
--- a/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx
+++ b/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx
@@ -1,58 +1,58 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryHistogram,
-  VictoryLine,
-  VictoryChart,
-  VictoryScatter,
-  VictoryTheme,
-} from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const MixedCharts: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data}  />
-        <VictoryLine
-          data={[
-            { x: 0, y: 5 },
-            { x: 10, y: 5 },
-            { x: 20, y: 2 },
-            { x: 30, y: 9 },
-            { x: 50, y: 2 },
-            { x: 60, y: 4 },
-            { x: 80, y: 12 },
-            { x: 120, y: 8 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data}  />
-        <VictoryScatter
-          data={[
-            { x: 0, y: 5 },
-            { x: 10, y: 5 },
-            { x: 20, y: 2 },
-            { x: 30, y: 9 },
-            { x: 50, y: 2 },
-            { x: 60, y: 4 },
-            { x: 80, y: 12 },
-            { x: 120, y: 8 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryHistogram,
+  VictoryLine,
+  VictoryChart,
+  VictoryScatter,
+  VictoryTheme,
+} from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const MixedCharts: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} />
+        <VictoryLine
+          data={[
+            { x: 0, y: 5 },
+            { x: 10, y: 5 },
+            { x: 20, y: 2 },
+            { x: 30, y: 9 },
+            { x: 50, y: 2 },
+            { x: 60, y: 4 },
+            { x: 80, y: 12 },
+            { x: 120, y: 8 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} />
+        <VictoryScatter
+          data={[
+            { x: 0, y: 5 },
+            { x: 10, y: 5 },
+            { x: 20, y: 2 },
+            { x: 30, y: 9 },
+            { x: 50, y: 2 },
+            { x: 60, y: 4 },
+            { x: 80, y: 12 },
+            { x: 120, y: 8 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx b/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx
index 77efa4f0f..5bb727e44 100644
--- a/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx
+++ b/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx
@@ -1,58 +1,58 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const NumericBins: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={2}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={2}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={8}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={8}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={48}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={48}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={[0, 30, 50]}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={[0, 30, 50]}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={[0, 30, 50, 100]}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={[0, 30, 50, 100]}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props} data={data} bins={[0, 10, 30, 70, 150]}  />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props} data={data} bins={[0, 10, 30, 70, 150]}  />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const NumericBins: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={2} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={2} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={8} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={8} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={48} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={48} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={[0, 30, 50]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={[0, 30, 50]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={[0, 30, 50, 100]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={[0, 30, 50, 100]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram {...props} data={data} bins={[0, 10, 30, 70, 150]} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram {...props} data={data} bins={[0, 10, 30, 70, 150]} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/scale.stories.tsx b/stories/victory-charts/victory-histogram/scale.stories.tsx
index 3c850a652..40b5dc3df 100644
--- a/stories/victory-charts/victory-histogram/scale.stories.tsx
+++ b/stories/victory-charts/victory-histogram/scale.stories.tsx
@@ -1,64 +1,64 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data, timeData } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const Scale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={{ y: 25 }}
-      >
-        <VictoryHistogram
-          {...props}
-          binSpacing={10}
-          data={timeData}
-          labels={({ datum }) =>
-            `${datum.x0.getFullYear()}\n|\n${datum.x1.getFullYear()}`
-          }
-        />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        horizontal
-        domainPadding={{ y: 35 }}
-      >
-        <VictoryHistogram
-          {...props}
-          binSpacing={10}
-          data={timeData}
-          labels={({ datum }) =>
-            `${datum.x0.getFullYear()} - ${datum.x1.getFullYear()}`
-          }
-        />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        scale={{ y: "log" }}
-        minDomain={{ y: 1 }}
-      >
-        <VictoryHistogram {...props} data={data} />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        scale={{ y: "log" }}
-        minDomain={{ y: 1 }}
-        horizontal
-      >
-        <VictoryHistogram {...props} data={data} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data, timeData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const Scale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ y: 25 }}
+      >
+        <VictoryHistogram
+          {...props}
+          binSpacing={10}
+          data={timeData}
+          labels={({ datum }) =>
+            `${datum.x0.getFullYear()}\n|\n${datum.x1.getFullYear()}`
+          }
+        />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domainPadding={{ y: 35 }}
+      >
+        <VictoryHistogram
+          {...props}
+          binSpacing={10}
+          data={timeData}
+          labels={({ datum }) =>
+            `${datum.x0.getFullYear()} - ${datum.x1.getFullYear()}`
+          }
+        />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        scale={{ y: "log" }}
+        minDomain={{ y: 1 }}
+      >
+        <VictoryHistogram {...props} data={data} />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        scale={{ y: "log" }}
+        minDomain={{ y: 1 }}
+        horizontal
+      >
+        <VictoryHistogram {...props} data={data} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/stacked.stories.tsx b/stories/victory-charts/victory-histogram/stacked.stories.tsx
index 1fda72963..7b8aaf1f5 100644
--- a/stories/victory-charts/victory-histogram/stacked.stories.tsx
+++ b/stories/victory-charts/victory-histogram/stacked.stories.tsx
@@ -1,99 +1,99 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryHistogram,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const Stacked: Story = {
-  args: {},
-  render: (props) => {
-    const stackedData = [
-      ...[50, 30, 100, 32, 50, 10, 49, 78, 20].map((count) =>
-        getData(count, count.toString(), 100),
-      ),
-      [{ x: 1 }, { x: 3 }, { x: 1 }, { x: 2 }],
-    ];
-
-    return (
-      <>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryStack colorScale="qualitative" bins={[0, 20, 65, 90, 100]}>
-            {stackedData.map((d, index) => (
-              <VictoryHistogram {...props} data={d} key={index} />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryStack colorScale="qualitative" bins={[0, 20, 65, 90, 100]}>
-            {stackedData.map((d, index) => (
-              <VictoryHistogram {...props} data={d} key={index} />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryStack colorScale="qualitative" bins={5}>
-            {stackedData.map((d, index) => (
-              <VictoryHistogram
-                {...props}
-                data={d}
-                key={index}
-                bins={index === 0 ? [0, 20, 100] : undefined}
-              />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryStack colorScale="qualitative" bins={5}>
-            {stackedData.map((d, index) => (
-              <VictoryHistogram
-                {...props}
-                binSpacing={10}
-                data={d}
-                key={index}
-              />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryStack colorScale="qualitative">
-            <VictoryHistogram
-              {...props}
-              data={data.map(({ x }) => ({ a: { b: { c: x } } }))}
-              x="a.b.c"
-            />
-            {stackedData.map((d, index) => (
-              <VictoryHistogram {...props} data={d} key={index} />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryStack colorScale="qualitative">
-            <VictoryHistogram
-              {...props}
-              data={data.map(({ x }) => ({ a: { b: { c: x } } }))}
-              x="a.b.c"
-            />
-            {stackedData.map((d, index) => (
-              <VictoryHistogram {...props} data={d} key={index} />
-            ))}
-          </VictoryStack>
-        </VictoryChart>
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryHistogram,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const Stacked: Story = {
+  args: {},
+  render: (props) => {
+    const stackedData = [
+      ...[50, 30, 100, 32, 50, 10, 49, 78, 20].map((count) =>
+        getData(count, count.toString(), 100),
+      ),
+      [{ x: 1 }, { x: 3 }, { x: 1 }, { x: 2 }],
+    ];
+
+    return (
+      <>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryStack colorScale="qualitative" bins={[0, 20, 65, 90, 100]}>
+            {stackedData.map((d, index) => (
+              <VictoryHistogram {...props} data={d} key={index} />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryStack colorScale="qualitative" bins={[0, 20, 65, 90, 100]}>
+            {stackedData.map((d, index) => (
+              <VictoryHistogram {...props} data={d} key={index} />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryStack colorScale="qualitative" bins={5}>
+            {stackedData.map((d, index) => (
+              <VictoryHistogram
+                {...props}
+                data={d}
+                key={index}
+                bins={index === 0 ? [0, 20, 100] : undefined}
+              />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryStack colorScale="qualitative" bins={5}>
+            {stackedData.map((d, index) => (
+              <VictoryHistogram
+                {...props}
+                binSpacing={10}
+                data={d}
+                key={index}
+              />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+          <VictoryStack colorScale="qualitative">
+            <VictoryHistogram
+              {...props}
+              data={data.map(({ x }) => ({ a: { b: { c: x } } }))}
+              x="a.b.c"
+            />
+            {stackedData.map((d, index) => (
+              <VictoryHistogram {...props} data={d} key={index} />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+        <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+          <VictoryStack colorScale="qualitative">
+            <VictoryHistogram
+              {...props}
+              data={data.map(({ x }) => ({ a: { b: { c: x } } }))}
+              x="a.b.c"
+            />
+            {stackedData.map((d, index) => (
+              <VictoryHistogram {...props} data={d} key={index} />
+            ))}
+          </VictoryStack>
+        </VictoryChart>
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-histogram/styles.stories.tsx b/stories/victory-charts/victory-histogram/styles.stories.tsx
index 2cbd4b62e..8ecf777b3 100644
--- a/stories/victory-charts/victory-histogram/styles.stories.tsx
+++ b/stories/victory-charts/victory-histogram/styles.stories.tsx
@@ -1,43 +1,45 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
-
-import { data } from "./data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryHistogram> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryHistogram",
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryHistogram {...props}
-          data={data}
-          style={{
-            data: { transform: "translate(0px, -20px) skew(2deg, 2deg)" },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryHistogram {...props}
-          data={data}
-          style={{
-            data: {
-              stroke: ({ datum }) => (datum.y > 3 ? "red" : "transparent"),
-              strokeWidth: 3,
-              opacity: ({ datum }) => (datum.y > 3 ? 1 : 0.4),
-            },
-          }}
-          labels={["one", "two", "three", "four", "five"]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory";
+
+import { data } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryHistogram> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryHistogram",
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          style={{
+            data: { transform: "translate(0px, -20px) skew(2deg, 2deg)" },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryHistogram
+          {...props}
+          data={data}
+          style={{
+            data: {
+              stroke: ({ datum }) => (datum.y > 3 ? "red" : "transparent"),
+              strokeWidth: 3,
+              opacity: ({ datum }) => (datum.y > 3 ? 1 : 0.4),
+            },
+          }}
+          labels={["one", "two", "three", "four", "five"]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/anchors.stories.tsx b/stories/victory-charts/victory-label/anchors.stories.tsx
index 3efcec564..05a0e1f02 100644
--- a/stories/victory-charts/victory-label/anchors.stories.tsx
+++ b/stories/victory-charts/victory-label/anchors.stories.tsx
@@ -1,128 +1,128 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const Anchors: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="end"
-            verticalAnchor="end"
-            text={["textAnchor: end", "with", "verticalAnchor: end"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="end"
-            verticalAnchor="middle"
-            text={["textAnchor: end", "with", "verticalAnchor: middle"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="end"
-            verticalAnchor="start"
-            text={["textAnchor: end", "with", "verticalAnchor: start"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="middle"
-            verticalAnchor="end"
-            text={["textAnchor: middle", "with", "verticalAnchor: end"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="middle"
-            verticalAnchor="middle"
-            text={["textAnchor: middle", "with", "verticalAnchor: middle"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="middle"
-            verticalAnchor="start"
-            text={["textAnchor: middle", "with", "verticalAnchor: start"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="start"
-            verticalAnchor="end"
-            text={["textAnchor: start", "with", "verticalAnchor: end"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="start"
-            verticalAnchor="middle"
-            text={["textAnchor: start", "with", "verticalAnchor: middle"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            textAnchor="end"
-            verticalAnchor="start"
-            text={["textAnchor: end", "with", "verticalAnchor: start"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const Anchors: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="end"
+            verticalAnchor="end"
+            text={["textAnchor: end", "with", "verticalAnchor: end"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="end"
+            verticalAnchor="middle"
+            text={["textAnchor: end", "with", "verticalAnchor: middle"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="end"
+            verticalAnchor="start"
+            text={["textAnchor: end", "with", "verticalAnchor: start"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="middle"
+            verticalAnchor="end"
+            text={["textAnchor: middle", "with", "verticalAnchor: end"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="middle"
+            verticalAnchor="middle"
+            text={["textAnchor: middle", "with", "verticalAnchor: middle"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="middle"
+            verticalAnchor="start"
+            text={["textAnchor: middle", "with", "verticalAnchor: start"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="start"
+            verticalAnchor="end"
+            text={["textAnchor: start", "with", "verticalAnchor: end"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="start"
+            verticalAnchor="middle"
+            text={["textAnchor: start", "with", "verticalAnchor: middle"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            textAnchor="end"
+            verticalAnchor="start"
+            text={["textAnchor: end", "with", "verticalAnchor: start"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/angles.stories.tsx b/stories/victory-charts/victory-label/angles.stories.tsx
index ab0e3b7e5..d18762c3d 100644
--- a/stories/victory-charts/victory-label/angles.stories.tsx
+++ b/stories/victory-charts/victory-label/angles.stories.tsx
@@ -1,88 +1,94 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const Angles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            verticalAnchor="middle"
-            text={["middle", "middle", "anchors"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            textAnchor="start"
-            text={["start", "end", "anchors"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            textAnchor="end"
-            verticalAnchor="start"
-            text={["end", "start", "anchors"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={-45}
-            verticalAnchor="middle"
-            text={["middle", "middle", "anchors"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={-45}
-            textAnchor="start"
-            text={["start", "end", "anchors"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={-45}
-            textAnchor="end"
-            verticalAnchor="start"
-            text={["end", "start", "anchors"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const Angles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            verticalAnchor="middle"
+            text={["middle", "middle", "anchors"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            textAnchor="start"
+            text={["start", "end", "anchors"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            textAnchor="end"
+            verticalAnchor="start"
+            text={["end", "start", "anchors"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={-45}
+            verticalAnchor="middle"
+            text={["middle", "middle", "anchors"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={-45}
+            textAnchor="start"
+            text={["start", "end", "anchors"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={-45}
+            textAnchor="end"
+            verticalAnchor="start"
+            text={["end", "start", "anchors"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/background-padding.stories.tsx b/stories/victory-charts/victory-label/background-padding.stories.tsx
index 12561ca38..f64b6eb01 100644
--- a/stories/victory-charts/victory-label/background-padding.stories.tsx
+++ b/stories/victory-charts/victory-label/background-padding.stories.tsx
@@ -1,153 +1,159 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const BackgroundPadding: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as a number",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={10}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as an object",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={{ top: 0, bottom: 10, left: 20, right: -10 }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as an array",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={[
-              { top: 0, bottom: 10, left: 20, right: -10 },
-              -5,
-              { top: 0, bottom: 10, left: 40, right: -30 },
-              20,
-            ]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as a number",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={10}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as an object",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={{ top: 0, bottom: 10, left: 20, right: -10 }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={45}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgroundPadding as an array",
-              "applies to all lines",
-              "but alters positioning",
-            ]}
-            backgroundPadding={[
-              { top: 0, bottom: 10, left: 20, right: -10 },
-              -5,
-              { top: 0, bottom: 10, left: 40, right: -30 },
-              20,
-            ]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const BackgroundPadding: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as a number",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={10}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as an object",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={{ top: 0, bottom: 10, left: 20, right: -10 }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as an array",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={[
+              { top: 0, bottom: 10, left: 20, right: -10 },
+              -5,
+              { top: 0, bottom: 10, left: 40, right: -30 },
+              20,
+            ]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as a number",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={10}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as an object",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={{ top: 0, bottom: 10, left: 20, right: -10 }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={45}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgroundPadding as an array",
+              "applies to all lines",
+              "but alters positioning",
+            ]}
+            backgroundPadding={[
+              { top: 0, bottom: 10, left: 20, right: -10 },
+              -5,
+              { top: 0, bottom: 10, left: 40, right: -30 },
+              20,
+            ]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/background-styles.stories.tsx b/stories/victory-charts/victory-label/background-styles.stories.tsx
index bf0e8446c..951e5ffd7 100644
--- a/stories/victory-charts/victory-label/background-styles.stories.tsx
+++ b/stories/victory-charts/victory-label/background-styles.stories.tsx
@@ -1,112 +1,117 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const BackgroundStyles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "Even if we leave blank arrays",
-              "for style or lineHeight,",
-              "Victory will save us with defaults.",
-            ]}
-            lineHeight={[]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgrounds work with ",
-              "multiple lineHeights,",
-              "but the positioning does change",
-            ]}
-            lineHeight={[1, 2, 1, 3]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            angle={70}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "background rects",
-              "all get appropriate",
-              "angle transforms",
-            ]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            dy={({ datum }) => (datum.y > 0 ? -5 : 8)}
-            verticalAnchor="end"
-            backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
-            backgroundStyle={{ fill: "plum", stroke: "#000000" }}
-            text={[
-              "Victory is awesome.",
-              "background styles",
-              "work with dy functions",
-            ]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            dx={({ datum }) => (datum.y > 0 ? -5 : 8)}
-            verticalAnchor="end"
-            backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
-            backgroundStyle={{ fill: "thistle", stroke: "#000000" }}
-            text={[
-              "Victory is awesome.",
-              "background styles",
-              "work with dx functions",
-            ]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const BackgroundStyles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "Even if we leave blank arrays",
+              "for style or lineHeight,",
+              "Victory will save us with defaults.",
+            ]}
+            lineHeight={[]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgrounds work with ",
+              "multiple lineHeights,",
+              "but the positioning does change",
+            ]}
+            lineHeight={[1, 2, 1, 3]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            angle={70}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "background rects",
+              "all get appropriate",
+              "angle transforms",
+            ]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            dy={({ datum }) => (datum.y > 0 ? -5 : 8)}
+            verticalAnchor="end"
+            backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
+            backgroundStyle={{ fill: "plum", stroke: "#000000" }}
+            text={[
+              "Victory is awesome.",
+              "background styles",
+              "work with dy functions",
+            ]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            dx={({ datum }) => (datum.y > 0 ? -5 : 8)}
+            verticalAnchor="end"
+            backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
+            backgroundStyle={{ fill: "thistle", stroke: "#000000" }}
+            text={[
+              "Victory is awesome.",
+              "background styles",
+              "work with dx functions",
+            ]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/inline.stories.tsx b/stories/victory-charts/victory-label/inline.stories.tsx
index 77530a596..43c0a0a41 100644
--- a/stories/victory-charts/victory-label/inline.stories.tsx
+++ b/stories/victory-charts/victory-label/inline.stories.tsx
@@ -1,73 +1,76 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const Inline: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            backgroundStyle={{ fill: "lavender" }}
-            verticalAnchor="middle"
-            text={["Victory is awesome.", "This is inline styling for labels."]}
-            inline
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            inline
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "backgrounds work with ",
-              "multiple lineHeights,",
-              "but the positioning does change",
-            ]}
-            lineHeight={[1, 2, 1, 3]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            inline
-            angle={70}
-            backgroundStyle={[
-              { fill: "pink" },
-              { fill: "lavender" },
-              { fill: "thistle" },
-              { fill: "plum" },
-            ]}
-            text={[
-              "Victory is awesome.",
-              "background rects",
-              "all get appropriate",
-              "angle transforms",
-            ]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const Inline: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            backgroundStyle={{ fill: "lavender" }}
+            verticalAnchor="middle"
+            text={["Victory is awesome.", "This is inline styling for labels."]}
+            inline
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            inline
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "backgrounds work with ",
+              "multiple lineHeights,",
+              "but the positioning does change",
+            ]}
+            lineHeight={[1, 2, 1, 3]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            inline
+            angle={70}
+            backgroundStyle={[
+              { fill: "pink" },
+              { fill: "lavender" },
+              { fill: "thistle" },
+              { fill: "plum" },
+            ]}
+            text={[
+              "Victory is awesome.",
+              "background rects",
+              "all get appropriate",
+              "angle transforms",
+            ]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/line-height.stories.tsx b/stories/victory-charts/victory-label/line-height.stories.tsx
index d4f4d6466..f7f3889cf 100644
--- a/stories/victory-charts/victory-label/line-height.stories.tsx
+++ b/stories/victory-charts/victory-label/line-height.stories.tsx
@@ -1,104 +1,112 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const LineHeight: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={2}
-            text={["single", "lineHeight", "value"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2]}
-            text={["single array", "lineHeight", "value"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2, 1, 3]}
-            text={["multi array", "lineHeight", "value"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={2}
-            text={["single", "lineHeight", "value"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2]}
-            text={["single array", "lineHeight", "value"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2, 1, 3]}
-            text={["multi array", "lineHeight", "value"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2, 1, 3]}
-            text={["测试汉字", "不在正常的 ASCII 范围内", "最后一行"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel {...props}
-            lineHeight={[2, 1, 3]}
-            text={[
-              "اختبار اللغات التي تُقرأ من اليمين إلى اليسار",
-              "مثل العربية",
-              "هناك أكثر من ذلك بكثير",
-            ]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const LineHeight: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={2}
+            text={["single", "lineHeight", "value"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2]}
+            text={["single array", "lineHeight", "value"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2, 1, 3]}
+            text={["multi array", "lineHeight", "value"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={2}
+            text={["single", "lineHeight", "value"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2]}
+            text={["single array", "lineHeight", "value"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2, 1, 3]}
+            text={["multi array", "lineHeight", "value"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2, 1, 3]}
+            text={["测试汉字", "不在正常的 ASCII 范围内", "最后一行"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            lineHeight={[2, 1, 3]}
+            text={[
+              "اختبار اللغات التي تُقرأ من اليمين إلى اليسار",
+              "مثل العربية",
+              "هناك أكثر من ذلك بكثير",
+            ]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/positioning.stories.tsx b/stories/victory-charts/victory-label/positioning.stories.tsx
index 8b93fb6ec..5b6a6750f 100644
--- a/stories/victory-charts/victory-label/positioning.stories.tsx
+++ b/stories/victory-charts/victory-label/positioning.stories.tsx
@@ -1,56 +1,56 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const Positioning: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={<VictoryLabel {...props} x={100} text="x = 100" />}
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={<VictoryLabel {...props} y={100} text="y = 100" />}
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={<VictoryLabel {...props} dx={50} text="dx = 50" />}
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={<VictoryLabel {...props} dy={50} text="dy = 50" />}
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            dx={({ datum }) => datum.x + 50}
-            text="dx function"
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            dy={({ datum }) => datum.x - 20}
-            text="dy function"
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const Positioning: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={<VictoryLabel {...props} x={100} text="x = 100" />}
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={<VictoryLabel {...props} y={100} text="y = 100" />}
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={<VictoryLabel {...props} dx={50} text="dx = 50" />}
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={<VictoryLabel {...props} dy={50} text="dy = 50" />}
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            dx={({ datum }) => datum.x + 50}
+            text="dx function"
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            dy={({ datum }) => datum.x - 20}
+            text="dy function"
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-label/styles.stories.tsx b/stories/victory-charts/victory-label/styles.stories.tsx
index 1ec887534..c42eed4dc 100644
--- a/stories/victory-charts/victory-label/styles.stories.tsx
+++ b/stories/victory-charts/victory-label/styles.stories.tsx
@@ -1,192 +1,192 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLabel, VictoryScatter } from "@/victory";
-import { defaultScatterProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLabel> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLabel",
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={{ fontSize: 20, fontFamily: "arial" }}
-            text={["single", "style", "object"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[{ fontSize: 20, fontFamily: "arial" }]}
-            text={["single", "element", "array"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              { fontSize: 20, fontFamily: "arial" },
-              { fontSize: 18, fill: "red", fontFamily: "arial" },
-            ]}
-            text={["multi", "element", "array"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={{ fontSize: 20, fontFamily: "arial" }}
-            text={["single", "style", "object"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[{ fontSize: 20, fontFamily: "arial" }]}
-            text={["single", "element", "array"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              { fontSize: 20, fontFamily: "arial" },
-              { fontSize: 12, fill: "red", fontFamily: "arial" },
-            ]}
-            text={["multi", "element", "array"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={{
-              fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-              fontFamily: "arial",
-            }}
-            text={["object", "with", "functions"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              {
-                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-                fontFamily: "arial",
-              },
-            ]}
-            text={["single array", "with", "functions"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              {
-                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-                fontFamily: "arial",
-              },
-              {
-                fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"),
-                fontFamily: "arial",
-              },
-            ]}
-            text={["multi array", "with", "functions"]}
-            backgroundStyle={{ stroke: "blue", fill: "none" }}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={{
-              fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-              fontFamily: "arial",
-            }}
-            text={["object", "with", "functions"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              {
-                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-                fontFamily: "arial",
-              },
-            ]}
-            text={["single array", "with", "functions"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-      <VictoryScatter
-        {...defaultScatterProps}
-        labelComponent={
-          <VictoryLabel
-            {...props}
-            style={[
-              {
-                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
-                fontFamily: "arial",
-              },
-              {
-                fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"),
-                fontFamily: "arial",
-              },
-            ]}
-            text={["multi array", "with", "functions"]}
-            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLabel, VictoryScatter } from "@/victory";
+import { defaultScatterProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLabel> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLabel",
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={{ fontSize: 20, fontFamily: "arial" }}
+            text={["single", "style", "object"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[{ fontSize: 20, fontFamily: "arial" }]}
+            text={["single", "element", "array"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              { fontSize: 20, fontFamily: "arial" },
+              { fontSize: 18, fill: "red", fontFamily: "arial" },
+            ]}
+            text={["multi", "element", "array"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={{ fontSize: 20, fontFamily: "arial" }}
+            text={["single", "style", "object"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[{ fontSize: 20, fontFamily: "arial" }]}
+            text={["single", "element", "array"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              { fontSize: 20, fontFamily: "arial" },
+              { fontSize: 12, fill: "red", fontFamily: "arial" },
+            ]}
+            text={["multi", "element", "array"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={{
+              fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+              fontFamily: "arial",
+            }}
+            text={["object", "with", "functions"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              {
+                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+                fontFamily: "arial",
+              },
+            ]}
+            text={["single array", "with", "functions"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              {
+                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+                fontFamily: "arial",
+              },
+              {
+                fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"),
+                fontFamily: "arial",
+              },
+            ]}
+            text={["multi array", "with", "functions"]}
+            backgroundStyle={{ stroke: "blue", fill: "none" }}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={{
+              fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+              fontFamily: "arial",
+            }}
+            text={["object", "with", "functions"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              {
+                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+                fontFamily: "arial",
+              },
+            ]}
+            text={["single array", "with", "functions"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+      <VictoryScatter
+        {...defaultScatterProps}
+        labelComponent={
+          <VictoryLabel
+            {...props}
+            style={[
+              {
+                fontSize: ({ datum }) => (datum.y === 0 ? 12 : 15),
+                fontFamily: "arial",
+              },
+              {
+                fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"),
+                fontFamily: "arial",
+              },
+            ]}
+            text={["multi array", "with", "functions"]}
+            backgroundStyle={[{ stroke: "blue", fill: "none" }]}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-legend/line-height.stories.tsx b/stories/victory-charts/victory-legend/line-height.stories.tsx
index 01fbe417a..0faa422a8 100644
--- a/stories/victory-charts/victory-legend/line-height.stories.tsx
+++ b/stories/victory-charts/victory-legend/line-height.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryAxis,
-  VictoryLegend,
-  VictoryChart,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLegend> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLegend",
-};
-
-export const LineHeight: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          orientation="vertical"
-          rowGutter={0}
-          style={{
-            labels: { lineHeight: 0.275 },
-          }}
-          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          orientation="vertical"
-          rowGutter={0}
-          style={{
-            labels: { lineHeight: 0.75 },
-          }}
-          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryAxis,
+  VictoryLegend,
+  VictoryChart,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLegend> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLegend",
+};
+
+export const LineHeight: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          orientation="vertical"
+          rowGutter={0}
+          style={{
+            labels: { lineHeight: 0.275 },
+          }}
+          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          orientation="vertical"
+          rowGutter={0}
+          style={{
+            labels: { lineHeight: 0.75 },
+          }}
+          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-legend/title.stories.tsx b/stories/victory-charts/victory-legend/title.stories.tsx
index c3e24c3c4..75a8e8b2f 100644
--- a/stories/victory-charts/victory-legend/title.stories.tsx
+++ b/stories/victory-charts/victory-legend/title.stories.tsx
@@ -1,103 +1,103 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-import { range } from "lodash";
-
-import {
-  VictoryAxis,
-  VictoryLegend,
-  VictoryChart,
-  VictoryTheme,
-} from "@/victory";
-
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLegend> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLegend",
-};
-
-const getData = (num) => {
-  return range(num).map((v) => ({
-    name: `Series ${v + 1}`,
-    symbol: {
-      size: 5,
-      type: "circle",
-      fill: undefined,
-    },
-  }));
-};
-
-export const Title: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          orientation="horizontal"
-          itemsPerRow={3}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          centerTitle
-          itemsPerRow={3}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          centerTitle
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          orientation="horizontal"
-          itemsPerRow={3}
-          style={{ title: { padding: 20 } }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          itemsPerRow={3}
-          titleOrientation="bottom"
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          itemsPerRow={3}
-          titleOrientation="left"
-          centerTitle
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryAxis />
-        <VictoryLegend
-          data={getData(5)}
-          title={`TITLE\nmultiline`}
-          itemsPerRow={3}
-          titleOrientation="right"
-          style={{ title: { padding: 20 } }}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { range } from "lodash";
+
+import {
+  VictoryAxis,
+  VictoryLegend,
+  VictoryChart,
+  VictoryTheme,
+} from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLegend> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLegend",
+};
+
+const getData = (num) => {
+  return range(num).map((v) => ({
+    name: `Series ${v + 1}`,
+    symbol: {
+      size: 5,
+      type: "circle",
+      fill: undefined,
+    },
+  }));
+};
+
+export const Title: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          orientation="horizontal"
+          itemsPerRow={3}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          centerTitle
+          itemsPerRow={3}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          centerTitle
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          orientation="horizontal"
+          itemsPerRow={3}
+          style={{ title: { padding: 20 } }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          itemsPerRow={3}
+          titleOrientation="bottom"
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          itemsPerRow={3}
+          titleOrientation="left"
+          centerTitle
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryAxis />
+        <VictoryLegend
+          data={getData(5)}
+          title={`TITLE\nmultiline`}
+          itemsPerRow={3}
+          titleOrientation="right"
+          style={{ title: { padding: 20 } }}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/data-accessors.stories.tsx b/stories/victory-charts/victory-line/data-accessors.stories.tsx
index 2349f7819..e5a142bff 100644
--- a/stories/victory-charts/victory-line/data-accessors.stories.tsx
+++ b/stories/victory-charts/victory-line/data-accessors.stories.tsx
@@ -1,87 +1,92 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const DataAccessors: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props}
-          data={[
-            { animal: "Cat", pet: 45, wild: 17 },
-            { animal: "Dog", pet: 85, wild: 6 },
-            { animal: "Fish", pet: 55, wild: 0 },
-            { animal: "Bird", pet: 15, wild: 40 },
-            { animal: "Monkey", pet: 5, wild: 40 },
-          ]}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props}
-          data={[
-            { animal: "Cat", pet: 45, wild: 17 },
-            { animal: "Dog", pet: 85, wild: 6 },
-            { animal: "Fish", pet: 55, wild: 0 },
-            { animal: "Bird", pet: 15, wild: 40 },
-            { animal: "Monkey", pet: 5, wild: 40 },
-          ]}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]} innerRadius={30}>
-        <VictoryLine {...props}
-          data={[
-            { animal: "Cat", pet: 45, wild: 17 },
-            { animal: "Dog", pet: 85, wild: 6 },
-            { animal: "Fish", pet: 55, wild: 0 },
-            { animal: "Bird", pet: 15, wild: 40 },
-            { animal: "Monkey", pet: 5, wild: 40 },
-          ]}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props}
-          data={[
-            { a: { b: { c: 1, d: 1 } } },
-            { a: { b: { c: 2, d: 3 } } },
-            { a: { b: { c: 3, d: 2 } } },
-          ]}
-          x={"a.b.c"}
-          y={"a.b.d"}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props}
-          data={[
-            { x: "Cat", y: 45, y0: 17 },
-            { x: "Dog", y: 85, y0: 6 },
-            { x: "Fish", y: 55, y0: 9 },
-            { x: "Bird", y: 15, y0: 4 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const DataAccessors: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { animal: "Cat", pet: 45, wild: 17 },
+            { animal: "Dog", pet: 85, wild: 6 },
+            { animal: "Fish", pet: 55, wild: 0 },
+            { animal: "Bird", pet: 15, wild: 40 },
+            { animal: "Monkey", pet: 5, wild: 40 },
+          ]}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { animal: "Cat", pet: 45, wild: 17 },
+            { animal: "Dog", pet: 85, wild: 6 },
+            { animal: "Fish", pet: 55, wild: 0 },
+            { animal: "Bird", pet: 15, wild: 40 },
+            { animal: "Monkey", pet: 5, wild: 40 },
+          ]}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]} innerRadius={30}>
+        <VictoryLine
+          {...props}
+          data={[
+            { animal: "Cat", pet: 45, wild: 17 },
+            { animal: "Dog", pet: 85, wild: 6 },
+            { animal: "Fish", pet: 55, wild: 0 },
+            { animal: "Bird", pet: 15, wild: 40 },
+            { animal: "Monkey", pet: 5, wild: 40 },
+          ]}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { a: { b: { c: 1, d: 1 } } },
+            { a: { b: { c: 2, d: 3 } } },
+            { a: { b: { c: 3, d: 2 } } },
+          ]}
+          x={"a.b.c"}
+          y={"a.b.d"}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { x: "Cat", y: 45, y0: 17 },
+            { x: "Dog", y: 85, y0: 6 },
+            { x: "Fish", y: 55, y0: 9 },
+            { x: "Bird", y: 15, y0: 4 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/events.stories.tsx b/stories/victory-charts/victory-line/events.stories.tsx
index f570bdcf1..cb28747e2 100644
--- a/stories/victory-charts/victory-line/events.stories.tsx
+++ b/stories/victory-charts/victory-line/events.stories.tsx
@@ -1,47 +1,48 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Events: Story = {
-  args: {},
-  render: (props) => (
-    <VictoryChart theme={VictoryTheme[props.themeKey]}>
-      <VictoryLine {...props}
-        style={{
-          data: { stroke: "#c43a31" },
-        }}
-        events={[
-          {
-            target: "parent",
-            eventHandlers: {
-              onClick: () => {
-                return [
-                  {
-                    target: "data",
-                    eventKey: "all",
-                    mutation: ({ style }) => {
-                      return style.stroke === "black"
-                        ? null
-                        : { style: { stroke: "black", strokeWidth: 5 } };
-                    },
-                  },
-                ];
-              },
-            },
-          },
-        ]}
-        data={getData(5, "seed-1")}
-      />
-    </VictoryChart>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Events: Story = {
+  args: {},
+  render: (props) => (
+    <VictoryChart theme={VictoryTheme[props.themeKey]}>
+      <VictoryLine
+        {...props}
+        style={{
+          data: { stroke: "#c43a31" },
+        }}
+        events={[
+          {
+            target: "parent",
+            eventHandlers: {
+              onClick: () => {
+                return [
+                  {
+                    target: "data",
+                    eventKey: "all",
+                    mutation: ({ style }) => {
+                      return style.stroke === "black"
+                        ? null
+                        : { style: { stroke: "black", strokeWidth: 5 } };
+                    },
+                  },
+                ];
+              },
+            },
+          },
+        ]}
+        data={getData(5, "seed-1")}
+      />
+    </VictoryChart>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/interpolation.stories.tsx b/stories/victory-charts/victory-line/interpolation.stories.tsx
index 29961f367..65da19b45 100644
--- a/stories/victory-charts/victory-line/interpolation.stories.tsx
+++ b/stories/victory-charts/victory-line/interpolation.stories.tsx
@@ -1,58 +1,58 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  InterpolationPropType,
-  VictoryLine,
-  VictoryChart,
-  VictoryLabel,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Interpolation: Story = {
-  args: {},
-  render: (props) => {
-    const makeInterpolationChart = (interpolation) => (
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLabel
-          x={175}
-          y={30}
-          style={{ textAnchor: "middle" }}
-          text={interpolation}
-        />
-        <VictoryLine
-          {...props}
-          data={getData(8)}
-          interpolation={interpolation as InterpolationPropType}
-        />
-      </VictoryChart>
-    );
-
-    return (
-      <>
-        {[
-          "basis",
-          "cardinal",
-          "catmullRom",
-          "linear",
-          "monotoneX",
-          "monotoneY",
-          "natural",
-          "step",
-          "stepAfter",
-          "stepBefore",
-        ].map((interpolation) => makeInterpolationChart(interpolation))}
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  InterpolationPropType,
+  VictoryLine,
+  VictoryChart,
+  VictoryLabel,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Interpolation: Story = {
+  args: {},
+  render: (props) => {
+    const makeInterpolationChart = (interpolation) => (
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLabel
+          x={175}
+          y={30}
+          style={{ textAnchor: "middle" }}
+          text={interpolation}
+        />
+        <VictoryLine
+          {...props}
+          data={getData(8)}
+          interpolation={interpolation as InterpolationPropType}
+        />
+      </VictoryChart>
+    );
+
+    return (
+      <>
+        {[
+          "basis",
+          "cardinal",
+          "catmullRom",
+          "linear",
+          "monotoneX",
+          "monotoneY",
+          "natural",
+          "step",
+          "stepAfter",
+          "stepBefore",
+        ].map((interpolation) => makeInterpolationChart(interpolation))}
+      </>
+    );
+  },
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/labels.stories.tsx b/stories/victory-charts/victory-line/labels.stories.tsx
index 48a7c2300..a00df6bec 100644
--- a/stories/victory-charts/victory-line/labels.stories.tsx
+++ b/stories/victory-charts/victory-line/labels.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(7)}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: -2, label: "bird" },
-            { x: 5, y: -5, label: "cat" },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(7)}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: -2, label: "bird" },
+            { x: 5, y: -5, label: "cat" },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/plotting-functions.stories.tsx b/stories/victory-charts/victory-line/plotting-functions.stories.tsx
index 479182b9d..fab0c6c06 100644
--- a/stories/victory-charts/victory-line/plotting-functions.stories.tsx
+++ b/stories/victory-charts/victory-line/plotting-functions.stories.tsx
@@ -1,51 +1,51 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const PlottingFunctions: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
-      </VictoryChart>
-
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          y={(d) => Math.sin(2 * Math.PI * d.x)}
-          y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          y={(d) => Math.sin(2 * Math.PI * d.x)}
-          y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} y={(d) => Math.sin(Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          y={(d) => Math.sin(Math.PI * d.x)}
-          y0={(d) => Math.sin(Math.PI * d.x) - 0.5}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const PlottingFunctions: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
+      </VictoryChart>
+
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          y={(d) => Math.sin(2 * Math.PI * d.x)}
+          y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          y={(d) => Math.sin(2 * Math.PI * d.x)}
+          y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} y={(d) => Math.sin(Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          y={(d) => Math.sin(Math.PI * d.x)}
+          y0={(d) => Math.sin(Math.PI * d.x) - 0.5}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/polar.stories.tsx b/stories/victory-charts/victory-line/polar.stories.tsx
index 4aa44e5a0..85ad1f097 100644
--- a/stories/victory-charts/victory-line/polar.stories.tsx
+++ b/stories/victory-charts/victory-line/polar.stories.tsx
@@ -1,75 +1,75 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryLine,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Polar: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart
-        polar
-        theme={VictoryTheme[props.themeKey]}
-        minDomain={{ y: 1 }}
-      >
-        <VictoryLine
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryLine {...props} data={getData(5)} />
-          <VictoryLine {...props} data={getData(5, "seed-1")} />
-          <VictoryLine {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryLine {...props} data={getData(5)} />
-          <VictoryLine {...props} data={getData(5, "seed-1")} />
-          <VictoryLine {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryLine,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Polar: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart
+        polar
+        theme={VictoryTheme[props.themeKey]}
+        minDomain={{ y: 1 }}
+      >
+        <VictoryLine
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryLine {...props} data={getData(5)} />
+          <VictoryLine {...props} data={getData(5, "seed-1")} />
+          <VictoryLine {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryLine {...props} data={getData(5)} />
+          <VictoryLine {...props} data={getData(5, "seed-1")} />
+          <VictoryLine {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/stacked.stories.tsx b/stories/victory-charts/victory-line/stacked.stories.tsx
index e2d994119..f45f26717 100644
--- a/stories/victory-charts/victory-line/stacked.stories.tsx
+++ b/stories/victory-charts/victory-line/stacked.stories.tsx
@@ -1,77 +1,77 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryLine,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Stacked: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(7)} />
-          <VictoryLine {...props} data={getData(7, "seed-1")} />
-          <VictoryLine {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(9)} />
-          <VictoryLine {...props} data={getData(5, "seed-1")} />
-          <VictoryLine {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(7)} />
-          <VictoryLine {...props} data={getData(7, "seed-1")} />
-          <VictoryLine {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(9)} />
-          <VictoryLine {...props} data={getData(5, "seed-1")} />
-          <VictoryLine {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(7)} />
-          <VictoryLine {...props} data={getData(7, "seed-1")} />
-          <VictoryLine {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(9)} />
-          <VictoryLine {...props} data={getData(5, "seed-1")} />
-          <VictoryLine {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryLine,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Stacked: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(7)} />
+          <VictoryLine {...props} data={getData(7, "seed-1")} />
+          <VictoryLine {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(9)} />
+          <VictoryLine {...props} data={getData(5, "seed-1")} />
+          <VictoryLine {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(7)} />
+          <VictoryLine {...props} data={getData(7, "seed-1")} />
+          <VictoryLine {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(9)} />
+          <VictoryLine {...props} data={getData(5, "seed-1")} />
+          <VictoryLine {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(7)} />
+          <VictoryLine {...props} data={getData(7, "seed-1")} />
+          <VictoryLine {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(9)} />
+          <VictoryLine {...props} data={getData(5, "seed-1")} />
+          <VictoryLine {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/styles.stories.tsx b/stories/victory-charts/victory-line/styles.stories.tsx
index aa7a46bd1..d069d56f4 100644
--- a/stories/victory-charts/victory-line/styles.stories.tsx
+++ b/stories/victory-charts/victory-line/styles.stories.tsx
@@ -1,44 +1,44 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => datum.x}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: { stroke: "tomato", strokeWidth: 2 },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          labels={({ datum }) => datum.x}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => datum.x}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: { stroke: "tomato", strokeWidth: 2 },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          labels={({ datum }) => datum.x}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/theme.stories.tsx b/stories/victory-charts/victory-line/theme.stories.tsx
index dc860ca0a..e28ceffaa 100644
--- a/stories/victory-charts/victory-line/theme.stories.tsx
+++ b/stories/victory-charts/victory-line/theme.stories.tsx
@@ -1,75 +1,75 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryLine,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Theme: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart>
-        <VictoryLine
-          {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(8)} />
-          <VictoryLine {...props} data={getData(8, "seed-1")} />
-          <VictoryLine {...props} data={getData(8, "seed-2")} />
-          <VictoryLine {...props} data={getData(8, "seed-3")} />
-          <VictoryLine {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.material}>
-        <VictoryLine
-          {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.material}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(8)} />
-          <VictoryLine {...props} data={getData(8, "seed-1")} />
-          <VictoryLine {...props} data={getData(8, "seed-2")} />
-          <VictoryLine {...props} data={getData(8, "seed-3")} />
-          <VictoryLine {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryLine
-          {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryLine {...props} data={getData(8)} />
-          <VictoryLine {...props} data={getData(8, "seed-1")} />
-          <VictoryLine {...props} data={getData(8, "seed-2")} />
-          <VictoryLine {...props} data={getData(8, "seed-3")} />
-          <VictoryLine {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryLine,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Theme: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart>
+        <VictoryLine
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(8)} />
+          <VictoryLine {...props} data={getData(8, "seed-1")} />
+          <VictoryLine {...props} data={getData(8, "seed-2")} />
+          <VictoryLine {...props} data={getData(8, "seed-3")} />
+          <VictoryLine {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.material}>
+        <VictoryLine
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.material}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(8)} />
+          <VictoryLine {...props} data={getData(8, "seed-1")} />
+          <VictoryLine {...props} data={getData(8, "seed-2")} />
+          <VictoryLine {...props} data={getData(8, "seed-3")} />
+          <VictoryLine {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryLine
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryLine {...props} data={getData(8)} />
+          <VictoryLine {...props} data={getData(8, "seed-1")} />
+          <VictoryLine {...props} data={getData(8, "seed-2")} />
+          <VictoryLine {...props} data={getData(8, "seed-3")} />
+          <VictoryLine {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/time-scale.stories.tsx b/stories/victory-charts/victory-line/time-scale.stories.tsx
index 8d8c5c1a1..8d8b81e22 100644
--- a/stories/victory-charts/victory-line/time-scale.stories.tsx
+++ b/stories/victory-charts/victory-line/time-scale.stories.tsx
@@ -1,55 +1,55 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryLine,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-
-import { getTimeData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const TimeScale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryLine {...props} data={getTimeData(5)} />
-          <VictoryLine {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryLine {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryLine {...props} data={getTimeData(5)} />
-          <VictoryLine {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryLine {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryLine,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getTimeData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const TimeScale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryLine {...props} data={getTimeData(5)} />
+          <VictoryLine {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryLine {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryLine {...props} data={getTimeData(5)} />
+          <VictoryLine {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryLine {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-line/tooltips.stories.tsx b/stories/victory-charts/victory-line/tooltips.stories.tsx
index 7e1f2b507..5cd48b889 100644
--- a/stories/victory-charts/victory-line/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-line/tooltips.stories.tsx
@@ -1,59 +1,59 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryLine,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryLine> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryLine",
-};
-
-export const Tooltips: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getMixedData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryLine
-          {...props}
-          data={getData(5)}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryLine,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryLine> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryLine",
+};
+
+export const Tooltips: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getMixedData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryLine
+          {...props}
+          data={getData(5)}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/corner-radius.stories.tsx b/stories/victory-charts/victory-pie/corner-radius.stories.tsx
index de44e715e..595e58164 100644
--- a/stories/victory-charts/victory-pie/corner-radius.stories.tsx
+++ b/stories/victory-charts/victory-pie/corner-radius.stories.tsx
@@ -1,57 +1,57 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const CornerRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        cornerRadius={10}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        cornerRadius={10}
-        innerRadius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        cornerRadius={({ datum }) => datum.x * 5}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 1 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 2 },
-          { x: 5, y: 3 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        cornerRadius={({ datum }) => datum.r}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 1 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5, r: 15 },
-          { x: 4, y: 2 },
-          { x: 5, y: 3 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const CornerRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        cornerRadius={10}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        cornerRadius={10}
+        innerRadius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        cornerRadius={({ datum }) => datum.x * 5}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 1 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 2 },
+          { x: 5, y: 3 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        cornerRadius={({ datum }) => datum.r}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 1 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5, r: 15 },
+          { x: 4, y: 2 },
+          { x: 5, y: 3 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/data.stories.tsx b/stories/victory-charts/victory-pie/data.stories.tsx
index f84964016..bfbea78c6 100644
--- a/stories/victory-charts/victory-pie/data.stories.tsx
+++ b/stories/victory-charts/victory-pie/data.stories.tsx
@@ -1,52 +1,52 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Data: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        data={[
-          { x: "Cat", y: 63 },
-          { x: "Dog", y: 91 },
-          { x: "Fish", y: 55 },
-          { x: "Bird", y: 55 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        data={[
-          { animal: "Cat", pet: 45, wild: 17 },
-          { animal: "Dog", pet: 85, wild: 6 },
-          { animal: "Fish", pet: 55, wild: 0 },
-          { animal: "Bird", pet: 15, wild: 40 },
-        ]}
-        x={"animal"}
-        y={(data) => data.pet + data.wild}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        data={[
-          { x: "Cat", y: 62 },
-          { x: "Dog", y: 91 },
-          { x: "Fish", y: 55 },
-          { x: "Bird", y: 55 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Data: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        data={[
+          { x: "Cat", y: 63 },
+          { x: "Dog", y: 91 },
+          { x: "Fish", y: 55 },
+          { x: "Bird", y: 55 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        data={[
+          { animal: "Cat", pet: 45, wild: 17 },
+          { animal: "Dog", pet: 85, wild: 6 },
+          { animal: "Fish", pet: 55, wild: 0 },
+          { animal: "Bird", pet: 15, wild: 40 },
+        ]}
+        x={"animal"}
+        y={(data) => data.pet + data.wild}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        data={[
+          { x: "Cat", y: 62 },
+          { x: "Dog", y: 91 },
+          { x: "Fish", y: 55 },
+          { x: "Bird", y: 55 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/inner-radius.stories.tsx b/stories/victory-charts/victory-pie/inner-radius.stories.tsx
index 40061e3aa..52c5d493b 100644
--- a/stories/victory-charts/victory-pie/inner-radius.stories.tsx
+++ b/stories/victory-charts/victory-pie/inner-radius.stories.tsx
@@ -1,62 +1,62 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const InnerRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={({ datum }) => datum.radius}
-        innerRadius={({ datum }) => datum.radius - 20}
-        data={[
-          { x: 1, y: 1, radius: 110 },
-          { x: 2, y: 3, radius: 120 },
-          { x: 3, y: 5, radius: 140 },
-          { x: 4, y: 2, radius: 150 },
-          { x: 5, y: 3, radius: 130 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={({ datum }) => datum.y + 10}
-        labelRadius={({ datum }) => datum.y - 20}
-        data={[
-          { x: "Cat", y: 62 },
-          { x: "Dog", y: 91 },
-          { x: "Fish", y: 55 },
-          { x: "Bird", y: 25 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={({ datum }) => datum.radius}
-        data={[
-          { x: 1, y: 1, radius: 50 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 2 },
-          { x: 5, y: 3 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const InnerRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={({ datum }) => datum.radius}
+        innerRadius={({ datum }) => datum.radius - 20}
+        data={[
+          { x: 1, y: 1, radius: 110 },
+          { x: 2, y: 3, radius: 120 },
+          { x: 3, y: 5, radius: 140 },
+          { x: 4, y: 2, radius: 150 },
+          { x: 5, y: 3, radius: 130 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={({ datum }) => datum.y + 10}
+        labelRadius={({ datum }) => datum.y - 20}
+        data={[
+          { x: "Cat", y: 62 },
+          { x: "Dog", y: 91 },
+          { x: "Fish", y: 55 },
+          { x: "Bird", y: 25 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={({ datum }) => datum.radius}
+        data={[
+          { x: 1, y: 1, radius: 50 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 2 },
+          { x: 5, y: 3 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/label-indicator.stories.tsx b/stories/victory-charts/victory-pie/label-indicator.stories.tsx
index 8420704da..62aae4aec 100644
--- a/stories/victory-charts/victory-pie/label-indicator.stories.tsx
+++ b/stories/victory-charts/victory-pie/label-indicator.stories.tsx
@@ -1,72 +1,72 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { LineSegment, VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const LabelIndicator: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labelIndicator
-      />
-
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labelIndicator
-        radius={90}
-        labelRadius={100}
-        labelIndicatorInnerOffset={25}
-        labelIndicatorOuterOffset={4}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={50}
-        labelIndicator
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={50}
-        labelIndicator
-        labelIndicatorInnerOffset={25}
-        labelIndicatorOuterOffset={10}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={50}
-        labelIndicator={<LineSegment />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labelRadius={90}
-        innerRadius={50}
-        radius={75}
-        labelIndicator={
-          <LineSegment
-            style={{
-              stroke: "red",
-              strokeDasharray: 1,
-              strokeWidth: 2,
-              fill: "none",
-            }}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { LineSegment, VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const LabelIndicator: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelIndicator
+      />
+
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelIndicator
+        radius={90}
+        labelRadius={100}
+        labelIndicatorInnerOffset={25}
+        labelIndicatorOuterOffset={4}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={50}
+        labelIndicator
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={50}
+        labelIndicator
+        labelIndicatorInnerOffset={25}
+        labelIndicatorOuterOffset={10}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={50}
+        labelIndicator={<LineSegment />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelRadius={90}
+        innerRadius={50}
+        radius={75}
+        labelIndicator={
+          <LineSegment
+            style={{
+              stroke: "red",
+              strokeDasharray: 1,
+              strokeWidth: 2,
+              fill: "none",
+            }}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/label-placement.stories.tsx b/stories/victory-charts/victory-pie/label-placement.stories.tsx
index 8071d2081..4f771747b 100644
--- a/stories/victory-charts/victory-pie/label-placement.stories.tsx
+++ b/stories/victory-charts/victory-pie/label-placement.stories.tsx
@@ -1,67 +1,67 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const LabelPlacement: Story = {
-  args: {
-    data: [
-      { x: 1, y: 1, l: 0 },
-      { x: 2, y: 1, l: 45 },
-      { x: 3, y: 1, l: 90 },
-      { x: 4, y: 1, l: 135 },
-      { x: 5, y: 1, l: 180 },
-      { x: 6, y: 1, l: 225 },
-      { x: 7, y: 1, l: 270 },
-      { x: 8, y: 1, l: 315 },
-    ],
-  },
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelPosition="startAngle"
-        labelPlacement="parallel"
-        labelRadius={50}
-        labels={({ datum }) => `${datum.l} degrees`}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        radius={120}
-        labelPosition="startAngle"
-        labelPlacement="perpendicular"
-        labels={({ datum }) => `${datum.l}\ndegrees`}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelPosition="endAngle"
-        labelPlacement="parallel"
-        labelRadius={50}
-        labels={({ datum }) => `${datum.l} degrees`}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        radius={120}
-        labelPosition="endAngle"
-        labelPlacement="perpendicular"
-        labels={({ datum }) => `${datum.l}\ndegrees`}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const LabelPlacement: Story = {
+  args: {
+    data: [
+      { x: 1, y: 1, l: 0 },
+      { x: 2, y: 1, l: 45 },
+      { x: 3, y: 1, l: 90 },
+      { x: 4, y: 1, l: 135 },
+      { x: 5, y: 1, l: 180 },
+      { x: 6, y: 1, l: 225 },
+      { x: 7, y: 1, l: 270 },
+      { x: 8, y: 1, l: 315 },
+    ],
+  },
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelPosition="startAngle"
+        labelPlacement="parallel"
+        labelRadius={50}
+        labels={({ datum }) => `${datum.l} degrees`}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        radius={120}
+        labelPosition="startAngle"
+        labelPlacement="perpendicular"
+        labels={({ datum }) => `${datum.l}\ndegrees`}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelPosition="endAngle"
+        labelPlacement="parallel"
+        labelRadius={50}
+        labels={({ datum }) => `${datum.l} degrees`}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        radius={120}
+        labelPosition="endAngle"
+        labelPlacement="perpendicular"
+        labels={({ datum }) => `${datum.l}\ndegrees`}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/label-radius.stories.tsx b/stories/victory-charts/victory-pie/label-radius.stories.tsx
index 9c7e9351e..4fc719f9d 100644
--- a/stories/victory-charts/victory-pie/label-radius.stories.tsx
+++ b/stories/victory-charts/victory-pie/label-radius.stories.tsx
@@ -1,70 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const LabelRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelRadius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelRadius={({ datum }) => datum.y}
-        radius={80}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 100 },
-          { x: 2, y: 130 },
-          { x: 3, y: 150 },
-          { x: 4, y: 120 },
-          { x: 5, y: 130 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelRadius={({ datum }) => datum.r}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 100 },
-          { x: 2, y: 130 },
-          { x: 3, y: 150, r: 80 },
-          { x: 4, y: 120 },
-          { x: 5, y: 130 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        labelRadius={({ datum }) => datum.r}
-        innerRadius={100}
-        labelPosition="startAngle"
-        data={[
-          { x: 1, y: 100 },
-          { x: 2, y: 130 },
-          { x: 3, y: 150, r: 80 },
-          { x: 4, y: 120 },
-          { x: 5, y: 130 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const LabelRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelRadius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelRadius={({ datum }) => datum.y}
+        radius={80}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 100 },
+          { x: 2, y: 130 },
+          { x: 3, y: 150 },
+          { x: 4, y: 120 },
+          { x: 5, y: 130 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelRadius={({ datum }) => datum.r}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 100 },
+          { x: 2, y: 130 },
+          { x: 3, y: 150, r: 80 },
+          { x: 4, y: 120 },
+          { x: 5, y: 130 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        labelRadius={({ datum }) => datum.r}
+        innerRadius={100}
+        labelPosition="startAngle"
+        data={[
+          { x: 1, y: 100 },
+          { x: 2, y: 130 },
+          { x: 3, y: 150, r: 80 },
+          { x: 4, y: 120 },
+          { x: 5, y: 130 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/labels.stories.tsx b/stories/victory-charts/victory-pie/labels.stories.tsx
index 2c0287083..5a7993af7 100644
--- a/stories/victory-charts/victory-pie/labels.stories.tsx
+++ b/stories/victory-charts/victory-pie/labels.stories.tsx
@@ -1,42 +1,42 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labels={["one", "two", "three", "four"]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labels={({ index }) => `#${index}`}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labels={({ index }) => `#${index}`}
-        labelPosition="startAngle"
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        labels={({ index }) => `#${index}`}
-        labelPosition="endAngle"
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labels={["one", "two", "three", "four"]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labels={({ index }) => `#${index}`}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labels={({ index }) => `#${index}`}
+        labelPosition="startAngle"
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labels={({ index }) => `#${index}`}
+        labelPosition="endAngle"
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/origin.stories.tsx b/stories/victory-charts/victory-pie/origin.stories.tsx
index 9b15c75fe..4443f063d 100644
--- a/stories/victory-charts/victory-pie/origin.stories.tsx
+++ b/stories/victory-charts/victory-pie/origin.stories.tsx
@@ -1,45 +1,45 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Origin: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        origin={{ x: 150, y: 150 }}
-        labelRadius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        origin={{ x: 150, y: 150 }}
-        labelRadius={100}
-        endAngle={90}
-        startAngle={-90}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{ labels: { fill: "magenta" } }}
-        origin={{ x: 200, y: 0 }}
-        labelRadius={100}
-        startAngle={-270}
-        endAngle={-90}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Origin: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        origin={{ x: 150, y: 150 }}
+        labelRadius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        origin={{ x: 150, y: 150 }}
+        labelRadius={100}
+        endAngle={90}
+        startAngle={-90}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{ labels: { fill: "magenta" } }}
+        origin={{ x: 200, y: 0 }}
+        labelRadius={100}
+        startAngle={-270}
+        endAngle={-90}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/pad-angle.stories.tsx b/stories/victory-charts/victory-pie/pad-angle.stories.tsx
index 486b5654b..f78d56927 100644
--- a/stories/victory-charts/victory-pie/pad-angle.stories.tsx
+++ b/stories/victory-charts/victory-pie/pad-angle.stories.tsx
@@ -1,57 +1,57 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const PadAngle: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        padAngle={6}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        padAngle={6}
-        innerRadius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        padAngle={({ datum }) => datum.x * 2}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 1 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 2 },
-          { x: 5, y: 3 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        padAngle={({ datum }) => datum.r}
-        innerRadius={100}
-        data={[
-          { x: 1, y: 1 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5, r: 8 },
-          { x: 4, y: 2 },
-          { x: 5, y: 3 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const PadAngle: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        padAngle={6}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        padAngle={6}
+        innerRadius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        padAngle={({ datum }) => datum.x * 2}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 1 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 2 },
+          { x: 5, y: 3 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        padAngle={({ datum }) => datum.r}
+        innerRadius={100}
+        data={[
+          { x: 1, y: 1 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5, r: 8 },
+          { x: 4, y: 2 },
+          { x: 5, y: 3 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/radius.stories.tsx b/stories/victory-charts/victory-pie/radius.stories.tsx
index 3a856e8d2..f4ba4fe01 100644
--- a/stories/victory-charts/victory-pie/radius.stories.tsx
+++ b/stories/victory-charts/victory-pie/radius.stories.tsx
@@ -1,68 +1,68 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Radius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={({ datum }) => datum.radius}
-        data={[
-          { x: 1, y: 1, radius: 110 },
-          { x: 2, y: 3, radius: 120 },
-          { x: 3, y: 5, radius: 140 },
-          { x: 4, y: 2, radius: 150 },
-          { x: 5, y: 3, radius: 130 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={({ datum }) => datum.y + 100}
-        labelRadius={({ datum }) => datum.y + 50}
-        style={{
-          labels: { fill: "white" },
-        }}
-        data={[
-          { x: "Cat", y: 62 },
-          { x: "Dog", y: 91 },
-          { x: "Fish", y: 55 },
-          { x: "Bird", y: 25 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        innerRadius={80}
-        radius={({ datum }) => datum.y + 100}
-        labelRadius={({ datum }) => datum.y + 65}
-        style={{
-          labels: { fill: "white" },
-        }}
-        data={[
-          { x: "Cat", y: 62 },
-          { x: "Dog", y: 91 },
-          { x: "Fish", y: 55 },
-          { x: "Bird", y: 25 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Radius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={({ datum }) => datum.radius}
+        data={[
+          { x: 1, y: 1, radius: 110 },
+          { x: 2, y: 3, radius: 120 },
+          { x: 3, y: 5, radius: 140 },
+          { x: 4, y: 2, radius: 150 },
+          { x: 5, y: 3, radius: 130 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={({ datum }) => datum.y + 100}
+        labelRadius={({ datum }) => datum.y + 50}
+        style={{
+          labels: { fill: "white" },
+        }}
+        data={[
+          { x: "Cat", y: 62 },
+          { x: "Dog", y: 91 },
+          { x: "Fish", y: 55 },
+          { x: "Bird", y: 25 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        innerRadius={80}
+        radius={({ datum }) => datum.y + 100}
+        labelRadius={({ datum }) => datum.y + 65}
+        style={{
+          labels: { fill: "white" },
+        }}
+        data={[
+          { x: "Cat", y: 62 },
+          { x: "Dog", y: 91 },
+          { x: "Fish", y: 55 },
+          { x: "Bird", y: 25 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx b/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx
index 6b9df7362..d7d17ebd4 100644
--- a/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx
+++ b/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx
@@ -1,76 +1,76 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { Helpers, Slice, VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const StartAndEndAngles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        endAngle={90}
-        startAngle={-90}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        endAngle={90}
-        innerRadius={140}
-        padAngle={5}
-        startAngle={-90}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dataComponent={
-          <Slice
-            sliceStartAngle={0}
-            sliceEndAngle={({ datum }) => datum.endAngle}
-          />
-        }
-        labels={() => null}
-        cornerRadius={5}
-        radius={({ datum }) => datum.radius}
-        innerRadius={({ datum }) => datum.innerRadius}
-        data={[
-          { x: "Cat", y: 62, innerRadius: 0, radius: 30 },
-          { x: "Dog", y: 91, innerRadius: 35, radius: 65 },
-          { x: "Fish", y: 55, innerRadius: 70, radius: 100 },
-          { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 360 },
-        ]}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dataComponent={
-          <Slice
-            sliceStartAngle={-90}
-            sliceEndAngle={({ slice }) =>
-              Helpers.radiansToDegrees(slice?.endAngle) - 90
-            }
-          />
-        }
-        labels={() => null}
-        cornerRadius={5}
-        radius={({ datum }) => datum.radius}
-        innerRadius={({ datum }) => datum.innerRadius}
-        data={[
-          { x: "Cat", y: 62, innerRadius: 0, radius: 30 },
-          { x: "Dog", y: 91, innerRadius: 35, radius: 65 },
-          { x: "Fish", y: 55, innerRadius: 70, radius: 100 },
-          { x: "Bird", y: 55, innerRadius: 105, radius: 135 },
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { Helpers, Slice, VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const StartAndEndAngles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        endAngle={90}
+        startAngle={-90}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        endAngle={90}
+        innerRadius={140}
+        padAngle={5}
+        startAngle={-90}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dataComponent={
+          <Slice
+            sliceStartAngle={0}
+            sliceEndAngle={({ datum }) => datum.endAngle}
+          />
+        }
+        labels={() => null}
+        cornerRadius={5}
+        radius={({ datum }) => datum.radius}
+        innerRadius={({ datum }) => datum.innerRadius}
+        data={[
+          { x: "Cat", y: 62, innerRadius: 0, radius: 30 },
+          { x: "Dog", y: 91, innerRadius: 35, radius: 65 },
+          { x: "Fish", y: 55, innerRadius: 70, radius: 100 },
+          { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 360 },
+        ]}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dataComponent={
+          <Slice
+            sliceStartAngle={-90}
+            sliceEndAngle={({ slice }) =>
+              Helpers.radiansToDegrees(slice?.endAngle) - 90
+            }
+          />
+        }
+        labels={() => null}
+        cornerRadius={5}
+        radius={({ datum }) => datum.radius}
+        innerRadius={({ datum }) => datum.innerRadius}
+        data={[
+          { x: "Cat", y: 62, innerRadius: 0, radius: 30 },
+          { x: "Dog", y: 91, innerRadius: 35, radius: 65 },
+          { x: "Fish", y: 55, innerRadius: 70, radius: 100 },
+          { x: "Bird", y: 55, innerRadius: 105, radius: 135 },
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/styles.stories.tsx b/stories/victory-charts/victory-pie/styles.stories.tsx
index 94a13d342..328165063 100644
--- a/stories/victory-charts/victory-pie/styles.stories.tsx
+++ b/stories/victory-charts/victory-pie/styles.stories.tsx
@@ -1,74 +1,74 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{
-          labels: { fontSize: 20 },
-          data: {
-            stroke: "red",
-            strokeWidth: 3,
-            fillOpacity: 0.3,
-          },
-        }}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        colorScale="cool"
-        style={{
-          labels: { fontSize: 20 },
-          data: {
-            fillOpacity: 0.3,
-          },
-        }}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{
-          labels: {
-            fill: "white",
-            fontSize: 12,
-            fontWeight: "bold",
-          },
-        }}
-        data={[
-          { x: "<5", y: 6279 },
-          { x: "5-13", y: 9182 },
-          { x: "14-17", y: 5511 },
-          { x: "18-24", y: 7164 },
-          { x: "25-44", y: 6716 },
-          { x: "45-64", y: 4263 },
-          { x: "≥65", y: 7502 },
-        ]}
-        innerRadius={100}
-        labelRadius={110}
-        colorScale={[
-          "#D85F49",
-          "#F66D3B",
-          "#D92E1D",
-          "#D73C4C",
-          "#FFAF59",
-          "#E28300",
-          "#F6A57F",
-        ]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{
+          labels: { fontSize: 20 },
+          data: {
+            stroke: "red",
+            strokeWidth: 3,
+            fillOpacity: 0.3,
+          },
+        }}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        colorScale="cool"
+        style={{
+          labels: { fontSize: 20 },
+          data: {
+            fillOpacity: 0.3,
+          },
+        }}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{
+          labels: {
+            fill: "white",
+            fontSize: 12,
+            fontWeight: "bold",
+          },
+        }}
+        data={[
+          { x: "<5", y: 6279 },
+          { x: "5-13", y: 9182 },
+          { x: "14-17", y: 5511 },
+          { x: "18-24", y: 7164 },
+          { x: "25-44", y: 6716 },
+          { x: "45-64", y: 4263 },
+          { x: "≥65", y: 7502 },
+        ]}
+        innerRadius={100}
+        labelRadius={110}
+        colorScale={[
+          "#D85F49",
+          "#F66D3B",
+          "#D92E1D",
+          "#D73C4C",
+          "#FFAF59",
+          "#E28300",
+          "#F6A57F",
+        ]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-pie/tooltips.stories.tsx b/stories/victory-charts/victory-pie/tooltips.stories.tsx
index 98ebbdfc3..0c7648820 100644
--- a/stories/victory-charts/victory-pie/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-pie/tooltips.stories.tsx
@@ -1,70 +1,70 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPie, VictoryTheme, VictoryTooltip } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPie> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPie",
-};
-
-export const Tooltips: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labels={["one", "two", "three labels", "four"]}
-        labelPlacement="perpendicular"
-        labelComponent={<VictoryTooltip active />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labelComponent={<VictoryTooltip active />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labels={({ index }) => `#${index}`}
-        labelPosition="startAngle"
-        labelPlacement="perpendicular"
-        labelComponent={<VictoryTooltip active />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labels={({ index }) => `#${index}`}
-        labelPosition="endAngle"
-        labelPlacement="perpendicular"
-        labelComponent={<VictoryTooltip active />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labels={({ index }) => `#${index}`}
-        labelPosition="startAngle"
-        labelPlacement="parallel"
-        labelComponent={<VictoryTooltip active />}
-      />
-      <VictoryPie
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        radius={100}
-        labels={({ index }) => `#${index}`}
-        labelPosition="endAngle"
-        labelPlacement="parallel"
-        labelComponent={<VictoryTooltip active />}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPie, VictoryTheme, VictoryTooltip } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPie> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPie",
+};
+
+export const Tooltips: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labels={["one", "two", "three labels", "four"]}
+        labelPlacement="perpendicular"
+        labelComponent={<VictoryTooltip active />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labelComponent={<VictoryTooltip active />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labels={({ index }) => `#${index}`}
+        labelPosition="startAngle"
+        labelPlacement="perpendicular"
+        labelComponent={<VictoryTooltip active />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labels={({ index }) => `#${index}`}
+        labelPosition="endAngle"
+        labelPlacement="perpendicular"
+        labelComponent={<VictoryTooltip active />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labels={({ index }) => `#${index}`}
+        labelPosition="startAngle"
+        labelPlacement="parallel"
+        labelComponent={<VictoryTooltip active />}
+      />
+      <VictoryPie
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        radius={100}
+        labels={({ index }) => `#${index}`}
+        labelPosition="endAngle"
+        labelPlacement="parallel"
+        labelComponent={<VictoryTooltip active />}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx b/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx
index 6ca4e630e..9b67c10b7 100644
--- a/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx
@@ -1,50 +1,50 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const AxisAngle: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={315}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        endAngle={180}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={315}
-        endAngle={180}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const AxisAngle: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={315}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        endAngle={180}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={315}
+        endAngle={180}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx b/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx
index 7ea3fbc5d..058842d86 100644
--- a/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx
@@ -1,50 +1,50 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory";
-
-import { getValues } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const AxisValue: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart polar>
-        <VictoryPolarAxis
-          {...props}
-          theme={VictoryTheme[props.themeKey]}
-          dependentAxis
-          axisValue={1.5}
-          tickValues={getValues(3)}
-        />
-        <VictoryPolarAxis
-          {...props}
-          theme={VictoryTheme[props.themeKey]}
-          tickValues={getValues(5)}
-        />
-      </VictoryChart>
-      <VictoryChart polar>
-        <VictoryPolarAxis
-          {...props}
-          theme={VictoryTheme[props.themeKey]}
-          dependentAxis
-          axisValue="three"
-          tickValues={getValues(3)}
-        />
-        <VictoryPolarAxis
-          {...props}
-          theme={VictoryTheme[props.themeKey]}
-          tickValues={["one", "two", "three", "four", "five"]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory";
+
+import { getValues } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const AxisValue: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart polar>
+        <VictoryPolarAxis
+          {...props}
+          theme={VictoryTheme[props.themeKey]}
+          dependentAxis
+          axisValue={1.5}
+          tickValues={getValues(3)}
+        />
+        <VictoryPolarAxis
+          {...props}
+          theme={VictoryTheme[props.themeKey]}
+          tickValues={getValues(5)}
+        />
+      </VictoryChart>
+      <VictoryChart polar>
+        <VictoryPolarAxis
+          {...props}
+          theme={VictoryTheme[props.themeKey]}
+          dependentAxis
+          axisValue="three"
+          tickValues={getValues(3)}
+        />
+        <VictoryPolarAxis
+          {...props}
+          theme={VictoryTheme[props.themeKey]}
+          tickValues={["one", "two", "three", "four", "five"]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/domain.stories.tsx b/stories/victory-charts/victory-polar-axis/domain.stories.tsx
index 7c74c975b..dbf2a0755 100644
--- a/stories/victory-charts/victory-polar-axis/domain.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/domain.stories.tsx
@@ -1,71 +1,71 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getValues } from "../../utils/data";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const Domain: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getValues(5)}
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={getValues(5)}
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={[8, 9, 10, 11, 12, 13]}
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={[8, 9, 10, 11, 12, 13]}
-        domain={[-10, 10]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={["cat", "dog", "bird"]}
-        domain={[-2, 2]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={["cat", "dog", "bird"]}
-        domain={[-2, 2]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getValues } from "../../utils/data";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const Domain: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getValues(5)}
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={getValues(5)}
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={[8, 9, 10, 11, 12, 13]}
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={[8, 9, 10, 11, 12, 13]}
+        domain={[-10, 10]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={["cat", "dog", "bird"]}
+        domain={[-2, 2]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={["cat", "dog", "bird"]}
+        domain={[-2, 2]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx b/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx
index 661b3850f..5a277b2ab 100644
--- a/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx
@@ -1,41 +1,56 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const LabelPlacement: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}  labelPlacement="parallel" />
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}
-        
-        dependentAxis
-        axisAngle={45}
-        labelPlacement="parallel"
-      />
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}  labelPlacement="perpendicular" />
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}
-        
-        dependentAxis
-        axisAngle={45}
-        labelPlacement="perpendicular"
-      />
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}  labelPlacement="vertical" />
-      <VictoryPolarAxis {...props} theme={VictoryTheme[props.themeKey]}
-        
-        dependentAxis
-        axisAngle={45}
-        labelPlacement="vertical"
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const LabelPlacement: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelPlacement="parallel"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        labelPlacement="parallel"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelPlacement="perpendicular"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        labelPlacement="perpendicular"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        labelPlacement="vertical"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        labelPlacement="vertical"
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/scale.stories.tsx b/stories/victory-charts/victory-polar-axis/scale.stories.tsx
index 171634ffa..185f34dc2 100644
--- a/stories/victory-charts/victory-polar-axis/scale.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/scale.stories.tsx
@@ -1,47 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getTimeValues } from "../../utils/data";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const Scale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getTimeValues(5)}
-        scale="time"
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={getTimeValues(5)}
-        scale="time"
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={[1, 5, 10, 50, 500, 10000]}
-        scale="log"
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        tickValues={[1, 5, 10, 50, 500, 10000]}
-        scale="log"
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getTimeValues } from "../../utils/data";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const Scale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getTimeValues(5)}
+        scale="time"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={getTimeValues(5)}
+        scale="time"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={[1, 5, 10, 50, 500, 10000]}
+        scale="log"
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        tickValues={[1, 5, 10, 50, 500, 10000]}
+        scale="log"
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/style.stories.tsx b/stories/victory-charts/victory-polar-axis/style.stories.tsx
index 4841d5465..be5fe2881 100644
--- a/stories/victory-charts/victory-polar-axis/style.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/style.stories.tsx
@@ -1,43 +1,43 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const Style: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        style={{
-          axis: { stroke: "#756f6a" },
-          axisLabel: { fontSize: 20, padding: 30 },
-          grid: { stroke: ({ tick }) => (tick > 0.5 ? "red" : "grey") },
-          ticks: { stroke: "grey", size: 5 },
-          tickLabels: { fontSize: 15, padding: 5 },
-        }}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        style={{
-          axis: { stroke: "#756f6a" },
-          axisLabel: { fontSize: 20, padding: 30 },
-          grid: { stroke: ({ tick }) => (tick > 0.5 ? "red" : "grey") },
-          ticks: { stroke: "grey", size: 5 },
-          tickLabels: { fontSize: 15, padding: 5 },
-        }}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const Style: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        style={{
+          axis: { stroke: "#756f6a" },
+          axisLabel: { fontSize: 20, padding: 30 },
+          grid: { stroke: ({ tick }) => (tick > 0.5 ? "red" : "grey") },
+          ticks: { stroke: "grey", size: 5 },
+          tickLabels: { fontSize: 15, padding: 5 },
+        }}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        style={{
+          axis: { stroke: "#756f6a" },
+          axisLabel: { fontSize: 20, padding: 30 },
+          grid: { stroke: ({ tick }) => (tick > 0.5 ? "red" : "grey") },
+          ticks: { stroke: "grey", size: 5 },
+          tickLabels: { fontSize: 15, padding: 5 },
+        }}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx b/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx
index cb810cda4..a74cd2a51 100644
--- a/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx
@@ -1,49 +1,49 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getValues } from "../../utils/data";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const TickFormat: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getValues(5)}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickValues={getValues(5)}
-        tickFormat={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getValues(5)}
-        tickFormat={(t) => `#${t}`}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickValues={getValues(5)}
-        tickFormat={(t) => `#${t}`}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getValues } from "../../utils/data";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const TickFormat: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getValues(5)}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickValues={getValues(5)}
+        tickFormat={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getValues(5)}
+        tickFormat={(t) => `#${t}`}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickValues={getValues(5)}
+        tickFormat={(t) => `#${t}`}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx b/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx
index daf999357..46dfbb1c1 100644
--- a/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx
+++ b/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx
@@ -1,57 +1,57 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryPolarAxis, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getRandomValues, getValues } from "../../utils/data";
-
-const meta: Meta<typeof VictoryPolarAxis> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPolarAxis",
-};
-
-export const TickValues: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getValues(5)}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickValues={getValues(5)}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={getRandomValues(5)}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickValues={getRandomValues(5)}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        tickValues={["one", "two", "three", "four", "five"]}
-      />
-      <VictoryPolarAxis
-        {...props}
-        theme={VictoryTheme[props.themeKey]}
-        dependentAxis
-        axisAngle={45}
-        tickValues={["one", "two", "three", "four", "five"]}
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryPolarAxis, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getRandomValues, getValues } from "../../utils/data";
+
+const meta: Meta<typeof VictoryPolarAxis> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPolarAxis",
+};
+
+export const TickValues: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getValues(5)}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickValues={getValues(5)}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={getRandomValues(5)}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickValues={getRandomValues(5)}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        tickValues={["one", "two", "three", "four", "five"]}
+      />
+      <VictoryPolarAxis
+        {...props}
+        theme={VictoryTheme[props.themeKey]}
+        dependentAxis
+        axisAngle={45}
+        tickValues={["one", "two", "three", "four", "five"]}
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-portal/default.stories.tsx b/stories/victory-charts/victory-portal/default.stories.tsx
index e81060068..e319baf86 100644
--- a/stories/victory-charts/victory-portal/default.stories.tsx
+++ b/stories/victory-charts/victory-portal/default.stories.tsx
@@ -1,60 +1,60 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryBar,
-  VictoryPortal,
-  VictoryChart,
-  VictoryGroup,
-  VictoryLabel,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryPortal> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryPortal",
-};
-
-export const Default: Story = {
-  args: {},
-  render: (props) => (
-    <div style={{ height: "400px" }}>
-      <VictoryChart domainPadding={{ x: 50 }}>
-        <VictoryGroup offset={15}>
-          <VictoryBar
-            labels={["apples", "bananas", "cherries"]}
-            style={{
-              labels: { fontSize: 20, fill: "tomato" },
-            }}
-            labelComponent={
-              <VictoryPortal {...props}>
-                <VictoryLabel />
-              </VictoryPortal>
-            }
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 5 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 1 },
-              { x: 3, y: 7 },
-            ]}
-          />
-          <VictoryBar
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 4 },
-              { x: 3, y: 9 },
-            ]}
-          />
-        </VictoryGroup>
-      </VictoryChart>
-    </div>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryBar,
+  VictoryPortal,
+  VictoryChart,
+  VictoryGroup,
+  VictoryLabel,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryPortal> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryPortal",
+};
+
+export const Default: Story = {
+  args: {},
+  render: (props) => (
+    <div style={{ height: "400px" }}>
+      <VictoryChart domainPadding={{ x: 50 }}>
+        <VictoryGroup offset={15}>
+          <VictoryBar
+            labels={["apples", "bananas", "cherries"]}
+            style={{
+              labels: { fontSize: 20, fill: "tomato" },
+            }}
+            labelComponent={
+              <VictoryPortal {...props}>
+                <VictoryLabel />
+              </VictoryPortal>
+            }
+            data={[
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 5 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 2 },
+              { x: 2, y: 1 },
+              { x: 3, y: 7 },
+            ]}
+          />
+          <VictoryBar
+            data={[
+              { x: 1, y: 3 },
+              { x: 2, y: 4 },
+              { x: 3, y: 9 },
+            ]}
+          />
+        </VictoryGroup>
+      </VictoryChart>
+    </div>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx b/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx
index 1db17b8b0..ff7233cb0 100644
--- a/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx
+++ b/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx
@@ -1,80 +1,80 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const BubbleCharts: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter {...props} data={getData(10)} bubbleProperty="x" />
-      </VictoryChart>
-      <VictoryChart
-        theme={VictoryTheme[props.themeKey]}
-        domainPadding={25}
-        horizontal
-      >
-        <VictoryScatter {...props} data={getData(10)} bubbleProperty="x" />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          maxBubbleSize={25}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          minBubbleSize={10}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          minBubbleSize={8}
-          maxBubbleSize={20}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          maxBubbleSize={25}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          size={3}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
-        <VictoryScatter
-          {...props}
-          data={getData(10)}
-          bubbleProperty="x"
-          symbol="plus"
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const BubbleCharts: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter {...props} data={getData(10)} bubbleProperty="x" />
+      </VictoryChart>
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={25}
+        horizontal
+      >
+        <VictoryScatter {...props} data={getData(10)} bubbleProperty="x" />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          maxBubbleSize={25}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          minBubbleSize={10}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          minBubbleSize={8}
+          maxBubbleSize={20}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          maxBubbleSize={25}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          size={3}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={25}>
+        <VictoryScatter
+          {...props}
+          data={getData(10)}
+          bubbleProperty="x"
+          symbol="plus"
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/data-accessors.stories.tsx b/stories/victory-charts/victory-scatter/data-accessors.stories.tsx
index 929472256..a6f8d697e 100644
--- a/stories/victory-charts/victory-scatter/data-accessors.stories.tsx
+++ b/stories/victory-charts/victory-scatter/data-accessors.stories.tsx
@@ -1,85 +1,85 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const DataAccessors: Story = {
-  args: {
-    data: [
-      { animal: "Cat", pet: 45, wild: 17 },
-      { animal: "Dog", pet: 85, wild: 6 },
-      { animal: "Fish", pet: 55, wild: 0 },
-      { animal: "Bird", pet: 15, wild: 40 },
-      { animal: "Monkey", pet: 5, wild: 40 },
-    ],
-  },
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          labels={({ datum }) => datum.animal}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          labels={({ datum }) => datum.animal}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]} innerRadius={30}>
-        <VictoryScatter
-          {...props}
-          labels={({ datum }) => datum.animal}
-          x={"animal"}
-          y={(data) => data.pet + data.wild}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props} data={getData(8)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={[
-            { a: { b: { c: 1, d: 1 } } },
-            { a: { b: { c: 2, d: 3 } } },
-            { a: { b: { c: 3, d: 2 } } },
-          ]}
-          x={"a.b.c"}
-          y={"a.b.d"}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={[
-            { x: "Cat", y: 45, y0: 17 },
-            { x: "Dog", y: 85, y0: 6 },
-            { x: "Fish", y: 55, y0: 9 },
-            { x: "Bird", y: 15, y0: 4 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
-        <VictoryScatter {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const DataAccessors: Story = {
+  args: {
+    data: [
+      { animal: "Cat", pet: 45, wild: 17 },
+      { animal: "Dog", pet: 85, wild: 6 },
+      { animal: "Fish", pet: 55, wild: 0 },
+      { animal: "Bird", pet: 15, wild: 40 },
+      { animal: "Monkey", pet: 5, wild: 40 },
+    ],
+  },
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          labels={({ datum }) => datum.animal}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          labels={({ datum }) => datum.animal}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]} innerRadius={30}>
+        <VictoryScatter
+          {...props}
+          labels={({ datum }) => datum.animal}
+          x={"animal"}
+          y={(data) => data.pet + data.wild}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter {...props} data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={[
+            { a: { b: { c: 1, d: 1 } } },
+            { a: { b: { c: 2, d: 3 } } },
+            { a: { b: { c: 3, d: 2 } } },
+          ]}
+          x={"a.b.c"}
+          y={"a.b.d"}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={[
+            { x: "Cat", y: 45, y0: 17 },
+            { x: "Dog", y: 85, y0: 6 },
+            { x: "Fish", y: 55, y0: 9 },
+            { x: "Bird", y: 15, y0: 4 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar>
+        <VictoryScatter {...props} y={(d) => Math.sin(2 * Math.PI * d.x)} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/domain.stories.tsx b/stories/victory-charts/victory-scatter/domain.stories.tsx
index f19d270d9..c4f28a248 100644
--- a/stories/victory-charts/victory-scatter/domain.stories.tsx
+++ b/stories/victory-charts/victory-scatter/domain.stories.tsx
@@ -14,9 +14,9 @@ export const Domain: Story = {
   args: {},
   render: (props) => (
     <>
-      <VictoryScatter {...props}
+      <VictoryScatter
+        {...props}
         data={getData(5)}
-       
         domain={{ x: [0, 4], y: [5, 10] }}
       />
       <VictoryChart minDomain={{ x: 3 }}>
diff --git a/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx b/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx
index f2a702def..4de8cc5f1 100644
--- a/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx
+++ b/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx
@@ -1,79 +1,79 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  ScatterSymbolType,
-  VictoryScatter,
-  VictoryChart,
-  VictoryTheme,
-} from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-const SYMBOLS: ScatterSymbolType[] = [
-  "circle",
-  "cross",
-  "diamond",
-  "plus",
-  "minus",
-  "square",
-  "star",
-  "triangleDown",
-  "triangleUp",
-];
-
-export const FunctionalSymbols: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={getMixedData(8)}
-          symbol={({ index }) => SYMBOLS[index]}
-          labels={({ index }) => SYMBOLS[index]}
-          size={8}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-        <VictoryScatter
-          {...props}
-          data={getMixedData(8)}
-          symbol={({ index }) => SYMBOLS[index]}
-          labels={({ index }) => SYMBOLS[index]}
-          size={8}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={[
-            { x: 1, y: 45, symbol: "star" },
-            { x: 2, y: 85 },
-            { x: 3, y: 55, symbol: "square" },
-            { x: 4, y: 15 },
-          ]}
-          symbol="plus"
-          size={8}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} polar innerRadius={30}>
-        <VictoryScatter
-          {...props}
-          data={getData(8)}
-          symbol={({ index }) => SYMBOLS[index]}
-          labels={({ index }) => SYMBOLS[index]}
-          size={8}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  ScatterSymbolType,
+  VictoryScatter,
+  VictoryChart,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+const SYMBOLS: ScatterSymbolType[] = [
+  "circle",
+  "cross",
+  "diamond",
+  "plus",
+  "minus",
+  "square",
+  "star",
+  "triangleDown",
+  "triangleUp",
+];
+
+export const FunctionalSymbols: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(8)}
+          symbol={({ index }) => SYMBOLS[index]}
+          labels={({ index }) => SYMBOLS[index]}
+          size={8}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(8)}
+          symbol={({ index }) => SYMBOLS[index]}
+          labels={({ index }) => SYMBOLS[index]}
+          size={8}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={[
+            { x: 1, y: 45, symbol: "star" },
+            { x: 2, y: 85 },
+            { x: 3, y: 55, symbol: "square" },
+            { x: 4, y: 15 },
+          ]}
+          symbol="plus"
+          size={8}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]} polar innerRadius={30}>
+        <VictoryScatter
+          {...props}
+          data={getData(8)}
+          symbol={({ index }) => SYMBOLS[index]}
+          labels={({ index }) => SYMBOLS[index]}
+          size={8}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/labels.stories.tsx b/stories/victory-charts/victory-scatter/labels.stories.tsx
index 531d77d83..cc3b3f37e 100644
--- a/stories/victory-charts/victory-scatter/labels.stories.tsx
+++ b/stories/victory-charts/victory-scatter/labels.stories.tsx
@@ -1,44 +1,47 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryScatter, VictoryChart } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Labels: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart>
-        <VictoryScatter {...props}
-          data={getData(7)}
-          labels={({ datum }) => `x: ${datum.x}`}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryScatter {...props}
-          data={getData(7)}
-          labels={["", "", "three", "four", "5", "six"]}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryScatter {...props}
-          data={[
-            { x: 1, y: 2, label: "cat" },
-            { x: 2, y: 5, label: "dog" },
-            { x: 3, y: 3, label: "dog" },
-            { x: 4, y: -2, label: "bird" },
-            { x: 5, y: -5, label: "cat" },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryScatter, VictoryChart } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Labels: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart>
+        <VictoryScatter
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => `x: ${datum.x}`}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryScatter
+          {...props}
+          data={getData(7)}
+          labels={["", "", "three", "four", "5", "six"]}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryScatter
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "cat" },
+            { x: 2, y: 5, label: "dog" },
+            { x: 3, y: 3, label: "dog" },
+            { x: 4, y: -2, label: "bird" },
+            { x: 5, y: -5, label: "cat" },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/polar.stories.tsx b/stories/victory-charts/victory-scatter/polar.stories.tsx
index 7abe68f9e..dbe2512a1 100644
--- a/stories/victory-charts/victory-scatter/polar.stories.tsx
+++ b/stories/victory-charts/victory-scatter/polar.stories.tsx
@@ -1,74 +1,74 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryScatter,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Polar: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props} data={getData(7)} />
-      </VictoryChart>
-      <VictoryChart
-        polar
-        theme={VictoryTheme[props.themeKey]}
-        minDomain={{ y: 1 }}
-      >
-        <VictoryScatter
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-            { x: "Frog", y: 75 },
-          ]}
-        />
-      </VictoryChart>
-      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryScatter {...props} data={getData(5)} />
-          <VictoryScatter {...props} data={getData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack>
-          <VictoryScatter {...props} data={getData(5)} />
-          <VictoryScatter {...props} data={getData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryScatter,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Polar: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter {...props} data={getData(7)} />
+      </VictoryChart>
+      <VictoryChart
+        polar
+        theme={VictoryTheme[props.themeKey]}
+        minDomain={{ y: 1 }}
+      >
+        <VictoryScatter
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+            { x: "Frog", y: 75 },
+          ]}
+        />
+      </VictoryChart>
+      <VictoryChart polar theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryScatter {...props} data={getData(5)} />
+          <VictoryScatter {...props} data={getData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart polar innerRadius={50} theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack>
+          <VictoryScatter {...props} data={getData(5)} />
+          <VictoryScatter {...props} data={getData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/stacked.stories.tsx b/stories/victory-charts/victory-scatter/stacked.stories.tsx
index 10c8ca992..2d7d6da61 100644
--- a/stories/victory-charts/victory-scatter/stacked.stories.tsx
+++ b/stories/victory-charts/victory-scatter/stacked.stories.tsx
@@ -1,76 +1,76 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryScatter,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Stacked: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(7)} />
-          <VictoryScatter {...props} data={getData(7, "seed-1")} />
-          <VictoryScatter {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(9)} />
-          <VictoryScatter {...props} data={getData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(7)} />
-          <VictoryScatter {...props} data={getData(7, "seed-1")} />
-          <VictoryScatter {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(9)} />
-          <VictoryScatter {...props} data={getData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(7)} />
-          <VictoryScatter {...props} data={getData(7, "seed-1")} />
-          <VictoryScatter {...props} data={getData(7, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart
-        domainPadding={{ y: 20 }}
-        polar
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(9)} />
-          <VictoryScatter {...props} data={getData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getData(3, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryScatter,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Stacked: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(7)} />
+          <VictoryScatter {...props} data={getData(7, "seed-1")} />
+          <VictoryScatter {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(9)} />
+          <VictoryScatter {...props} data={getData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(7)} />
+          <VictoryScatter {...props} data={getData(7, "seed-1")} />
+          <VictoryScatter {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(9)} />
+          <VictoryScatter {...props} data={getData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(7)} />
+          <VictoryScatter {...props} data={getData(7, "seed-1")} />
+          <VictoryScatter {...props} data={getData(7, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart
+        domainPadding={{ y: 20 }}
+        polar
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryStack colorScale="qualitative" labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(9)} />
+          <VictoryScatter {...props} data={getData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getData(3, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/styles.stories.tsx b/stories/victory-charts/victory-scatter/styles.stories.tsx
index 1889e2e64..b3016b4f5 100644
--- a/stories/victory-charts/victory-scatter/styles.stories.tsx
+++ b/stories/victory-charts/victory-scatter/styles.stories.tsx
@@ -1,49 +1,49 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Styles: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={getData(7)}
-          labels={({ datum }) => datum.x}
-          style={{
-            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
-            data: { fill: "tomato" },
-          }}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          style={{
-            data: {
-              fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"),
-            },
-          }}
-          labels={({ datum }) => datum.x}
-          data={[
-            { x: "Cat", y: 62 },
-            { x: "Dog", y: 91 },
-            { x: "Fish", y: 55 },
-            { x: "Bird", y: 55 },
-          ]}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Styles: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getData(7)}
+          labels={({ datum }) => datum.x}
+          style={{
+            labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" },
+            data: { fill: "tomato" },
+          }}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          style={{
+            data: {
+              fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"),
+            },
+          }}
+          labels={({ datum }) => datum.x}
+          data={[
+            { x: "Cat", y: 62 },
+            { x: "Dog", y: 91 },
+            { x: "Fish", y: 55 },
+            { x: "Bird", y: 55 },
+          ]}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/theme.stories.tsx b/stories/victory-charts/victory-scatter/theme.stories.tsx
index 99f6335a1..6dd9263f9 100644
--- a/stories/victory-charts/victory-scatter/theme.stories.tsx
+++ b/stories/victory-charts/victory-scatter/theme.stories.tsx
@@ -1,67 +1,75 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryScatter, VictoryChart, VictoryStack, VictoryTheme } from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Theme: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart>
-        <VictoryScatter {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(8)} />
-          <VictoryScatter {...props} data={getData(8, "seed-1")} />
-          <VictoryScatter {...props} data={getData(8, "seed-2")} />
-          <VictoryScatter {...props} data={getData(8, "seed-3")} />
-          <VictoryScatter {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.material}>
-        <VictoryScatter {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.material}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(8)} />
-          <VictoryScatter {...props} data={getData(8, "seed-1")} />
-          <VictoryScatter {...props} data={getData(8, "seed-2")} />
-          <VictoryScatter {...props} data={getData(8, "seed-3")} />
-          <VictoryScatter {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryScatter {...props}
-          data={getMixedData(8)}
-          labels={({ datum }) => datum.x}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme.clean}>
-        <VictoryStack labels={({ datum }) => datum.x}>
-          <VictoryScatter {...props} data={getData(8)} />
-          <VictoryScatter {...props} data={getData(8, "seed-1")} />
-          <VictoryScatter {...props} data={getData(8, "seed-2")} />
-          <VictoryScatter {...props} data={getData(8, "seed-3")} />
-          <VictoryScatter {...props} data={getData(8, "seed-4")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryScatter,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Theme: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(8)} />
+          <VictoryScatter {...props} data={getData(8, "seed-1")} />
+          <VictoryScatter {...props} data={getData(8, "seed-2")} />
+          <VictoryScatter {...props} data={getData(8, "seed-3")} />
+          <VictoryScatter {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.material}>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.material}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(8)} />
+          <VictoryScatter {...props} data={getData(8, "seed-1")} />
+          <VictoryScatter {...props} data={getData(8, "seed-2")} />
+          <VictoryScatter {...props} data={getData(8, "seed-3")} />
+          <VictoryScatter {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(8)}
+          labels={({ datum }) => datum.x}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme.clean}>
+        <VictoryStack labels={({ datum }) => datum.x}>
+          <VictoryScatter {...props} data={getData(8)} />
+          <VictoryScatter {...props} data={getData(8, "seed-1")} />
+          <VictoryScatter {...props} data={getData(8, "seed-2")} />
+          <VictoryScatter {...props} data={getData(8, "seed-3")} />
+          <VictoryScatter {...props} data={getData(8, "seed-4")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/time-scale.stories.tsx b/stories/victory-charts/victory-scatter/time-scale.stories.tsx
index 85d159eb3..ffe75ddd9 100644
--- a/stories/victory-charts/victory-scatter/time-scale.stories.tsx
+++ b/stories/victory-charts/victory-scatter/time-scale.stories.tsx
@@ -1,54 +1,54 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryScatter,
-  VictoryChart,
-  VictoryStack,
-  VictoryTheme,
-} from "@/victory";
-import { Story, ComponentMeta } from "./config";
-import { getTimeData } from "../../utils/data";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const TimeScale: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter
-          {...props}
-          data={getTimeData(5)}
-          labels={({ datum }) => datum.x.getFullYear()}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryScatter {...props} data={getTimeData(5)} />
-          <VictoryScatter {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
-          <VictoryScatter {...props} data={getTimeData(5)} />
-          <VictoryScatter {...props} data={getTimeData(5, "seed-1")} />
-          <VictoryScatter {...props} data={getTimeData(5, "seed-2")} />
-        </VictoryStack>
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryScatter,
+  VictoryChart,
+  VictoryStack,
+  VictoryTheme,
+} from "@/victory";
+import { Story, ComponentMeta } from "./config";
+import { getTimeData } from "../../utils/data";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const TimeScale: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getTimeData(5)}
+          labels={({ datum }) => datum.x.getFullYear()}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryScatter {...props} data={getTimeData(5)} />
+          <VictoryScatter {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryStack labels={({ datum }) => datum.x.getFullYear()}>
+          <VictoryScatter {...props} data={getTimeData(5)} />
+          <VictoryScatter {...props} data={getTimeData(5, "seed-1")} />
+          <VictoryScatter {...props} data={getTimeData(5, "seed-2")} />
+        </VictoryStack>
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-scatter/tooltips.stories.tsx b/stories/victory-charts/victory-scatter/tooltips.stories.tsx
index 989a5288c..b7cf982dc 100644
--- a/stories/victory-charts/victory-scatter/tooltips.stories.tsx
+++ b/stories/victory-charts/victory-scatter/tooltips.stories.tsx
@@ -1,55 +1,59 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import {
-  VictoryScatter,
-  VictoryChart,
-  VictoryTheme,
-  VictoryTooltip,
-} from "@/victory";
-
-import { getData, getMixedData } from "../../utils/data";
-import { Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryScatter> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryScatter",
-};
-
-export const Tooltips: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props}
-          data={getData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props}
-          data={getMixedData(5)}
-          labels={({ datum }) => `x: ${datum.x}`}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}>
-        <VictoryScatter {...props}
-          data={getData(5)}
-          labels={["one", "two", "3", "wow, four tooltips", "five"]}
-          labelComponent={<VictoryTooltip active />}
-        />
-      </VictoryChart>
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryScatter,
+  VictoryChart,
+  VictoryTheme,
+  VictoryTooltip,
+} from "@/victory";
+
+import { getData, getMixedData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryScatter> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryScatter",
+};
+
+export const Tooltips: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart horizontal theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getMixedData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryScatter
+          {...props}
+          data={getData(5)}
+          labels={["one", "two", "3", "wow, four tooltips", "five"]}
+          labelComponent={<VictoryTooltip active />}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/center-offset.stories.tsx b/stories/victory-charts/victory-tooltip/center-offset.stories.tsx
index e2c04eb97..e4faaa320 100644
--- a/stories/victory-charts/victory-tooltip/center-offset.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/center-offset.stories.tsx
@@ -1,162 +1,162 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const CenterOffset: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20 }}
-            text={`x\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20 }}
-            text={`x\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20 }}
-            text={`x\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: 20 }}
-            text={`y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: 20 }}
-            text={`y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: 20 }}
-            text={`y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20, y: 20 }}
-            text={`x, y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20, y: 20 }}
-            text={`x, y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: 20, y: 20 }}
-            text={`x, y\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: ({ datum }) => (datum.y < 0 ? 10 : -10), x: 10 }}
-            text={`function\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              x: ({ datum }) => (datum.y < 0 ? -10 : 10),
-              y: -10,
-            }}
-            text={`function\noffset`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              y: ({ index }) => (Number(index) < 3 ? -10 : 10),
-              x: 10,
-            }}
-            text={`function\noffset`}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const CenterOffset: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20 }}
+            text={`x\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20 }}
+            text={`x\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20 }}
+            text={`x\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: 20 }}
+            text={`y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: 20 }}
+            text={`y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: 20 }}
+            text={`y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20, y: 20 }}
+            text={`x, y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20, y: 20 }}
+            text={`x, y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: 20, y: 20 }}
+            text={`x, y\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: ({ datum }) => (datum.y < 0 ? 10 : -10), x: 10 }}
+            text={`function\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              x: ({ datum }) => (datum.y < 0 ? -10 : 10),
+              y: -10,
+            }}
+            text={`function\noffset`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              y: ({ index }) => (Number(index) < 3 ? -10 : 10),
+              x: 10,
+            }}
+            text={`function\noffset`}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx b/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx
index 20c29cb1b..7f4e851f3 100644
--- a/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx
@@ -1,86 +1,86 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const ConstrainToVisibleArea: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            constrainToVisibleArea
-            centerOffset={{
-              y: ({ datum }) => (datum.y > 0 ? -40 : 40),
-              x: ({ datum }) => (datum.y > 0 ? -20 : 20),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
-            text={`constrain\nto\nvisible\narea`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            constrainToVisibleArea
-            centerOffset={{
-              y: ({ datum }) => (datum.y > 0 ? -60 : 60),
-              x: ({ datum }) => (datum.y > 0 ? -10 : 10),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
-            text={`constrain to\nvisible area`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            constrainToVisibleArea
-            centerOffset={{
-              x: ({ datum }) => (datum.y > 0 ? 70 : -70),
-              y: ({ datum }) => (datum.y > 0 ? -10 : 10),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
-            text={`constrain to\nvisible area`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            constrainToVisibleArea
-            centerOffset={{
-              x: ({ datum }) => (datum.y > 0 ? 70 : -70),
-              y: ({ datum }) => (datum.y > 0 ? -10 : 10),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
-            text={`constrain\nto\nvisible\narea`}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const ConstrainToVisibleArea: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            constrainToVisibleArea
+            centerOffset={{
+              y: ({ datum }) => (datum.y > 0 ? -40 : 40),
+              x: ({ datum }) => (datum.y > 0 ? -20 : 20),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
+            text={`constrain\nto\nvisible\narea`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            constrainToVisibleArea
+            centerOffset={{
+              y: ({ datum }) => (datum.y > 0 ? -60 : 60),
+              x: ({ datum }) => (datum.y > 0 ? -10 : 10),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
+            text={`constrain to\nvisible area`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            constrainToVisibleArea
+            centerOffset={{
+              x: ({ datum }) => (datum.y > 0 ? 70 : -70),
+              y: ({ datum }) => (datum.y > 0 ? -10 : 10),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
+            text={`constrain to\nvisible area`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            constrainToVisibleArea
+            centerOffset={{
+              x: ({ datum }) => (datum.y > 0 ? 70 : -70),
+              y: ({ datum }) => (datum.y > 0 ? -10 : 10),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
+            text={`constrain\nto\nvisible\narea`}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx b/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx
index 04e165735..345d55bee 100644
--- a/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx
@@ -1,88 +1,88 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const CornerRadius: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={10}
-            text={`cornerRadius\n10`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={10}
-            text={`cornerRadius\n10`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={10}
-            text={`cornerRadius\n10`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
-            text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
-            text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
-            text={({ index }) => (Number(index) > 2 ? "square" : "rounded ")}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const CornerRadius: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={10}
+            text={`cornerRadius\n10`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={10}
+            text={`cornerRadius\n10`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={10}
+            text={`cornerRadius\n10`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
+            text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
+            text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            cornerRadius={({ text }) => (text === "square" ? 0 : 5)}
+            text={({ index }) => (Number(index) > 2 ? "square" : "rounded ")}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx
index ee59e7a35..0e8f61201 100644
--- a/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx
@@ -1,88 +1,88 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const FlyoutHeight: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={50}
-            text={`flyoutHeight\n50`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={50}
-            text={`flyoutHeight\n50`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={50}
-            text={`flyoutHeight\n50`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "tall")}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "tall")}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
-            text={({ index }) => (Number(index) > 2 ? "short" : "tall")}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const FlyoutHeight: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={50}
+            text={`flyoutHeight\n50`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={50}
+            text={`flyoutHeight\n50`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={50}
+            text={`flyoutHeight\n50`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "tall")}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "tall")}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutHeight={({ text }) => (text === "short" ? 20 : 50)}
+            text={({ index }) => (Number(index) > 2 ? "short" : "tall")}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx
index 95c4a6a15..7fde1f076 100644
--- a/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx
@@ -1,67 +1,67 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const FlyoutPadding: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutPadding={{ top: 20, left: 15, right: 5 }}
-            text={`flyoutPadding`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutPadding={{ top: 30, bottom: 10 }}
-            text={`flyoutPadding\nhorizontal`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutPadding={({ datum }) =>
-              datum.y > 0 ? { top: 20, left: 15, right: 5 } : 2
-            }
-            text={`flyoutPadding\nfunction`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutPadding={{ top: 20, left: 15, right: 5 }}
-            text={`flyoutPadding\npolar`}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const FlyoutPadding: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutPadding={{ top: 20, left: 15, right: 5 }}
+            text={`flyoutPadding`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutPadding={{ top: 30, bottom: 10 }}
+            text={`flyoutPadding\nhorizontal`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutPadding={({ datum }) =>
+              datum.y > 0 ? { top: 20, left: 15, right: 5 } : 2
+            }
+            text={`flyoutPadding\nfunction`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutPadding={{ top: 20, left: 15, right: 5 }}
+            text={`flyoutPadding\npolar`}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx
index 0c616de89..93391fc3f 100644
--- a/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx
@@ -1,66 +1,66 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const FlyoutStyle: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            style={{ padding: 5, fontFamily: "arial" }}
-            flyoutStyle={{
-              stroke: "red",
-              strokeWidth: 2,
-              strokeDasharray: "1, 2",
-            }}
-            text={`flyoutStyle`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            style={{ padding: 5, fill: "red", fontFamily: "arial" }}
-            flyoutStyle={{
-              fill: "pink",
-              strokeWidth: 0,
-              opacity: 0.5,
-              padding: 10,
-            }}
-            text={`flyoutStyle`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            style={{ padding: 10, fontFamily: "arial" }}
-            flyoutStyle={{ fill: "cyan", strokeWidth: 0, opacity: 0.5 }}
-            text={`flyoutStyle\npolar`}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const FlyoutStyle: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            style={{ padding: 5, fontFamily: "arial" }}
+            flyoutStyle={{
+              stroke: "red",
+              strokeWidth: 2,
+              strokeDasharray: "1, 2",
+            }}
+            text={`flyoutStyle`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            style={{ padding: 5, fill: "red", fontFamily: "arial" }}
+            flyoutStyle={{
+              fill: "pink",
+              strokeWidth: 0,
+              opacity: 0.5,
+              padding: 10,
+            }}
+            text={`flyoutStyle`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            style={{ padding: 10, fontFamily: "arial" }}
+            flyoutStyle={{ fill: "cyan", strokeWidth: 0, opacity: 0.5 }}
+            text={`flyoutStyle\npolar`}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx
index 3142abd02..c2e41ba3a 100644
--- a/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx
@@ -1,88 +1,88 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const FlyoutWidth: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={100}
-            text={`flyoutWidth\n100`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={100}
-            text={`flyoutWidth\n100`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={100}
-            text={`flyoutWidth\n100`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "long")}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "long")}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
-            text={({ index }) => (Number(index) > 2 ? "short" : "long")}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const FlyoutWidth: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={100}
+            text={`flyoutWidth\n100`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={100}
+            text={`flyoutWidth\n100`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={100}
+            text={`flyoutWidth\n100`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "long")}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "long")}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            flyoutWidth={({ text }) => (text === "short" ? 35 : 100)}
+            text={({ index }) => (Number(index) > 2 ? "short" : "long")}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx
index bcc7f9513..a134301ab 100644
--- a/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx
@@ -1,96 +1,96 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const PointerLength: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: ({ index }) => (index === 0 ? -20 : 0) }}
-            pointerLength={30}
-            text={`pointerLength\n30`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerLength={30}
-            centerOffset={{ y: ({ index }) => (index === 0 ? 20 : 0) }}
-            text={`pointerLength\n30`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerLength={30}
-            centerOffset={{ x: ({ index }) => (index === 0 ? 20 : 0) }}
-            text={`pointerLength\n30`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
-            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "long ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
-            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
-            text={({ datum }) => (datum.y < 0 ? "short" : "long ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              x: ({ index }) => (index === 0 || index === 4 ? 20 : 0),
-            }}
-            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
-            text={({ index }) => (Number(index) > 2 ? "short" : "long ")}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const PointerLength: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: ({ index }) => (index === 0 ? -20 : 0) }}
+            pointerLength={30}
+            text={`pointerLength\n30`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerLength={30}
+            centerOffset={{ y: ({ index }) => (index === 0 ? 20 : 0) }}
+            text={`pointerLength\n30`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerLength={30}
+            centerOffset={{ x: ({ index }) => (index === 0 ? 20 : 0) }}
+            text={`pointerLength\n30`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
+            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "long ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
+            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
+            text={({ datum }) => (datum.y < 0 ? "short" : "long ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              x: ({ index }) => (index === 0 || index === 4 ? 20 : 0),
+            }}
+            pointerLength={({ text }) => (text === "short" ? 1 : 30)}
+            text={({ index }) => (Number(index) > 2 ? "short" : "long ")}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx
index 716a56466..60b865573 100644
--- a/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx
@@ -1,113 +1,113 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const PointerOrientation: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
-            text={({ datum }) =>
-              datum.y > 0 ? `orientation\nbottom` : `orientation\ntop`
-            }
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              y: ({ datum }) => (datum.y > 0 ? -40 : 40),
-              x: ({ datum }) => (datum.y > 0 ? -20 : 20),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
-            text={({ datum }) =>
-              datum.y > 0 ? `orientation\nbottom` : `orientation\ntop`
-            }
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerOrientation={({ index }) => (index < 3 ? "bottom" : "top")}
-            text={({ index }) =>
-              Number(index) < 3 ? `orientation\nbottom` : `orientation\ntop`
-            }
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              x: ({ datum }) => (datum.y > 0 ? 55 : -55),
-            }}
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
-            text={({ datum }) =>
-              datum.y > 0 ? `orientation\nleft` : `orientation\nright`
-            }
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
-            text={({ datum }) =>
-              datum.y > 0 ? `orientation\nleft` : `orientation\nright`
-            }
-          />
-        }
-      />
-
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            labelPlacement="parallel"
-            pointerOrientation={({ index }) =>
-              index === 2 || index === 3 ? "right" : "left"
-            }
-            text={({ index }) =>
-              index === 2 || index === 3
-                ? `orientation\nleft`
-                : `orientation\nright`
-            }
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const PointerOrientation: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
+            text={({ datum }) =>
+              datum.y > 0 ? `orientation\nbottom` : `orientation\ntop`
+            }
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              y: ({ datum }) => (datum.y > 0 ? -40 : 40),
+              x: ({ datum }) => (datum.y > 0 ? -20 : 20),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")}
+            text={({ datum }) =>
+              datum.y > 0 ? `orientation\nbottom` : `orientation\ntop`
+            }
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerOrientation={({ index }) => (index < 3 ? "bottom" : "top")}
+            text={({ index }) =>
+              Number(index) < 3 ? `orientation\nbottom` : `orientation\ntop`
+            }
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              x: ({ datum }) => (datum.y > 0 ? 55 : -55),
+            }}
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
+            text={({ datum }) =>
+              datum.y > 0 ? `orientation\nleft` : `orientation\nright`
+            }
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")}
+            text={({ datum }) =>
+              datum.y > 0 ? `orientation\nleft` : `orientation\nright`
+            }
+          />
+        }
+      />
+
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            labelPlacement="parallel"
+            pointerOrientation={({ index }) =>
+              index === 2 || index === 3 ? "right" : "left"
+            }
+            text={({ index }) =>
+              index === 2 || index === 3
+                ? `orientation\nleft`
+                : `orientation\nright`
+            }
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;
diff --git a/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx
index c8e1d0a6e..b70f81925 100644
--- a/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx
+++ b/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx
@@ -1,96 +1,96 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-
-import { VictoryTooltip, VictoryBar } from "@/victory";
-import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
-
-const meta: Meta<typeof VictoryTooltip> = {
-  ...ComponentMeta,
-  title: "Victory Charts/VictoryTooltip",
-};
-
-export const PointerWidth: Story = {
-  args: {},
-  render: (props) => (
-    <>
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerWidth={20}
-            centerOffset={{ x: ({ index }) => (index === 0 ? -20 : 0) }}
-            text={`pointerWidth\n20`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerWidth={20}
-            centerOffset={{ y: ({ index }) => (index === 0 ? 20 : 0) }}
-            text={`pointerWidth\n20`}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            pointerWidth={20}
-            centerOffset={{ x: ({ index }) => (index === 0 ? 20 : 0) }}
-            text={`pointerWidth\n20`}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ x: ({ index }) => (Number(index) < 2 ? -20 : 0) }}
-            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
-            text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...defaultBarProps}
-        horizontal
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{ y: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
-            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
-            text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")}
-          />
-        }
-      />
-      <VictoryBar
-        {...polarBarProps}
-        labelComponent={
-          <VictoryTooltip
-            {...props}
-            active
-            centerOffset={{
-              x: ({ index }) => (index === 0 || index === 4 ? 20 : 0),
-            }}
-            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
-            text={({ index }) => (Number(index) > 2 ? "skinny" : "wide ")}
-          />
-        }
-      />
-    </>
-  ),
-};
-
-export default meta;
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryTooltip, VictoryBar } from "@/victory";
+import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryTooltip> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryTooltip",
+};
+
+export const PointerWidth: Story = {
+  args: {},
+  render: (props) => (
+    <>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerWidth={20}
+            centerOffset={{ x: ({ index }) => (index === 0 ? -20 : 0) }}
+            text={`pointerWidth\n20`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerWidth={20}
+            centerOffset={{ y: ({ index }) => (index === 0 ? 20 : 0) }}
+            text={`pointerWidth\n20`}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            pointerWidth={20}
+            centerOffset={{ x: ({ index }) => (index === 0 ? 20 : 0) }}
+            text={`pointerWidth\n20`}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ x: ({ index }) => (Number(index) < 2 ? -20 : 0) }}
+            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
+            text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        horizontal
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{ y: ({ index }) => (Number(index) < 2 ? 20 : 0) }}
+            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
+            text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")}
+          />
+        }
+      />
+      <VictoryBar
+        {...polarBarProps}
+        labelComponent={
+          <VictoryTooltip
+            {...props}
+            active
+            centerOffset={{
+              x: ({ index }) => (index === 0 || index === 4 ? 20 : 0),
+            }}
+            pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)}
+            text={({ index }) => (Number(index) > 2 ? "skinny" : "wide ")}
+          />
+        }
+      />
+    </>
+  ),
+};
+
+export default meta;