From d0867ea68e1cab9b30ddc501173e542e263cfe2c Mon Sep 17 00:00:00 2001
From: Srinivasa Rao Boyina <2254369+sboyina@users.noreply.github.com>
Date: Thu, 16 Jul 2026 19:52:44 +0530
Subject: [PATCH 1/4] Changed version to 1.0.5

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 284921d..8787c7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@wavemaker/react-native-echarts",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@wavemaker/react-native-echarts",
-      "version": "1.0.3",
+      "version": "1.0.5",
       "license": "MIT",
       "dependencies": {
         "@wuba/react-native-echarts": "^3.0.1",
diff --git a/package.json b/package.json
index 0b6b558..1d49546 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "data-visualization",
     "data-analysis"
   ],
-  "version": "1.0.3",
+  "version": "1.0.5",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

From fa6f0d9e6f16db8a8d5a766a698078ecc91955a6 Mon Sep 17 00:00:00 2001
From: hmonika <monika.hamand@wavemaker.com>
Date: Wed, 22 Jul 2026 09:01:21 +0530
Subject: [PATCH 2/4] Handled non-hex color strings for area opacity

---
 components/chart/area/area-chart.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/chart/area/area-chart.tsx b/components/chart/area/area-chart.tsx
index fc59fd5..e81e4a9 100644
--- a/components/chart/area/area-chart.tsx
+++ b/components/chart/area/area-chart.tsx
@@ -12,6 +12,7 @@ import {
   TooltipComponent
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
+import { parse, stringify } from 'zrender/lib/tool/color';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
 import { getAxis, valueAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
@@ -38,6 +39,12 @@ echarts.use([
   LineChart,
 ]);
 
+const applyOpacity = (colorStr: string, opacity: number) => {
+  const rgba = parse(colorStr);
+  if (!rgba) return colorStr;
+  return stringify([rgba[0], rgba[1], rgba[2], opacity], 'rgba');
+};
+
 const ChartComponent = ({
   data,
   width = 220,
@@ -308,11 +315,9 @@ const ChartComponent = ({
       const seriesColor = theme.series[index % theme.series.length].color;
       const seriesLineWidth = theme.series[index]?.lineWidth ?? theme.series[0].lineWidth ?? 2;
       
-      // Convert opacity (0-1) to hex (00-FF)
-      const opacityHex = Math.round(areaOpacity * 255).toString(16).padStart(2, '0');
-      const colorWithOpacity = seriesColor + opacityHex;
-      const transparentColor = seriesColor + '00';
-      const solidColor = seriesColor + 'ff';
+      const colorWithOpacity = applyOpacity(seriesColor, areaOpacity);
+      const transparentColor = applyOpacity(seriesColor, 0);
+      const solidColor = applyOpacity(seriesColor, 1);
       
       const areaStyleConfig =
         areaFill === 'gradient'

From ff6579cb70d4889c3b0d5d30d575f1a185acb18f Mon Sep 17 00:00:00 2001
From: hmonika <monika.hamand@wavemaker.com>
Date: Wed, 22 Jul 2026 17:10:39 +0530
Subject: [PATCH 3/4] Exposed nameGaps for axis labels

---
 components/chart/area/area-chart.tsx     |  8 ++++++--
 components/chart/bubble/bubble-chart.tsx |  8 ++++++--
 components/chart/column/column-chart.tsx |  8 ++++++--
 components/chart/props/cartesian.ts      | 10 ++++++++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/components/chart/area/area-chart.tsx b/components/chart/area/area-chart.tsx
index fc59fd5..b9fa56b 100644
--- a/components/chart/area/area-chart.tsx
+++ b/components/chart/area/area-chart.tsx
@@ -66,6 +66,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -204,7 +206,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -252,7 +254,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -450,6 +452,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     valueAxisBounds,
     categoryAxisBounds,
   ]);
diff --git a/components/chart/bubble/bubble-chart.tsx b/components/chart/bubble/bubble-chart.tsx
index 5ac92e9..ad380b4 100644
--- a/components/chart/bubble/bubble-chart.tsx
+++ b/components/chart/bubble/bubble-chart.tsx
@@ -62,6 +62,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -171,7 +173,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -210,7 +212,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -335,6 +337,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     valueAxisBounds,
     xAxisBounds,
   ]);
diff --git a/components/chart/column/column-chart.tsx b/components/chart/column/column-chart.tsx
index 8829626..1b639f8 100644
--- a/components/chart/column/column-chart.tsx
+++ b/components/chart/column/column-chart.tsx
@@ -73,6 +73,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -232,6 +234,7 @@ const ChartComponent = ({
     const categoryTickFormatter = horizontal ? yAxisTickLabelFormatter : xAxisTickLabelFormatter;
     const categoryAxisTheme = horizontal ? theme.axis.y : theme.axis.x;
     const categoryAxisTitle = horizontal ? yAxisLabel : xAxisLabel;
+    const categoryAxisNameGap = horizontal ? yAxisNameGap : xAxisNameGap;
 
     const valueShow = horizontal ? showXAxis : showYAxis;
     const valueShowTicks = horizontal ? showXAxisTicks : showYAxisTicks;
@@ -239,6 +242,7 @@ const ChartComponent = ({
     const valueTickFormatter = horizontal ? xAxisTickLabelFormatter : yAxisTickLabelFormatter;
     const valueAxisTheme = horizontal ? theme.axis.x : theme.axis.y;
     const valueAxisTitle = horizontal ? xAxisLabel : yAxisLabel;
+    const valueAxisNameGap = horizontal ? xAxisNameGap : yAxisNameGap;
 
     const categoryAxisConfig: any = {
       type: 'category',
@@ -249,7 +253,7 @@ const ChartComponent = ({
       ...(categoryAxisTitle != null && categoryAxisTitle !== '' && {
         name: categoryAxisTitle,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: categoryAxisNameGap ?? 25,
         nameTextStyle: { color: categoryAxisTheme.tickLabelColor },
       }),
       axisLabel: {
@@ -298,7 +302,7 @@ const ChartComponent = ({
       ...(valueAxisTitle != null && valueAxisTitle !== '' && {
         name: valueAxisTitle,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: valueAxisNameGap ?? 40,
         nameTextStyle: { color: valueAxisTheme.tickLabelColor },
       }),
       axisLabel: {
diff --git a/components/chart/props/cartesian.ts b/components/chart/props/cartesian.ts
index eb6e3d9..6b3f98a 100644
--- a/components/chart/props/cartesian.ts
+++ b/components/chart/props/cartesian.ts
@@ -112,6 +112,16 @@ export interface CartesianChartProps extends CommonChartProps {
    * @default undefined
    */
   yAxisLabel?: string;
+  /**
+   * Distance (px) between the X-axis caption ({@link xAxisLabel}) and the axis line/labels.
+   * @default 25 (category axis); 40 (value axis)
+   */
+  xAxisNameGap?: number;
+  /**
+   * Distance (px) between the Y-axis caption ({@link yAxisLabel}) and the axis line/labels.
+   * @default 25 (category axis); 40 (value axis)
+   */
+  yAxisNameGap?: number;
   /**
    * Grid positioning configuration.
    */

From 6bcd1d8e22d1e6bd798bc83e12fc59523fc031ac Mon Sep 17 00:00:00 2001
From: Srinivasa Rao Boyina <2254369+sboyina@users.noreply.github.com>
Date: Thu, 23 Jul 2026 10:28:34 +0530
Subject: [PATCH 4/4] Add stories about xAxisNameGap and yAxisNameGap. Added
 support for these properties in candlestick and scatter also.

---
 components/chart/candlestick/candlestick-chart.tsx     |  8 ++++++--
 components/chart/column/column-chart.tsx               |  2 ++
 components/chart/scatter/scatter-chart.tsx             |  8 ++++++--
 package.json                                           |  1 +
 stories/area/x-axis/area.x-axis.stories.tsx            |  9 +++++++++
 stories/area/y-axis/area.y-axis.stories.tsx            |  9 +++++++++
 stories/bar/x-axis/bar.x-axis.stories.tsx              |  9 +++++++++
 stories/bar/y-axis/bar.y-axis.stories.tsx              |  9 +++++++++
 stories/bubble/x-axis/bubble.x-axis.stories.tsx        |  9 +++++++++
 stories/bubble/y-axis/bubble.y-axis.stories.tsx        |  9 +++++++++
 .../candlestick/x-axis/candlestick.x-axis.stories.tsx  | 10 ++++++++++
 .../candlestick/y-axis/candlestick.y-axis.stories.tsx  | 10 ++++++++++
 stories/column/x-axis/column.x-axis.stories.tsx        |  9 +++++++++
 stories/column/y-axis/column.y-axis.stories.tsx        |  9 +++++++++
 stories/line/x-axis/line.x-axis.stories.tsx            |  9 +++++++++
 stories/line/y-axis/line.y-axis.stories.tsx            |  9 +++++++++
 stories/scatter/x-axis/scatter.x-axis.stories.tsx      |  9 +++++++++
 stories/scatter/y-axis/scatter.y-axis.stories.tsx      |  9 +++++++++
 18 files changed, 143 insertions(+), 4 deletions(-)

diff --git a/components/chart/candlestick/candlestick-chart.tsx b/components/chart/candlestick/candlestick-chart.tsx
index 1a4e03c..7bf2eef 100644
--- a/components/chart/candlestick/candlestick-chart.tsx
+++ b/components/chart/candlestick/candlestick-chart.tsx
@@ -53,6 +53,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -125,7 +127,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -161,7 +163,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -316,6 +318,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     minX,
     maxX,
     intervalX,
diff --git a/components/chart/column/column-chart.tsx b/components/chart/column/column-chart.tsx
index 8b5d9cc..111f502 100644
--- a/components/chart/column/column-chart.tsx
+++ b/components/chart/column/column-chart.tsx
@@ -623,6 +623,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     categoryAxisData,
     valueAxisBounds,
     categoryAxisBounds,
diff --git a/components/chart/scatter/scatter-chart.tsx b/components/chart/scatter/scatter-chart.tsx
index 1d633f3..e4a704c 100644
--- a/components/chart/scatter/scatter-chart.tsx
+++ b/components/chart/scatter/scatter-chart.tsx
@@ -74,6 +74,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -171,7 +173,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -213,7 +215,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -355,6 +357,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     valueAxisBounds,
     categoryAxisBounds,
   ]);
diff --git a/package.json b/package.json
index 1d49546..0e18929 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "web": "expo start --web",
     "lint": "expo lint",
     "storybook": "storybook dev -p 6006",
+    "storybook:clean": "rm -rf node_modules/.cache/storybook node_modules/.vite && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate:wmx": "node ./scripts/generate-wmx.js",
     "build:lib": "node ./scripts/build-lib.js",
diff --git a/stories/area/x-axis/area.x-axis.stories.tsx b/stories/area/x-axis/area.x-axis.stories.tsx
index 3de967f..71803e3 100644
--- a/stories/area/x-axis/area.x-axis.stories.tsx
+++ b/stories/area/x-axis/area.x-axis.stories.tsx
@@ -64,6 +64,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'Month',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed X-axis extent (category index; six points → narrow window). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/area/y-axis/area.y-axis.stories.tsx b/stories/area/y-axis/area.y-axis.stories.tsx
index 2e2058f..dd3e9d6 100644
--- a/stories/area/y-axis/area.y-axis.stories.tsx
+++ b/stories/area/y-axis/area.y-axis.stories.tsx
@@ -45,6 +45,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Revenue ($)',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed value-axis bounds (non-zero min, headroom above the series). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/bar/x-axis/bar.x-axis.stories.tsx b/stories/bar/x-axis/bar.x-axis.stories.tsx
index 9a1a9bb..026a5a3 100644
--- a/stories/bar/x-axis/bar.x-axis.stories.tsx
+++ b/stories/bar/x-axis/bar.x-axis.stories.tsx
@@ -50,6 +50,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'Count',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed value scale along X (bar length) with non-zero min. */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/bar/y-axis/bar.y-axis.stories.tsx b/stories/bar/y-axis/bar.y-axis.stories.tsx
index 995b266..bdb7494 100644
--- a/stories/bar/y-axis/bar.y-axis.stories.tsx
+++ b/stories/bar/y-axis/bar.y-axis.stories.tsx
@@ -52,6 +52,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Category',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed category extent (horizontal bar: category index along Y). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/bubble/x-axis/bubble.x-axis.stories.tsx b/stories/bubble/x-axis/bubble.x-axis.stories.tsx
index aa56799..1f0c59b 100644
--- a/stories/bubble/x-axis/bubble.x-axis.stories.tsx
+++ b/stories/bubble/x-axis/bubble.x-axis.stories.tsx
@@ -64,6 +64,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'X',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed numeric X scale (non-zero min; bubble X ≈ 10–30). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/bubble/y-axis/bubble.y-axis.stories.tsx b/stories/bubble/y-axis/bubble.y-axis.stories.tsx
index aaada64..78e21b4 100644
--- a/stories/bubble/y-axis/bubble.y-axis.stories.tsx
+++ b/stories/bubble/y-axis/bubble.y-axis.stories.tsx
@@ -59,6 +59,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Y',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed Y range with non-zero floor (bubble Y is about 15–30). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/candlestick/x-axis/candlestick.x-axis.stories.tsx b/stories/candlestick/x-axis/candlestick.x-axis.stories.tsx
index c3da151..471730b 100644
--- a/stories/candlestick/x-axis/candlestick.x-axis.stories.tsx
+++ b/stories/candlestick/x-axis/candlestick.x-axis.stories.tsx
@@ -58,6 +58,16 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisData,
+    xAxisLabel: 'Day',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed category window (five sessions → indices 1–3). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/candlestick/y-axis/candlestick.y-axis.stories.tsx b/stories/candlestick/y-axis/candlestick.y-axis.stories.tsx
index cc0adfc..d9984fe 100644
--- a/stories/candlestick/y-axis/candlestick.y-axis.stories.tsx
+++ b/stories/candlestick/y-axis/candlestick.y-axis.stories.tsx
@@ -51,6 +51,16 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisData,
+    yAxisLabel: 'Price ($)',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed price axis with non-zero floor and padding below lows / above highs. */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/column/x-axis/column.x-axis.stories.tsx b/stories/column/x-axis/column.x-axis.stories.tsx
index 5b4153f..e93dc3a 100644
--- a/stories/column/x-axis/column.x-axis.stories.tsx
+++ b/stories/column/x-axis/column.x-axis.stories.tsx
@@ -57,6 +57,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'Month',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed X-axis extent (category index; six points → narrow window). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/column/y-axis/column.y-axis.stories.tsx b/stories/column/y-axis/column.y-axis.stories.tsx
index 9a60842..c5aa4c8 100644
--- a/stories/column/y-axis/column.y-axis.stories.tsx
+++ b/stories/column/y-axis/column.y-axis.stories.tsx
@@ -45,6 +45,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Value',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed value-axis bounds (non-zero min, headroom above the bars). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/line/x-axis/line.x-axis.stories.tsx b/stories/line/x-axis/line.x-axis.stories.tsx
index 5c4108d..ef568e7 100644
--- a/stories/line/x-axis/line.x-axis.stories.tsx
+++ b/stories/line/x-axis/line.x-axis.stories.tsx
@@ -47,6 +47,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'Month',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed X-axis extent (category index; six points → narrow window). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/line/y-axis/line.y-axis.stories.tsx b/stories/line/y-axis/line.y-axis.stories.tsx
index f793af9..09d016c 100644
--- a/stories/line/y-axis/line.y-axis.stories.tsx
+++ b/stories/line/y-axis/line.y-axis.stories.tsx
@@ -42,6 +42,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Amount',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed value-axis bounds (non-zero min, headroom above the series). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/scatter/x-axis/scatter.x-axis.stories.tsx b/stories/scatter/x-axis/scatter.x-axis.stories.tsx
index 1e5b03b..d73ef1b 100644
--- a/stories/scatter/x-axis/scatter.x-axis.stories.tsx
+++ b/stories/scatter/x-axis/scatter.x-axis.stories.tsx
@@ -58,6 +58,15 @@ export const XAxisLabel: Story = {
   },
 };
 
+/** xAxisNameGap — extra distance (px) between the X-axis label and the axis line. */
+export const XAxisNameGap: Story = {
+  args: {
+    data,
+    xAxisLabel: 'X value',
+    xAxisNameGap: 45,
+  },
+};
+
 /** minX and maxX — fixed X-axis extent (category index; non-zero min). */
 export const FixedMinMax: Story = {
   args: {
diff --git a/stories/scatter/y-axis/scatter.y-axis.stories.tsx b/stories/scatter/y-axis/scatter.y-axis.stories.tsx
index d199229..e086cb2 100644
--- a/stories/scatter/y-axis/scatter.y-axis.stories.tsx
+++ b/stories/scatter/y-axis/scatter.y-axis.stories.tsx
@@ -53,6 +53,15 @@ export const YAxisLabel: Story = {
   },
 };
 
+/** yAxisNameGap — extra distance (px) between the Y-axis label and the axis line. */
+export const YAxisNameGap: Story = {
+  args: {
+    data,
+    yAxisLabel: 'Y value',
+    yAxisNameGap: 55,
+  },
+};
+
 /** minY and maxY — fixed Y range with non-zero floor (series Y is about 5–12). */
 export const FixedMinMax: Story = {
   args: {