Changed version to 1.0.5

components/chart/area/area-chart.tsx

@@ -13,6 +13,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';
@@ -39,6 +40,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,
@@ -67,6 +74,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -205,7 +214,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -253,7 +262,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -309,11 +318,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'
@@ -451,6 +458,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     valueAxisBounds,
     categoryAxisBounds,
   ]);

components/chart/bubble/bubble-chart.tsx

@@ -63,6 +63,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -172,7 +174,7 @@ const ChartComponent = ({
       ...(xAxisLabel != null && xAxisLabel !== '' && {
         name: xAxisLabel,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: xAxisNameGap ?? 25,
         nameTextStyle: { color: theme.axis.x.tickLabelColor },
       }),
       axisLabel: {
@@ -211,7 +213,7 @@ const ChartComponent = ({
       ...(yAxisLabel != null && yAxisLabel !== '' && {
         name: yAxisLabel,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: yAxisNameGap ?? 40,
         nameTextStyle: { color: theme.axis.y.tickLabelColor },
       }),
       axisLabel: {
@@ -336,6 +338,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     valueAxisBounds,
     xAxisBounds,
   ]);

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,

components/chart/column/column-chart.tsx

@@ -74,6 +74,8 @@ const ChartComponent = ({
   yAxisTickLabelFormatter,
   xAxisLabel,
   yAxisLabel,
+  xAxisNameGap,
+  yAxisNameGap,
   minX,
   maxX,
   intervalX,
@@ -233,13 +235,15 @@ 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;
     const valueShowSplitLines = horizontal ? showXAxisSplitLines : showYAxisSplitLines;
     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',
@@ -250,7 +254,7 @@ const ChartComponent = ({
       ...(categoryAxisTitle != null && categoryAxisTitle !== '' && {
         name: categoryAxisTitle,
         nameLocation: 'middle',
-        nameGap: 25,
+        nameGap: categoryAxisNameGap ?? 25,
         nameTextStyle: { color: categoryAxisTheme.tickLabelColor },
       }),
       axisLabel: {
@@ -299,7 +303,7 @@ const ChartComponent = ({
       ...(valueAxisTitle != null && valueAxisTitle !== '' && {
         name: valueAxisTitle,
         nameLocation: 'middle',
-        nameGap: 40,
+        nameGap: valueAxisNameGap ?? 40,
         nameTextStyle: { color: valueAxisTheme.tickLabelColor },
       }),
       axisLabel: {
@@ -619,6 +623,8 @@ const ChartComponent = ({
     yAxisTickLabelFormatter,
     xAxisLabel,
     yAxisLabel,
+    xAxisNameGap,
+    yAxisNameGap,
     categoryAxisData,
     valueAxisBounds,
     categoryAxisBounds,

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.
    */

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,
   ]);

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",
@@ -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",

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: {

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: {

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: {

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: {

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: {

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: {

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: {