@wavemaker/react-native-echarts 1.0.0-dev.8 → 1.0.0-dev.9

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;AAK1D,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,UAAU,GACX,MAAM,oBAAoB,CAAC;AA+d5B,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;AAK1D,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,UAAU,GACX,MAAM,oBAAoB,CAAC;AA4e5B,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 } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
 // Register necessary components for this chart
 echarts.use([
     TooltipComponent,
@@ -16,7 +16,7 @@ echarts.use([
     SkiaRenderer,
     LineChart,
 ]);
-const ChartComponent = ({ data, width = 220, height = 350, type = 'default', step, boundaryGap = false, stack, stackNormalize = false, symbol, symbolSize, areaOpacity = 0.6, areaFill = 'gradient', showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
+const ChartComponent = ({ data, width = 220, height = 350, type = 'default', step, boundaryGap = false, stack, stackNormalize = false, symbol, symbolSize, areaOpacity = 0.6, areaFill = 'gradient', showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
@@ -105,14 +105,14 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 : { data: normalizedData };
         });
     }, [normalizedSeries, stackNormalize]);
+    const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
+    const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
     const xAxisData = useMemo(() => {
         const dataPoints = normalizedSeries
             .map(s => s.data.map(item => item[0]))
             .flat();
-        return xAxisTicks != null && xAxisTicks.length > 0
-            ? xAxisTicks
-            : getAxis(dataPoints).map(String);
-    }, [normalizedSeries, xAxisTicks]);
+        return getAxis(dataPoints).map(String);
+    }, [normalizedSeries]);
     axisTooltipContextRef.current = { displaySeries, categoryAxisData: xAxisData };
     const option = useMemo(() => {
         // Build xAxis config (category with data indices)
@@ -140,7 +140,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 show: false,
             },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: {
                     color: theme.axis.x.tickColor,
                     width: theme.axis.x.tickWidth,
@@ -153,15 +153,15 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                     width: theme.axis.x.splitLineWidth,
                 },
             },
+            boundaryGap,
+            ...(xAxisBounds ?? {}),
         };
