@wavemaker/react-native-echarts 1.0.0-dev.0 → 1.0.0-dev.10

package/README.md

@@ -1,7 +1,331 @@
 # @wavemaker/react-native-echarts
 
+[![npm package](https://img.shields.io/npm/v/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
+[![MIT License](https://img.shields.io/github/license/wavemaker/wm-react-native-echarts)](https://github.com/wavemaker/wm-react-native-echarts/blob/main/LICENSE)
+
+[![npm downloads](https://img.shields.io/npm/dm/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://github.com/wavemaker/wm-react-native-echarts)
+[![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](https://wavemaker.github.io/wm-react-native-echarts)
+
 React Native chart components built with ECharts (via `@wuba/react-native-echarts`) and Skia. Works with Expo and bare React Native. Visit storybook at https://wavemaker.github.io/wm-react-native-echarts for more details on how to use and examples.
 
+## Installation
+
+Install the package from npm:
+
+```bash
+npm install @wavemaker/react-native-echarts
+```
+
+The library declares peer dependencies. Add any your app does not already include (align versions with your React Native or Expo SDK):
+
+```bash
+npm install @shopify/react-native-skia @wuba/react-native-echarts echarts zrender react-native-svg
+```
+
+`react` and `react-native` are also peers; they should already be present in your app.
+
+**Note**:
+There is an issue with echarts library. Due to which compilation fails with an error. Here is the link to the issue.
+https://github.com/apache/echarts/pull/20485
+
+Till the issue is fixed, follow the workaround mentioned in the below link.
+https://github.com/wuba/react-native-echarts/issues/239#issuecomment-2899678660
+
+## Chart gallery
+
+Preview thumbnails for the chart examples in `assets/images/charts`. Each image uses the same width and height (200×200) so the layout stays even; `object-fit: contain` keeps aspect ratios readable.
+
+### Area
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--axes-area" target="_blank">
+          <img src="assets/images/charts/area/default.png" width="200" height="200" alt="Default" style="object-fit: contain;" />
+          <br />
+          <sub>Default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--area-without-axes" target="_blank">
+          <img src="assets/images/charts/area/without-axes.png" width="200" height="200" alt="Witout axes" style="object-fit: contain;" /><br /><sub>Witout axes</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--gradient-area" target="_blank">
+          <img src="assets/images/charts/area/with-gradient-bg.png" width="200" height="200" alt="With Gradient Bg" style="object-fit: contain;" /><br /><sub>With Gradient Bg</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Bar
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--horizontal-bar" target="_blank">
+          <img src="assets/images/charts/bar/horizontal-bar.png" width="200" height="200" alt="Horizontal bar chart" style="object-fit: contain;" /><br /><sub>horizontal-bar</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--custom-label-bar">
+          <img src="assets/images/charts/bar/labeled-bar.png" width="200" height="200" alt="Labeled bar chart" style="object-fit: contain;" /><br /><sub>labeled-bar</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--mixed-bar" target="_blank">
+          <img src="assets/images/charts/bar/mixed-bar.png" width="200" height="200" alt="Mixed bar chart" style="object-fit: contain;" /><br /><sub>mixed-bar</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Bubble
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble--default" target="_blank">
+          <img src="assets/images/charts/bubble/default.png" width="200" height="200" alt="Bubble chart default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble--show-legend">
+          <img src="assets/images/charts/bubble/multi-bubble.png" width="200" height="200" alt="Multi bubble chart" style="object-fit: contain;" /><br /><sub>multi-bubble</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble-symbol--pin" target="_blank">
+          <img src="assets/images/charts/bubble/pin-bublbe.png" width="200" height="200" alt="Bubble chart with pin" style="object-fit: contain;" /><br /><sub>pin-bublbe</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Candlestick
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--default" target="_blank">
+          <img src="assets/images/charts/candle-stick/default.png" width="200" height="200" alt="Candlestick default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--with-moving-average" target="_blank">
+          <img src="assets/images/charts/candle-stick/with-ma.png" width="200" height="200" alt="Candlestick with moving average" style="object-fit: contain;" /><br /><sub>with-ma</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--with-volume">
+          <img src="assets/images/charts/candle-stick/with-volume.png" width="200" height="200" alt="Candlestick with volume"  style="object-fit: contain;" /><br /><sub>with-volume</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Column
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--active-column">
+          <img src="assets/images/charts/column/active-column.png" width="200" height="200" alt="Active column chart" style="object-fit: contain;" /><br /><sub>active-column</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--multiple-series">
+          <img src="assets/images/charts/column/multi-series.png" width="200" height="200" alt="Multi-series column chart" style="object-fit: contain;" /><br /><sub>multi-series</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--standard-column">
+          <img src="assets/images/charts/column/standard.png" width="200" height="200" alt="Standard column chart" style="object-fit: contain;" /><br /><sub>standard</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Geo
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo-colors--custom-colors" target="_blank">
+          <img src="assets/images/charts/geo/colors.png" width="200" height="200" alt="Geo chart colors" style="object-fit: contain;" /><br /><sub>colors</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo--default" target="_blank">
+          <img src="assets/images/charts/geo/default.png" width="200" height="200" alt="Geo chart default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo-map--presidential-results" target="_blank">
+          <img src="assets/images/charts/geo/us-map.png" width="200" height="200" alt="US map geo chart" style="object-fit: contain;" /><br /><sub>us-map</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Gauge
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-digital--default" target="_blank">
+          <img src="assets/images/charts/guage/digital.png" width="200" height="200" alt="Digital gauge" style="object-fit: contain;" /><br /><sub>digital</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-radial--custom-scale" target="_blank">
+          <img src="assets/images/charts/guage/radial.png" width="200" height="200" alt="Radial gauge" style="object-fit: contain;" /><br /><sub>radial</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-simple--default" target="_blank">
+          <img src="assets/images/charts/guage/simple.png" width="200" height="200" alt="Simple gauge" style="object-fit: contain;" /><br /><sub>simple</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Line
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--multiple-series" target="_blank">
+          <img src="assets/images/charts/line/multi-line.png" width="200" height="200" alt="Multi-line chart" style="object-fit: contain;" /><br /><sub>multi-line</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--axes-line" target="_blank">
+          <img src="assets/images/charts/line/standard-line.png" width="200" height="200" alt="Standard line chart" style="object-fit: contain;" /><br /><sub>standard-line</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--default-line" target="_blank">
+          <img src="assets/images/charts/line/trend-line.png" width="200" height="200" alt="Trend line chart" style="object-fit: contain;" /><br /><sub>trend-line</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Pie
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie-concentric--two-rings" target="_blank">
+          <img src="assets/images/charts/pie/concentric.png" width="200" height="200" alt="Concentric pie chart" style="object-fit: contain;" /><br /><sub>concentric</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie-donut--donut" target="_blank">
+          <img src="assets/images/charts/pie/donut.png" width="200" height="200" alt="Donut chart" style="object-fit: contain;" /><br /><sub>donut</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie--default" target="_blank">
+          <img src="assets/images/charts/pie/pie.png" width="200" height="200" alt="Pie chart" style="object-fit: contain;" /><br /><sub>pie</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Radar
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar--default" target="_blank">
+          <img src="assets/images/charts/radar/default.png" width="200" height="200" alt="Radar chart default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar-multiple--default" target="_blank">
+          <img src="assets/images/charts/radar/multiple.png" width="200" height="200" alt="Multiple radar chart" style="object-fit: contain;" /><br /><sub>multiple</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar-symbol--circle" target="_blank">
+          <img src="assets/images/charts/radar/with-symbol.png" width="200" height="200" alt="Radar chart with symbol" style="object-fit: contain;" /><br /><sub>with-symbol</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Radial
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial-colors--custom-colors" target="_blank">
+          <img src="assets/images/charts/radial/custom-colors.png" width="200" height="200" alt="Radial chart custom colors" style="object-fit: contain;" /><br /><sub>custom-colors</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial--default" target="_blank">
+          <img src="assets/images/charts/radial/default.png" width="200" height="200" alt="Radial chart default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial-colors--background" target="_blank">
+          <img src="assets/images/charts/radial/with-bg.png" width="200" height="200" alt="Radial chart with background" style="object-fit: contain;" /><br /><sub>with-bg</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Scatter
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter--default" target="_blank">
+          <img src="assets/images/charts/scatter/default.png" width="200" height="200" alt="Scatter chart default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter-colors--multiple-series-colors" target="_blank">
+          <img src="assets/images/charts/scatter/multi.png" width="200" height="200" alt="Multi scatter chart" style="object-fit: contain;" /><br /><sub>multi</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter-symbol--triangle" target="_blank">
+          <img src="assets/images/charts/scatter/with-symbol.png" width="200" height="200" alt="Scatter chart with symbol" style="object-fit: contain;" /><br /><sub>with-symbol</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 ---
 
 ## Building the library (maintainers)
@@ -18,20 +342,53 @@ cd dist/npm-packages/charts && npm publish
 
 ## Development
 
-This repo is an Expo app. To run the app and Storybook:
+Work from the **repository root** (the directory that contains `package.json`, `components/`, and `stories/`).
+
+### Browser (Storybook)
+
+Storybook runs the chart stories in the browser with Vite. After install, it serves at **http://localhost:6006**.
 
 ```bash
 npm install
-npx expo start # for mobile preview
-npm run storybook # to checout the component stories 
+npm run storybook
 ```
 
+### Mobile (Expo sample app)
+
+The **`expo-app/`** project is a small Expo Router app that consumes the library via **[yalc](https://github.com/wclr/yalc)**. Install **`yalc` globally** first so those commands are on your `PATH`.
+
+```bash
+npm install -g yalc
+cd /path/to/repo # repository root directory
+npm install
+npm run generate:package
+cd expo-app
+npm install
+npx expo start
+```
+
+Whenever you change library source under `components/` or related entry points, run **`npm run generate:package`** again from the repo root so the yalc-linked package is rebuilt and republished. When changes are not reflecting in the app even after reload, use **`npx expo start -c`**.
+
 ---
 
 ## Maintainers
 
 This package is maintained by [WaveMaker](https://www.wavemaker.com/). The source repository is [wavemaker/wm-react-native-echarts](https://github.com/wavemaker/wm-react-native-echarts). Use [GitHub Issues](https://github.com/wavemaker/wm-react-native-echarts/issues) for bug reports and feature requests.
 
+### Contributors
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" width="96">
+        <a href="https://github.com/sboyina"><img src="https://avatars.githubusercontent.com/u/2254369?s=96&v=4" width="72" height="72" alt="sboyina" style="border-radius: 50%;" /><br /><sub><b>sboyina</b></sub></a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+
 ---
 
 ## License

package/area/area-chart.d.ts

@@ -1,6 +1,6 @@
 import type { AreaChartProps } from './area-chart.props';
 import React from 'react';
-export type { AreaChartProps, AreaChartSelectEvent, SeriesData, } from './area-chart.props';
+export type { AreaChartProps, AreaChartSelectEvent, AreaChartAxisTooltipParams, AreaChartTooltipSeriesItem, SeriesData, } from './area-chart.props';
 export declare const AreaChart: ((props: AreaChartProps & {
     theme?: Partial<import("..").ChartTheme>;
 } & {

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,EAAc,MAAM,oBAAoB,CAAC;AASrE,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,UAAU,GACX,MAAM,oBAAoB,CAAC;AAsc5B,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;AAuf5B,eAAO,MAAM,SAAS;;;;;;;CAEpB,CAAC"}

package/area/area-chart.js

@@ -1,11 +1,14 @@
 import { withResponsiveContainer } from '../chart-container';
 import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { createAxisTooltipPreset, useAxisTooltip } from '../cartesian/tooltip';
 import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
 import { LineChart } from 'echarts/charts';
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
-import { getAxis } from '../axis';
+import { View } from 'react-native';
+import { getAxis, valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { echartsLegendLayoutFragment, mergeCartesianGridForLegend, } from '../legend/echarts-legend-layout';
 // Register necessary components for this chart
 echarts.use([
     TooltipComponent,
@@ -14,14 +17,32 @@ 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, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, ...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 = true, legendPosition = 'bottom', 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);
     onSelectRef.current = onSelect;
-    const selectContextRef = useRef({
+    const axisTooltipContextRef = useRef({
         displaySeries: [],
-        xAxisData: [],
+        categoryAxisData: [],
+    });
+    const themeSeriesRef = useRef(theme.series);
+    themeSeriesRef.current = theme.series;
+    const tooltipOverlayActive = renderTooltip != null || tooltip !== 'none';
+    const renderTooltipFn = useMemo(() => {
+        if (renderTooltip != null)
+            return renderTooltip;
+        if (tooltip === 'none')
+            return () => null;
+        return createAxisTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachAxisTooltipListeners, renderAxisTooltipOverlay } = useAxisTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: axisTooltipContextRef,
+        themeSeriesRef,
+        width,
+        height,
     });
     // Derive smooth/step from type
     const effectiveSmooth = type === 'smooth';
@@ -85,31 +106,16 @@ 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]);
-    selectContextRef.current = { displaySeries, xAxisData };
+        return getAxis(dataPoints).map(String);
+    }, [normalizedSeries]);
+    axisTooltipContextRef.current = { displaySeries, categoryAxisData: xAxisData };
     const option = useMemo(() => {
-        // Build tooltip config
-        // axisPointer with snap: true so the pointer snaps to data points and triggers
-        // series emphasis (circle) at the hovered position. See https://echarts.apache.org/en/option.html#tooltip.axisPointer
-        const tooltipConfig = showHighlighter ? {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'line',
-                snap: true,
-                lineStyle: {
-                    type: 'solid',
-                    width: 1,
-                    color: theme.series[0].color ?? '#999',
-                },
-            },
-        } : null;
         // Build xAxis config (category with data indices)
         const xAxisConfig = {
             type: 'category',
@@ -135,7 +141,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,
@@ -148,15 +154,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',
@@ -180,7 +186,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,
@@ -195,16 +201,19 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
             },
         };
         // Build legend config
-        const legendConfigFinal = showLegend && hasNamedSeries ? {
-            data: normalizedSeries
-                .filter(s => 'name' in s && s.name)
-                .map(s => s.name),
-            textStyle: {
-                color: theme.legend.textColor,
-                fontSize: theme.legend.fontSize,
-            },
-            backgroundColor: theme.legend.backgroundColor,
-        } : undefined;
+        const legendConfigFinal = showLegend && hasNamedSeries
+            ? {
+                data: normalizedSeries
+                    .filter((s) => 'name' in s && s.name)
+                    .map((s) => s.name),
+                ...echartsLegendLayoutFragment(legendPosition),
+                textStyle: {
+                    color: theme.legend.textColor,
+                    fontSize: theme.legend.fontSize,
+                },
+                backgroundColor: theme.legend.backgroundColor,
+            }
+            : undefined;
         // Build series config (use displaySeries so stackNormalize uses percentage data)
         const seriesConfig = displaySeries.map((s, index) => {
             const seriesColor = theme.series[index % theme.series.length].color;
@@ -280,18 +289,31 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
             return series;
         });
         const config = {
-            tooltip: tooltipConfig,
             xAxis: xAxisConfig,
             yAxis: yAxisConfig,
             series: seriesConfig,
+            axisPointer: {
+                show: true,
+                type: 'line',
+                snap: true,
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#00000000',
+                    show: false,
+                },
+                label: {
+                    show: false,
+                }
+            }
         };
         // Add legend if configured
         if (legendConfigFinal) {
             config.legend = legendConfigFinal;
         }
-        // Add grid if configured
-        if (grid) {
-            config.grid = grid;
+        const mergedGrid = mergeCartesianGridForLegend(grid, legendPosition, showLegend, hasNamedSeries);
+        if (mergedGrid !== undefined && Object.keys(mergedGrid).length > 0) {
+            config.grid = mergedGrid;
         }
         return config;
     }, [
@@ -317,16 +339,20 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
         showYAxisSplitLines,
         grid,
         showLegend,
+        legendPosition,
         hasNamedSeries,
         showHighlighter,
+        tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;
+        let detachAxisTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -334,6 +360,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                     height: height,
                 });
                 chart.setOption(option);
+                detachAxisTooltip = attachAxisTooltipListeners(chart);
                 const handleSeriesClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -347,7 +374,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                         dataIndex < 0) {
                         return;
                     }
-                    const { displaySeries: ds, xAxisData: xd } = selectContextRef.current;
+                    const { displaySeries: ds, categoryAxisData: xd } = axisTooltipContextRef.current;
                     const s = ds[seriesIndex];
                     if (!s?.data || !Array.isArray(s.data))
                         return;
@@ -386,6 +413,7 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
             }
         }
         return () => {
+            detachAxisTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -395,8 +423,11 @@ const ChartComponent = ({ data, width = 220, height = 350, type = 'default', ste
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachAxisTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderAxisTooltipOverlay()}
+    </View>);
 };
 const AreaChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const AreaChart = Object.assign(AreaChartComponent, {