@wavemaker/react-native-echarts 1.0.0-dev.12 → 1.0.0-dev.14

package/area/area-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/area-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAWzD,OAAO,KAAqC,MAAM,OAAO,CAAC;AAS1D,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,UAAU,GACX,MAAM,oBAAoB,CAAC;AAuf5B,eAAO,MAAM,SAAS;;;;;;;CAEpB,CAAC"}
+{"version":3,"file":"area-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/area-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAWzD,OAAO,KAAqC,MAAM,OAAO,CAAC;AAS1D,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,UAAU,GACX,MAAM,oBAAoB,CAAC;AAkgB5B,eAAO,MAAM,SAAS;;;;;;;CAEpB,CAAC"}

package/area/area-chart.js

@@ -7,7 +7,7 @@ import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/compon
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
-import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
 import { echartsLegendLayoutFragment, mergeCartesianGridForLegend, } from '../legend/echarts-legend-layout';
 // Register necessary components for this chart
 echarts.use([
@@ -46,7 +46,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
     });
     // Derive smooth/step from type
     const effectiveSmooth = type === 'smooth';
-    const effectiveStep = type === 'step' ? (step ?? 'start') : (step ?? false);
+    const effectiveStep = type === 'step' ? (step ?? 'start') : false;
     // Normalize data to array of { data: number[] } or { name: string; data: number[] }
     const normalizedSeries = useMemo(() => {
         let normalizedData = [];
@@ -89,25 +89,29 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
         const len = normalizedSeries[0]?.data?.length ?? 0;
         if (len === 0)
             return normalizedSeries;
-        return normalizedSeries.map(s => {
+        return normalizedSeries.map((s) => {
             const rawData = s.data;
             const sumsAt = new Array(len).fill(0);
-            normalizedSeries.forEach((other, _i) => {
+            normalizedSeries.forEach((other) => {
                 const d = 'data' in other ? other.data : [];
-                d.forEach((v, i) => { if (i < len)
-                    sumsAt[i] += v; });
+                d.forEach((v, i) => {
+                    if (i < len)
+                        sumsAt[i] += typeof v === 'number' ? v : v[1];
+                });
             });
             const normalizedData = rawData.map((v, i) => {
+                const val = typeof v === 'number' ? v : v[1];
                 const sum = sumsAt[i] || 1;
-                return sum > 0 ? (v[1] / sum) * 100 : 0;
+                return sum > 0 ? (val / sum) * 100 : 0;
             });
-            return 'name' in s && s.name
-                ? { name: s.name, data: normalizedData }
-                : { data: normalizedData };
+            return {
+                name: s.name,
+                data: rawData.map((v, i) => [typeof v === 'number' ? String(i) : v[0], normalizedData[i]]),
+            };
         });
     }, [normalizedSeries, stackNormalize]);
     const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
-    const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
+    const categoryAxisBounds = useMemo(() => categoryAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
     const xAxisData = useMemo(() => {
         const dataPoints = normalizedSeries
             .map(s => s.data.map(item => item[0]))
@@ -130,6 +134,9 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 show: showXAxis || xAxisTickLabelFormatter != null,
                 color: theme.axis.x.tickLabelColor,
                 formatter: xAxisTickLabelFormatter ?? undefined,
+                ...(categoryAxisBounds?.axisLabelInterval !== undefined
+                    ? { interval: categoryAxisBounds.axisLabelInterval }
+                    : {}),
             },
             axisLine: showXAxis ? {
                 show: true,
@@ -155,7 +162,8 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 },
             },
             boundaryGap,
-            ...(xAxisBounds ?? {}),
+            ...(categoryAxisBounds?.min !== undefined && { min: categoryAxisBounds.min }),
+            ...(categoryAxisBounds?.max !== undefined && { max: categoryAxisBounds.max }),
         };
         // Build yAxis config (value axis: optional min/max/interval; else ECharts auto-scale, except stack-normalized %)
         const yAxisConfig = {
@@ -348,7 +356,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
         xAxisLabel,
         yAxisLabel,
         valueAxisBounds,
-        xAxisBounds,
+        categoryAxisBounds,
     ]);
     useEffect(() => {
         let chart;

package/axis.d.ts

@@ -26,4 +26,17 @@ export declare function xAxisBoundsFromProps(params: {
     max?: number;
     interval?: number;
 } | undefined;
+/**
+ * Category-axis bounds: `min` / `max` on the axis; `intervalX` maps to `axisLabel.interval`
+ * (ECharts skips `interval` on category axes at the root).
+ */
+export declare function categoryAxisBoundsFromProps(params: {
+    minX?: number;
+    maxX?: number;
+    intervalX?: number;
+}): {
+    min?: number;
+    max?: number;
+    axisLabelInterval?: number;
+} | undefined;
 //# sourceMappingURL=axis.d.ts.map

package/axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../components/chart/axis.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAO,EAAE,YAAS,EAAE,WAAW,MAAM,aAUpE,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,aAIrC,CAAA;AAiBD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE"}
+{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../components/chart/axis.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAO,EAAE,YAAS,EAAE,WAAW,MAAM,aAUpE,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,aAIrC,CAAA;AAiBD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,MAAM,EAAE;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAYzE"}

package/axis.js

@@ -49,3 +49,23 @@ export function xAxisBoundsFromProps(params) {
         interval: params.intervalX,
     });
 }
+/**
+ * Category-axis bounds: `min` / `max` on the axis; `intervalX` maps to `axisLabel.interval`
+ * (ECharts skips `interval` on category axes at the root).
+ */
+export function categoryAxisBoundsFromProps(params) {
+    const raw = xAxisBoundsFromProps(params);
+    if (!raw)
+        return undefined;
+    const { min, max, interval } = raw;
+    const out = {};
+    if (min !== undefined)
+        out.min = min;
+    if (max !== undefined)
+        out.max = max;
+    if (interval !== undefined) {
+        // intervalX step N → show every Nth category label (0, N, 2N, …)
+        out.axisLabelInterval = interval <= 1 ? 0 : interval - 1;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}

package/candlestick/candlestick-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"candlestick-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/candlestick-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAmB,MAAM,2BAA2B,CAAC;AASxF,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAwWzG,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}
+{"version":3,"file":"candlestick-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/candlestick-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAmB,MAAM,2BAA2B,CAAC;AASxF,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA4WzG,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}

package/candlestick/candlestick-chart.js

@@ -5,7 +5,7 @@ import { BarChart, CandlestickChart as EChartsCandlestickChart, LineChart } from
 import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
-import { valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { valueAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
 import { echartsLegendLayoutFragment } from '../legend/echarts-legend-layout';
 echarts.use([
     TooltipComponent,
@@ -34,7 +34,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         if (!data?.length)
             return { series: [] };
         const valueAxisBounds = valueAxisBoundsFromProps({ minY, maxY, intervalY });
-        const xAxisBounds = xAxisBoundsFromProps({ minX, maxX, intervalX });
+        const categoryAxisBounds = categoryAxisBoundsFromProps({ minX, maxX, intervalX });
         const tooltipConfig = showHighlighter
             ? {
                 trigger: 'axis',
@@ -81,6 +81,9 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 show: showXAxis || xAxisTickLabelFormatter != null,
                 color: theme.axis.x.tickLabelColor,
                 formatter: xAxisTickLabelFormatter ?? undefined,
+                ...(categoryAxisBounds?.axisLabelInterval !== undefined
+                    ? { interval: categoryAxisBounds.axisLabelInterval }
+                    : {}),
             },
             axisLine: showXAxis
                 ? { show: true, lineStyle: { color: theme.axis.x.lineColor, width: theme.axis.x.lineWidth } }
@@ -93,7 +96,8 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 show: showXAxisSplitLines,
                 lineStyle: { color: theme.axis.x.splitLineColor, width: theme.axis.x.splitLineWidth },
             },
-            ...(xAxisBounds ?? {}),
+            ...(categoryAxisBounds?.min !== undefined && { min: categoryAxisBounds.min }),
+            ...(categoryAxisBounds?.max !== undefined && { max: categoryAxisBounds.max }),
         };
         if (hasVolume) {
             xAxisMain.gridIndex = 0;

package/chart-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../components/chart/chart-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAqGrD,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,UAAU,MAAM,EAAE,MACrG,OAAO,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,sBAmB/F,CAAC"}
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../components/chart/chart-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAqG9D,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,UAAU,MAAM,EAAE,MACrG,OAAO,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,sBA+B/F,CAAC"}

package/chart-container.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 const ChartContainer = ({ width = '100%', height = 350, data, noDataText = 'No data to render chart.', noDataIcon, noDataTextStyle = {}, noDataContainerStyle = {}, render, style, }) => {
     const [dimensions, setDimensions] = useState(null);
@@ -26,7 +26,7 @@ const ChartContainer = ({ width = '100%', height = 350, data, noDataText = 'No d
         height: typeof height === 'number' ? height : height,
     };
     return (<View style={[styles.container, containerStyle, style]} onLayout={handleLayout}>
-      {data ? (dimensions ? render(dimensions.width, dimensions.height) : null) : (<View style={[styles.noDataContainer, noDataContainerStyle, style]}>
+      {data !== undefined && data !== null ? (dimensions ? render(dimensions.width, dimensions.height) : null) : (<View style={[styles.noDataContainer, noDataContainerStyle, style]}>
           <Text style={[styles.noDataText, noDataTextStyle]}>{noDataText}</Text>
         </View>)}
     </View>);
@@ -50,6 +50,18 @@ const styles = StyleSheet.create({
 });
 export const withResponsiveContainer = (Component, ...dataName) => {
     return (props) => {
+        const width = useMemo(() => {
+            if (typeof props.width === 'string' && !props.width.endsWith('%')) {
+                return parseFloat(props.width.match(/\d+/)?.[0] || '0');
+            }
+            return props.width;
+        }, [props.width]);
+        const height = useMemo(() => {
+            if (typeof props.height === 'string' && !props.height.endsWith('%')) {
+                return parseFloat(props.height.match(/\d+/)?.[0] || '0');
+            }
+            return props.height;
+        }, [props.height]);
         const render = useCallback((width, height) => {
             return React.createElement(Component, {
                 ...props,
@@ -57,7 +69,7 @@ export const withResponsiveContainer = (Component, ...dataName) => {
                 height: height,
             });
         }, [props]);
-        const data = dataName.length > 0 ? dataName.find((name) => !!props[name]) || props.data : props.data;
-        return (<ChartContainer width={props.width} height={props.height} style={props.style} data={data} render={render} noDataText={props.noDataText}/>);
+        const data = dataName.length > 0 ? dataName.find((name) => props[name] !== undefined) || props.data : props.data;
+        return (<ChartContainer width={width} height={height} style={props.style} data={data} render={render} noDataText={props.noDataText}/>);
     };
 };

package/column/column-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/column/column-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAW1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAgpB7D,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"column-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/column/column-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAW1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA0qB7D,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/column/column-chart.js

@@ -6,7 +6,7 @@ import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/compo
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
-import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
 import { createAxisTooltipPreset, useAxisTooltip } from '../cartesian/tooltip';
 import { echartsLegendLayoutFragment, mergeCartesianGridForLegend, } from '../legend/echarts-legend-layout';
 echarts.use([
@@ -119,6 +119,9 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
     }, [normalizedSeries, stackNormalize]);
     const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
     const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
+    const categoryAxisBounds = useMemo(() => horizontal
+        ? categoryAxisBoundsFromProps({ minX: minY, maxX: maxY, intervalX: intervalY })
+        : categoryAxisBoundsFromProps({ minX, maxX, intervalX }), [horizontal, minX, maxX, intervalX, minY, maxY, intervalY]);
     const showLabelInside = barInsideLabelFormatter != null;
     const showLabelOutside = barOutsideLabelFormatter != null;
     const isSingleSeries = displaySeries.length === 1;
@@ -137,43 +140,59 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
     const option = useMemo(() => {
         const categories = (displaySeries[0]?.data ?? []).map((item) => String(item[0]));
         const xAxisData = categoryAxisData;
+        const categoryShow = horizontal ? showYAxis : showXAxis;
+        const categoryShowTicks = horizontal ? showYAxisTicks : showXAxisTicks;
+        const categoryShowSplitLines = horizontal ? showYAxisSplitLines : showXAxisSplitLines;
+        const categoryTickFormatter = horizontal ? yAxisTickLabelFormatter : xAxisTickLabelFormatter;
+        const categoryAxisTheme = horizontal ? theme.axis.y : theme.axis.x;
+        const categoryAxisTitle = horizontal ? yAxisLabel : xAxisLabel;
+        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 categoryAxisConfig = {
             type: 'category',
             data: xAxisData,
             boundaryGap,
-            ...(!horizontal ? (xAxisBounds ?? {}) : {}),
-            ...((horizontal ? yAxisLabel : xAxisLabel) != null && (horizontal ? yAxisLabel : xAxisLabel) !== '' && {
-                name: horizontal ? yAxisLabel : xAxisLabel,
+            ...(categoryAxisBounds?.min !== undefined && { min: categoryAxisBounds.min }),
+            ...(categoryAxisBounds?.max !== undefined && { max: categoryAxisBounds.max }),
+            ...(categoryAxisTitle != null && categoryAxisTitle !== '' && {
+                name: categoryAxisTitle,
                 nameLocation: 'middle',
                 nameGap: 25,
-                nameTextStyle: { color: horizontal ? theme.axis.y.tickLabelColor : theme.axis.x.tickLabelColor },
+                nameTextStyle: { color: categoryAxisTheme.tickLabelColor },
             }),
             axisLabel: {
-                show: showXAxis || xAxisTickLabelFormatter != null,
-                color: theme.axis.x.tickLabelColor,
-                formatter: xAxisTickLabelFormatter ?? undefined,
+                show: categoryShow || categoryTickFormatter != null,
+                color: categoryAxisTheme.tickLabelColor,
+                formatter: categoryTickFormatter ?? undefined,
+                ...(categoryAxisBounds?.axisLabelInterval !== undefined
+                    ? { interval: categoryAxisBounds.axisLabelInterval }
+                    : {}),
             },
-            axisLine: showXAxis
+            axisLine: categoryShow
                 ? {
                     show: true,
                     lineStyle: {
-                        color: theme.axis.x.lineColor,
-                        width: theme.axis.x.lineWidth,
+                        color: categoryAxisTheme.lineColor,
+                        width: categoryAxisTheme.lineWidth,
                     },
                 }
                 : { show: false },
             axisTick: {
-                show: showXAxis && showXAxisTicks,
+                show: categoryShow && categoryShowTicks,
                 lineStyle: {
-                    color: theme.axis.x.tickColor,
-                    width: theme.axis.x.tickWidth,
+                    color: categoryAxisTheme.tickColor,
+                    width: categoryAxisTheme.tickWidth,
                 },
             },
             splitLine: {
-                show: showXAxisSplitLines,
+                show: categoryShowSplitLines,
                 lineStyle: {
-                    color: theme.axis.x.splitLineColor,
-                    width: theme.axis.x.splitLineWidth,
+                    color: categoryAxisTheme.splitLineColor,
+                    width: categoryAxisTheme.splitLineWidth,
                 },
             },
         };
@@ -181,46 +200,46 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
         const valueAxisNumericExtras = stackPct
             ? { min: 0, max: 100 }
             : horizontal
-                ? { ...(valueAxisBounds ?? {}), ...(xAxisBounds ?? {}) }
+                ? (xAxisBounds ?? {})
                 : (valueAxisBounds ?? {});
         const valueAxisConfig = {
             type: 'value',
             ...valueAxisNumericExtras,
-            ...((horizontal ? xAxisLabel : yAxisLabel) != null && (horizontal ? xAxisLabel : yAxisLabel) !== '' && {
-                name: horizontal ? xAxisLabel : yAxisLabel,
+            ...(valueAxisTitle != null && valueAxisTitle !== '' && {
+                name: valueAxisTitle,
                 nameLocation: 'middle',
                 nameGap: 40,
-                nameTextStyle: { color: horizontal ? theme.axis.x.tickLabelColor : theme.axis.y.tickLabelColor },
+                nameTextStyle: { color: valueAxisTheme.tickLabelColor },
             }),
             axisLabel: {
-                show: showYAxis || yAxisTickLabelFormatter != null,
-                color: theme.axis.y.tickLabelColor,
-                formatter: yAxisTickLabelFormatter ??
+                show: valueShow || valueTickFormatter != null,
+                color: valueAxisTheme.tickLabelColor,
+                formatter: valueTickFormatter ??
                     (stackNormalize && displaySeries.length > 1
                         ? (value) => `${value}%`
                         : undefined),
             },
-            axisLine: showYAxis
+            axisLine: valueShow
                 ? {
                     show: true,
                     lineStyle: {
-                        color: theme.axis.y.lineColor,
-                        width: theme.axis.y.lineWidth,
+                        color: valueAxisTheme.lineColor,
+                        width: valueAxisTheme.lineWidth,
                     },
                 }
                 : { show: false },
             axisTick: {
-                show: showYAxis && showYAxisTicks,
+                show: valueShow && valueShowTicks,
                 lineStyle: {
-                    color: theme.axis.y.tickColor,
-                    width: theme.axis.y.tickWidth,
+                    color: valueAxisTheme.tickColor,
+                    width: valueAxisTheme.tickWidth,
                 },
             },
             splitLine: {
-                show: showYAxisSplitLines,
+                show: valueShowSplitLines,
                 lineStyle: {
-                    color: theme.axis.y.splitLineColor,
-                    width: theme.axis.y.splitLineWidth,
+                    color: valueAxisTheme.splitLineColor,
+                    width: valueAxisTheme.splitLineWidth,
                 },
             },
         };
@@ -462,6 +481,7 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
         yAxisLabel,
         categoryAxisData,
         valueAxisBounds,
+        categoryAxisBounds,
         xAxisBounds,
     ]);
     useEffect(() => {

package/gauge/digital/digital.gauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"digital.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/digital/digital.gauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;GAGG;AACH,UAAU,iBAAkB,SAAQ,cAAc;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA+UD,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}
+{"version":3,"file":"digital.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/digital/digital.gauge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;GAGG;AACH,UAAU,iBAAkB,SAAQ,cAAc;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAyVD,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}

package/gauge/digital/digital.gauge.js

@@ -1,10 +1,11 @@
 import { withResponsiveContainer } from '../../chart-container';
 import { useChartTheme, withChartTheme } from '../../chart-theme.context';
-import React, { useEffect, useRef, useState } from 'react';
+import { getAxisByMinMax } from '../../axis';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import Svg, { Defs, G, LinearGradient, Path, Stop, Text as SvgText } from 'react-native-svg';
 // SVG Gauge Component
-const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height, animationDuration = 1000, colors, axisBgColor: axisBgColorProp, axisWidth: axisWidthProp, tickColor: tickColorProp, }) => {
+const SVGGaugeChart = ({ value, min = 0, max = 100, showInnerArc = false, width, height, animationDuration = 1000, colors, axisBgColor: axisBgColorProp, axisWidth: axisWidthProp, tickColor: tickColorProp, }) => {
     const { theme: chartTheme } = useChartTheme(undefined, colors);
     // Use theme colors; allow overrides from props
     const gradientColors = chartTheme.series.map(item => item.color);
@@ -50,6 +51,13 @@ const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height,
             }
         };
     }, [value, animationDuration]);
+    const { majorTickPositions, minorStep } = useMemo(() => {
+        const scaleRange = Math.max(max - min, 1);
+        const majors = getAxisByMinMax(min, max);
+        const majorInterval = majors.length >= 2 ? majors[1] - majors[0] : Math.max(scaleRange / 5, 1);
+        const step = Math.max(1, Math.round(majorInterval / 10));
+        return { majorTickPositions: majors, minorStep: step };
+    }, [min, max]);
     // If height not provided, use 90% of available height
     // If width not provided, use the same as height to keep it square
     const calculatedHeight = height ?? dimensions.height * 0.9;
@@ -62,7 +70,9 @@ const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height,
     const startAngle = -135;
     const endAngle = 135;
     const totalAngle = endAngle - startAngle;
-    const percentage = (animatedValue / max) * 100;
+    const scaleRange = Math.max(max - min, 1);
+    const normalizedValue = (animatedValue - min) / scaleRange;
+    const percentage = normalizedValue * 100;
     const valueAngle = (percentage / 100) * totalAngle;
     const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
         const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
@@ -130,18 +140,18 @@ const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height,
         }
         ticks.push(<Path key={i} d={`M ${outerPoint.x} ${outerPoint.y} L ${innerPoint.x} ${innerPoint.y}`} stroke={tickColor} strokeWidth={tickStrokeWidth} strokeLinecap="round"/>);
     }
-    // Generate scale labels and inner ticks
+    // Generate scale labels and inner ticks from min/max
     const scaleLabels = [];
     const innerTicks = [];
-    const majorTickPositions = [0, 20, 40, 60, 80, 100];
     const labelRadius = radius - 40;
     const innerTickLength = 4;
     const minorTickLength = 2;
     const gapFromOuterTicks = 4; // Gap between outer and inner elements
     const innerTickOuterRadius = radius - outerTickLength - gapFromOuterTicks;
+    const majorTickSet = new Set(majorTickPositions);
     // Add major ticks and labels
     for (const labelValue of majorTickPositions) {
-        const labelAngle = startAngle + (labelValue / max) * totalAngle;
+        const labelAngle = startAngle + ((labelValue - min) / scaleRange) * totalAngle;
         const labelPosition = polarToCartesian(center, center, labelRadius, labelAngle);
         // Add scale label
         scaleLabels.push(<SvgText key={`label-${labelValue}`} x={labelPosition.x} y={labelPosition.y} textAnchor="middle" fontSize="12" fill={labelColor}>
@@ -152,17 +162,14 @@ const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height,
         const tickInnerPoint = polarToCartesian(center, center, innerTickOuterRadius - innerTickLength, labelAngle);
         innerTicks.push(<Path key={`inner-tick-${labelValue}`} d={`M ${tickOuterPoint.x} ${tickOuterPoint.y} L ${tickInnerPoint.x} ${tickInnerPoint.y}`} stroke={innerTickColor} strokeWidth={2} strokeLinecap="round"/>);
     }
-    // Add minor ticks (9 ticks between each major tick)
-    // Major ticks are at 0, 20, 40, 60, 80, 100
-    // So we need ticks at every 2 units, excluding the major positions
-    for (let value = 0; value <= max; value += 2) {
-        // Skip if this is a major tick position
-        if (majorTickPositions.includes(value))
+    // Minor ticks between major labels
+    for (let tickValue = min; tickValue <= max; tickValue += minorStep) {
+        if (majorTickSet.has(tickValue))
             continue;
-        const tickAngle = startAngle + (value / max) * totalAngle;
+        const tickAngle = startAngle + ((tickValue - min) / scaleRange) * totalAngle;
         const tickOuterPoint = polarToCartesian(center, center, innerTickOuterRadius, tickAngle);
         const tickInnerPoint = polarToCartesian(center, center, innerTickOuterRadius - minorTickLength, tickAngle);
-        innerTicks.push(<Path key={`inner-minor-tick-${value}`} d={`M ${tickOuterPoint.x} ${tickOuterPoint.y} L ${tickInnerPoint.x} ${tickInnerPoint.y}`} stroke={inactiveTickColor} strokeWidth={1} strokeLinecap="round"/>);
+        innerTicks.push(<Path key={`inner-minor-tick-${tickValue}`} d={`M ${tickOuterPoint.x} ${tickOuterPoint.y} L ${tickInnerPoint.x} ${tickInnerPoint.y}`} stroke={inactiveTickColor} strokeWidth={1} strokeLinecap="round"/>);
     }
     // Calculate the animated end angle for the outer arc
     const animatedEndAngle = startAngle + valueAngle;
@@ -205,8 +212,8 @@ const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height,
       </SvgText>
     </Svg>);
 };
-const ChartComponent = ({ value = 46, min = 0, max = 90, width, height, axisBgColor, axisWidth, tickColor, showInnerArc, animationDuration, ...props }) => {
-    return (<SVGGaugeChart value={value} max={max} width={width} height={height} colors={props.colors} axisBgColor={axisBgColor} axisWidth={axisWidth} tickColor={tickColor} showInnerArc={showInnerArc} animationDuration={animationDuration}/>);
+const ChartComponent = ({ value = 46, min = 0, max = 100, width, height, axisBgColor, axisWidth, tickColor, showInnerArc, animationDuration, ...props }) => {
+    return (<SVGGaugeChart value={value} min={min} max={max} width={width} height={height} colors={props.colors} axisBgColor={axisBgColor} axisWidth={axisWidth} tickColor={tickColor} showInnerArc={showInnerArc} animationDuration={animationDuration}/>);
 };
 export const DigitalGauge = Object.assign(withResponsiveContainer(withChartTheme(ChartComponent), 'value'), {
     displayName: 'DigitalGauge',

package/gauge/radial/radial.gauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radial.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/radial/radial.gauge.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAUrD;;;GAGG;AACH,UAAU,gBAAiB,SAAQ,cAAc;CAAG;AAgSpD,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"radial.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/radial/radial.gauge.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAUrD;;;GAGG;AACH,UAAU,gBAAiB,SAAQ,cAAc;CAAG;AA8RpD,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/gauge/radial/radial.gauge.js

@@ -1,5 +1,6 @@
 import { withResponsiveContainer } from '../../chart-container';
 import { useChartTheme, withChartTheme } from '../../chart-theme.context';
+import { getAxisByMinMax } from '../../axis';
 import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
 import { BarChart } from 'echarts/charts';
 import { GaugeChart } from 'echarts/charts';
@@ -32,6 +33,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                 radius: [innerRadius, outerRadius],
             },
             angleAxis: {
+                min: min,
                 max: max,
                 startAngle: 225,
                 endAngle: -45,
@@ -46,7 +48,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
             series: [
                 {
                     type: 'bar',
-                    data: [max],
+                    data: [max - min],
                     coordinateSystem: 'polar',
                     name: 'Background',
                     tooltip: {
@@ -64,7 +66,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                 },
                 {
                     type: 'bar',
-                    data: [value],
+                    data: [Math.max(value - min, 0)],
                     coordinateSystem: 'polar',
                     name: 'Value',
                     itemStyle: {
@@ -79,7 +81,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                 },
             ]
         };
-    }, [chartTheme, value, max, width, height, axisBgColorProp]);
+    }, [chartTheme, value, min, max, width, height, axisBgColorProp]);
     // Gauge option (progressArcOption)
     const gaugeOption = useMemo(() => {
         // Gauge radius smaller than radial inner ring to create a gap
@@ -94,6 +96,8 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
         const anchorBorderColor = tickColorProp ?? chartTheme.axis.r.tickColor;
         const valueColor = chartTheme.axis.r.tickLabelColor;
         const unitColor = chartTheme.axis.r.tickLabelColor;
+        const majorTicks = getAxisByMinMax(min, max);
+        const splitNumber = Math.max(majorTicks.length - 1, 1);
         return {
             series: [
                 {
@@ -104,7 +108,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                     endAngle: -45,
                     min: min,
                     max: max,
-                    splitNumber: 5,
+                    splitNumber,
                     axisLine: {
                         show: false,
                         distance: 1,
@@ -144,12 +148,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                         distance: 16,
                         fontSize: 12,
                         color: labelColor,
-                        formatter: function (value) {
-                            if (value === 20 || value === 80) {
-                                return value.toString();
-                            }
-                            return '';
-                        },
+                        formatter: (tickValue) => String(Math.round(tickValue)),
                     },
                     anchor: {
                         show: true,
@@ -165,9 +164,7 @@ const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240,
                     },
                     detail: {
                         valueAnimation: true,
-                        formatter: function (value) {
-                            return '{value|' + Math.round(value) + '}{unit|/100}';
-                        },
+                        formatter: (detailValue) => `{value|${Math.round(detailValue)}}{unit|/${max}}`,
                         offsetCenter: [0, '70%'],
                         rich: {
                             value: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/react-native-echarts",
-  "version": "1.0.0-dev.12",
+  "version": "1.0.0-dev.14",
   "description": "React Native chart components built on using e-charts library.",
   "license": "MIT",
   "repository": {

package/scatter/scatter-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/scatter-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS/D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAY1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAsZlF,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}
+{"version":3,"file":"scatter-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/scatter-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS/D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAY1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA0ZlF,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}

package/scatter/scatter-chart.js

@@ -6,7 +6,7 @@ import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/compo
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
-import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
 import { echartsLegendLayoutFragment, mergeCartesianGridForLegend, } from '../legend/echarts-legend-layout';
 import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
 import { createScatterTooltipPreset, useScatterItemTooltip } from './tooltip';
@@ -74,7 +74,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
     const hasNamedSeries = useMemo(() => normalizedSeries.some((s) => 'name' in s && s.name), [normalizedSeries]);
     selectContextRef.current = { normalizedSeries };
     const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
-    const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
+    const categoryAxisBounds = useMemo(() => categoryAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
     const option = useMemo(() => {
         const dataPoints = normalizedSeries.map(s => s.data.map(item => item[0])).flat();
         const xAxisData = getAxis(dataPoints).map(String);
@@ -102,7 +102,8 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
             type: 'category',
             boundaryGap,
             data: xAxisData,
-            ...(xAxisBounds ?? {}),
+            ...(categoryAxisBounds?.min !== undefined && { min: categoryAxisBounds.min }),
+            ...(categoryAxisBounds?.max !== undefined && { max: categoryAxisBounds.max }),
             ...(xAxisLabel != null && xAxisLabel !== '' && {
                 name: xAxisLabel,
                 nameLocation: 'middle',
@@ -113,6 +114,9 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 show: showXAxis || xAxisTickLabelFormatter != null,
                 color: theme.axis.x.tickLabelColor,
                 ...(xAxisTickLabelFormatter && { formatter: xAxisTickLabelFormatter }),
+                ...(categoryAxisBounds?.axisLabelInterval !== undefined
+                    ? { interval: categoryAxisBounds.axisLabelInterval }
+                    : {}),
             },
             axisLine: showXAxis
                 ? {
@@ -279,7 +283,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
         xAxisLabel,
         yAxisLabel,
         valueAxisBounds,
-        xAxisBounds,
+        categoryAxisBounds,
     ]);
     useEffect(() => {
         let chart;