-        xAxisConfig.boundaryGap = boundaryGap;
-        // Build yAxis config (value, auto-scale from data)
+        // Build yAxis config (value axis: optional min/max/interval; else ECharts auto-scale, except stack-normalized %)
         const yAxisConfig = {
             type: 'value',
-            ...(stackNormalize && displaySeries.length > 1 && {
-                min: 0,
-                max: 100,
-            }),
+            ...(stackNormalize && displaySeries.length > 1
+                ? { min: 0, max: 100 }
+                : (valueAxisBounds ?? {})),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -185,7 +185,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 show: false,
             },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: {
                     color: theme.axis.y.tickColor,
                     width: theme.axis.y.tickWidth,
@@ -340,9 +340,10 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
         tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;

package/axis.d.ts

@@ -1,3 +1,29 @@
 export declare const getAxisByMinMax: (min?: number, max?: number, interval?: number) => number[];
 export declare const getAxis: (data: number[]) => number[];
+/**
+ * Maps explicit Cartesian Y (value) axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export declare function valueAxisBoundsFromProps(params: {
+    minY?: number;
+    maxY?: number;
+    intervalY?: number;
+}): {
+    min?: number;
+    max?: number;
+    interval?: number;
+} | undefined;
+/**
+ * Maps explicit Cartesian X-axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export declare function xAxisBoundsFromProps(params: {
+    minX?: number;
+    maxX?: number;
+    intervalX?: number;
+}): {
+    min?: number;
+    max?: number;
+    interval?: 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"}
+{"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"}

package/axis.js

@@ -14,3 +14,38 @@ export const getAxis = (data) => {
     const max = Math.max(...data);
     return getAxisByMinMax(min, max);
 };
+function axisMinMaxIntervalFromFields(params) {
+    const out = {};
+    if (params.min !== undefined)
+        out.min = params.min;
+    if (params.max !== undefined)
+        out.max = params.max;
+    if (params.interval !== undefined)
+        out.interval = params.interval;
+    if (out.min === undefined && out.max === undefined && out.interval === undefined) {
+        return undefined;
+    }
+    return out;
+}
+/**
+ * Maps explicit Cartesian Y (value) axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export function valueAxisBoundsFromProps(params) {
+    return axisMinMaxIntervalFromFields({
+        min: params.minY,
+        max: params.maxY,
+        interval: params.intervalY,
+    });
+}
+/**
+ * Maps explicit Cartesian X-axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export function xAxisBoundsFromProps(params) {
+    return axisMinMaxIntervalFromFields({
+        min: params.minX,
+        max: params.maxX,
+        interval: params.intervalX,
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"bubble-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/bubble-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAO1D,+CAA+C;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAyW/E,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"bubble-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/bubble-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAQ1D,+CAA+C;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA6X/E,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/bubble/bubble-chart.js

@@ -6,6 +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 { valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
 import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
 import { createScatterTooltipPreset, useScatterItemTooltip } from '../scatter/tooltip';
 echarts.use([
@@ -22,7 +23,7 @@ function scaleSize(value, dataMin, dataMax, outMin, outMax) {
     return outMin + t * (outMax - outMin);
 }
 const DEFAULT_SIZE_RANGE = [8, 50];
-const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = DEFAULT_SIZE_RANGE, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = DEFAULT_SIZE_RANGE, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
@@ -77,6 +78,8 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
     selectContextRef.current = {
         normalizedSeries: normalizedSeries,
     };
+    const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
+    const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
     const option = useMemo(() => {
         const tooltipConfig = tooltipOverlayActive
             ? {
@@ -100,6 +103,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         const xAxisConfig = {
             type: 'value',
             boundaryGap,
+            ...(xAxisBounds ?? {}),
             ...(xAxisLabel != null && xAxisLabel !== '' && {
                 name: xAxisLabel,
                 nameLocation: 'middle',
@@ -121,7 +125,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
                 : { show: false },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: {
                     color: theme.axis.x.tickColor,
                     width: theme.axis.x.tickWidth,
@@ -137,6 +141,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         };
         const yAxisConfig = {
             type: 'value',
+            ...(valueAxisBounds ?? {}),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -158,7 +163,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
                 : { show: false },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: {
                     color: theme.axis.y.tickColor,
                     width: theme.axis.y.tickWidth,
@@ -251,6 +256,8 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         yAxisTickLabelFormatter,
         xAxisLabel,
         yAxisLabel,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;

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;AAG1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyUzG,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;AAI1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAsVzG,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}

package/candlestick/candlestick-chart.js

@@ -5,6 +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';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -14,25 +15,25 @@ echarts.use([
     BarChart,
     LineChart,
 ]);
-const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width = 220, height = 350, boundaryGap = true, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, positiveColor = '#008000', negativeColor = '#FF2C2C', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width = 220, height = 350, boundaryGap = true, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, positiveColor = '#008000', negativeColor = '#FF2C2C', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, ...props }) => {
     const { theme } = useChartTheme(props.theme, undefined);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
     const selectContextRef = useRef({ categories: [], ohlcData: [] });
     const categories = useMemo(() => {
-        if (xAxisTicks != null && xAxisTicks.length > 0)
-            return xAxisTicks;
         if (xAxisData?.length)
             return xAxisData.map(String);
         return data.map((_, i) => String(i));
-    }, [xAxisTicks, xAxisData, data]);
+    }, [xAxisData, data]);
     const hasVolume = volumeData != null && volumeData.length > 0;
     const hasMA = (ma5?.length ?? 0) > 0 || (ma10?.length ?? 0) > 0 || (ma20?.length ?? 0) > 0;
     selectContextRef.current = { categories, ohlcData: data };
     const option = useMemo(() => {
         if (!data?.length)
             return { series: [] };
+        const valueAxisBounds = valueAxisBoundsFromProps({ minY, maxY, intervalY });
+        const xAxisBounds = xAxisBoundsFromProps({ minX, maxX, intervalX });
         const tooltipConfig = showHighlighter
             ? {
                 trigger: 'axis',
@@ -66,13 +67,14 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 ? { show: true, lineStyle: { color: theme.axis.x.lineColor, width: theme.axis.x.lineWidth } }
                 : { show: false },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: { color: theme.axis.x.tickColor, width: theme.axis.x.tickWidth },
             },
             splitLine: {
                 show: showXAxisSplitLines,
                 lineStyle: { color: theme.axis.x.splitLineColor, width: theme.axis.x.splitLineWidth },
             },
+            ...(xAxisBounds ?? {}),
         };
         if (hasVolume) {
             xAxisMain.gridIndex = 0;
@@ -80,7 +82,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         }
         const yAxisMain = {
             type: 'value',
-            scale: true,
+            ...(valueAxisBounds ?? { scale: true }),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -96,7 +98,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 ? { show: true, lineStyle: { color: theme.axis.y.lineColor, width: theme.axis.y.lineWidth } }
                 : { show: false },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: { color: theme.axis.y.tickColor, width: theme.axis.y.tickWidth },
             },
             splitLine: {
@@ -230,9 +232,14 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         negativeColor,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        minX,
+        maxX,
+        intervalX,
+        minY,
+        maxY,
+        intervalY,
     ]);
     useEffect(() => {
         let chart;

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;AAO1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqnB7D,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;AAO1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqoB7D,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 } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
 import { createAxisTooltipPreset, useAxisTooltip } from '../cartesian/tooltip';
 echarts.use([
     TooltipComponent,
@@ -24,7 +24,7 @@ function columnCornerRadiusDep(value) {
         return value.join(',');
     return '4,4,0,0';
 }
-const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, cornerRadius = DEFAULT_COLUMN_CORNER_RADIUS, horizontal = false, stack, stackNormalize = false, activeIndex, activeColor, barInsideLabelPosition = 'start', barInsideLabelFormatter, barOutsideLabelPosition = 'start', barOutsideLabelFormatter, itemStyle, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = false, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
+const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, cornerRadius = DEFAULT_COLUMN_CORNER_RADIUS, horizontal = false, stack, stackNormalize = false, activeIndex, activeColor, barInsideLabelPosition = 'start', barInsideLabelFormatter, barOutsideLabelPosition = 'start', barOutsideLabelFormatter, itemStyle, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = false, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
@@ -116,6 +116,8 @@ 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 showLabelInside = barInsideLabelFormatter != null;
     const showLabelOutside = barOutsideLabelFormatter != null;
     const isSingleSeries = displaySeries.length === 1;
@@ -123,12 +125,8 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
     const categoryAxisData = useMemo(() => {
         const categories = (displaySeries[0]?.data ?? []).map((item) => String(item[0]));
         const dataPoints = displaySeries.flatMap((s) => s.data.map((d) => d[1]));
-        return xAxisTicks != null && xAxisTicks.length > 0
-            ? xAxisTicks
-            : categories.length > 0
-                ? categories
-                : getAxis(dataPoints).map(String);
-    }, [displaySeries, xAxisTicks]);
+        return categories.length > 0 ? categories : getAxis(dataPoints).map(String);
+    }, [displaySeries]);
     selectContextRef.current = {
         displaySeries,
         categoryAxisData,
@@ -142,6 +140,7 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
             type: 'category',
             data: xAxisData,
             boundaryGap,
+            ...(!horizontal ? (xAxisBounds ?? {}) : {}),
             ...((horizontal ? yAxisLabel : xAxisLabel) != null && (horizontal ? yAxisLabel : xAxisLabel) !== '' && {
                 name: horizontal ? yAxisLabel : xAxisLabel,
                 nameLocation: 'middle',
@@ -177,13 +176,15 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
                 },
             },
         };
+        const stackPct = stackNormalize && displaySeries.length > 1;
+        const valueAxisNumericExtras = stackPct
+            ? { min: 0, max: 100 }
+            : horizontal
+                ? { ...(valueAxisBounds ?? {}), ...(xAxisBounds ?? {}) }
+                : (valueAxisBounds ?? {});
         const valueAxisConfig = {
             type: 'value',
-            ...(stackNormalize &&
-                displaySeries.length > 1 && {
-                min: 0,
-                max: 100,
-            }),
+            ...valueAxisNumericExtras,
             ...((horizontal ? xAxisLabel : yAxisLabel) != null && (horizontal ? xAxisLabel : yAxisLabel) !== '' && {
                 name: horizontal ? xAxisLabel : yAxisLabel,
                 nameLocation: 'middle',
@@ -452,10 +453,11 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
         tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
         categoryAxisData,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;

package/package.json

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

package/props/cartesian.d.ts

@@ -43,23 +43,39 @@ export interface CartesianChartProps extends CommonChartProps {
      */
     boundaryGap?: boolean;
     /**
-     * Custom X-axis tick values (numbers only). When provided, used as the x-axis data; labels are
-     * generated using xAxisTickLabelFormatter. Otherwise each chart derives x-axis from data.
-     * @default undefined
+     * X-axis minimum when set. Applies to the chart’s **X** axis (category or value, depending on the chart).
+     * For horizontal column/bar, the **value** (bar length) scale is on **X** — use `minX` / `maxX` / `intervalX` for that scale.
+     * When omitted, the minimum is derived from the data or chosen automatically.
      */
-    xAxisTicks?: number[];
+    minX?: number;
     /**
-     * Custom Y-axis tick positions (for value axis).
-     * @default undefined
+     * X-axis maximum when set. See {@link minX} for layout notes. When omitted, the maximum is derived from the data or chosen automatically.
+     */
+    maxX?: number;
+    /**
+     * X-axis tick interval when set. See {@link minX} for layout notes. When omitted, the tick step is chosen automatically.
+     */
+    intervalX?: number;
+    /**
+     * Y-axis (value scale) minimum when set. Applies to the chart’s **Y** axis.
+     * When omitted, the minimum is derived from the data or chosen automatically.
+     */
+    minY?: number;
+    /**
+     * Y-axis (value scale) maximum when set. When omitted, the maximum is derived from the data or chosen automatically.
+     */
+    maxY?: number;
+    /**
+     * Y-axis (value scale) tick interval when set. When omitted, the tick step is chosen automatically.
      */
-    yAxisTicks?: number[];
+    intervalY?: number;
     /**
      * Whether to show the X-axis line and labels.
      * @default true
      */
     showXAxis?: boolean;
     /**
-     * Whether to show X-axis tick marks.
+     * Whether to show X-axis tick marks. Only applies when {@link showXAxis} is true.
      * @default true
      */
     showXAxisTicks?: boolean;
@@ -69,7 +85,7 @@ export interface CartesianChartProps extends CommonChartProps {
      */
     showYAxis?: boolean;
     /**
-     * Whether to show Y-axis tick marks.
+     * Whether to show Y-axis tick marks. Only applies when {@link showYAxis} is true.
      * @default true
      */
     showYAxisTicks?: boolean;
@@ -103,7 +119,7 @@ export interface CartesianChartProps extends CommonChartProps {
      */
     showLegend?: boolean;
     /**
-     * Whether ECharts applies **emphasis** (hover highlight) while the axis pointer / tooltip is near the series.
+     * Whether **emphasis** (hover highlight) is applied while the axis pointer / tooltip is near the series.
      * Column and bar charts default this to `false`; area defaults to `true`.
      */
     showHighlighter?: boolean;

package/props/cartesian.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC1D"}
+{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC1D"}

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;AAQ1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA4XlF,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;AAQ1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA2YlF,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 } from '../axis';
+import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
 import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
 import { createScatterTooltipPreset, useScatterItemTooltip } from './tooltip';
 echarts.use([
@@ -34,7 +34,7 @@ function linearRegression(points) {
     const intercept = (sumY - slope * sumX) / n;
     return { slope, intercept };
 }
-const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', symbolSize = 8, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, tooltip = 'card', showRegressionLine = false, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', symbolSize = 8, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, tooltip = 'card', showRegressionLine = false, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
@@ -72,11 +72,11 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
     }, [data]);
     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 option = useMemo(() => {
         const dataPoints = normalizedSeries.map(s => s.data.map(item => item[0])).flat();
-        const xAxisData = xAxisTicks != null && xAxisTicks.length > 0
-            ? xAxisTicks
-            : getAxis(dataPoints).map(String);
+        const xAxisData = getAxis(dataPoints).map(String);
         const tooltipConfig = tooltipOverlayActive
             ? {
                 trigger: 'item',
@@ -96,11 +96,12 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 }),
             }
             : { show: false };
-        // Scatter uses value axes for both x and y (data is [x, y] pairs)
+        // X: category from binned coordinates; Y: value (data is [x, y] pairs)
         const xAxisConfig = {
             type: 'category',
             boundaryGap,
             data: xAxisData,
+            ...(xAxisBounds ?? {}),
             ...(xAxisLabel != null && xAxisLabel !== '' && {
                 name: xAxisLabel,
                 nameLocation: 'middle',
@@ -122,7 +123,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 }
                 : { show: false },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: {
                     color: theme.axis.x.tickColor,
                     width: theme.axis.x.tickWidth,
@@ -138,6 +139,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
         };
         const yAxisConfig = {
             type: 'value',
+            ...(valueAxisBounds ?? {}),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -159,7 +161,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 }
                 : { show: false },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: {
                     color: theme.axis.y.tickColor,
                     width: theme.axis.y.tickWidth,
@@ -269,9 +271,10 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
         showRegressionLine,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;