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

package/bubble/bubble-chart.js

@@ -0,0 +1,305 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { ScatterChart as EChartsScatterChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+echarts.use([
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    SkiaRenderer,
+    EChartsScatterChart,
+]);
+function scaleSize(value, dataMin, dataMax, outMin, outMax) {
+    if (dataMax <= dataMin)
+        return outMin;
+    const t = (value - dataMin) / (dataMax - dataMin);
+    return outMin + t * (outMax - outMin);
+}
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = [8, 50], showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const selectContextRef = useRef({ normalizedSeries: [] });
+    const normalizedSeries = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return [];
+        const first = data[0];
+        if (Array.isArray(first) && first.length >= 2 && typeof first[0] === 'number') {
+            const rows = data;
+            const normalized = rows.map((row) => {
+                const x = Number(row[0]);
+                const y = Number(row[1]);
+                const size = row.length >= 3 && typeof row[2] === 'number' ? Number(row[2]) : 10;
+                return [x, y, size];
+            });
+            return [{ data: normalized }];
+        }
+        if (typeof first === 'object' && first !== null && 'data' in first) {
+            return data.map((s) => ({
+                name: s.name,
+                data: s.data.map((row) => {
+                    const x = Number(row[0]);
+                    const y = Number(row[1]);
+                    const size = row.length >= 3 && typeof row[2] === 'number' ? Number(row[2]) : 10;
+                    return [x, y, size];
+                }),
+            }));
+        }
+        return [];
+    }, [data]);
+    const hasNamedSeries = useMemo(() => normalizedSeries.some((s) => 'name' in s && s.name), [normalizedSeries]);
+    selectContextRef.current = { normalizedSeries };
+    const option = useMemo(() => {
+        const tooltipConfig = showHighlighter
+            ? {
+                trigger: 'item',
+                axisPointer: {
+                    type: 'cross',
+                    lineStyle: {
+                        type: 'line',
+                        width: 1,
+                        color: theme.series[0]?.color ?? '#999',
+                    },
+                },
+                formatter: (params) => {
+                    const p = Array.isArray(params) ? params[0] : params;
+                    const d = p?.data;
+                    if (!d || !Array.isArray(d))
+                        return '';
+                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
+                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
+                },
+            }
+            : {
+                trigger: 'item',
+                formatter: (params) => {
+                    const p = Array.isArray(params) ? params[0] : params;
+                    const d = p?.data;
+                    if (!d || !Array.isArray(d))
+                        return '';
+                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
+                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
+                },
+            };
+        const xAxisConfig = {
+            type: 'value',
+            boundaryGap,
+            ...(xAxisLabel != null && xAxisLabel !== '' && {
+                name: xAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 25,
+                nameTextStyle: { color: theme.axis.x.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showXAxis || xAxisTickLabelFormatter != null,
+                color: theme.axis.x.tickLabelColor,
+                ...(xAxisTickLabelFormatter && { formatter: xAxisTickLabelFormatter }),
+            },
+            axisLine: showXAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.x.lineColor,
+                        width: theme.axis.x.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: {
+                show: 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,
+                },
+            },
+        };
+        const yAxisConfig = {
+            type: 'value',
+            ...(yAxisLabel != null && yAxisLabel !== '' && {
+                name: yAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 40,
+                nameTextStyle: { color: theme.axis.y.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showYAxis || yAxisTickLabelFormatter != null,
+                color: theme.axis.y.tickLabelColor,
+                ...(yAxisTickLabelFormatter && { formatter: yAxisTickLabelFormatter }),
+            },
+            axisLine: showYAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.y.lineColor,
+                        width: theme.axis.y.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: {
+                show: showYAxisTicks,
+                lineStyle: {
+                    color: theme.axis.y.tickColor,
+                    width: theme.axis.y.tickWidth,
+                },
+            },
+            splitLine: {
+                show: showYAxisSplitLines,
+                lineStyle: {
+                    color: theme.axis.y.splitLineColor,
+                    width: theme.axis.y.splitLineWidth,
+                },
+            },
+        };
+        const legendConfig = 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 [sizeMinPx, sizeMaxPx] = sizeRange;
+        const seriesConfig = [];
+        normalizedSeries.forEach((s, index) => {
+            const seriesColor = theme.series[index % theme.series.length].color;
+            const seriesData = 'data' in s ? s.data : [];
+            const seriesName = 'name' in s && s.name ? s.name : undefined;
+            const sizes = seriesData.map((d) => d[2]);
+            const dataSizeMin = sizes.length ? Math.min(...sizes) : 0;
+            const dataSizeMax = sizes.length ? Math.max(...sizes) : 10;
+            const scatterSeries = {
+                type: 'scatter',
+                data: seriesData,
+                symbol: symbol === 'none' ? 'circle' : symbol,
+                symbolSize: (value, params) => {
+                    const d = params.data;
+                    const sizeVal = Array.isArray(d) && typeof d[2] === 'number' ? d[2] : 10;
+                    return scaleSize(sizeVal, dataSizeMin, dataSizeMax, sizeMinPx, sizeMaxPx);
+                },
+                itemStyle: { color: seriesColor },
+                emphasis: showHighlighter
+                    ? {
+                        focus: 'self',
+                        scale: true,
+                        itemStyle: {
+                            color: seriesColor,
+                            borderColor: '#FFFFFF',
+                            borderWidth: 2,
+                        },
+                    }
+                    : { focus: 'none', scale: false },
+            };
+            if (seriesName)
+                scatterSeries.name = seriesName;
+            seriesConfig.push(scatterSeries);
+        });
+        const config = {
+            tooltip: tooltipConfig,
+            xAxis: xAxisConfig,
+            yAxis: yAxisConfig,
+            series: seriesConfig,
+        };
+        if (legendConfig)
+            config.legend = legendConfig;
+        if (grid)
+            config.grid = grid;
+        return config;
+    }, [
+        theme,
+        normalizedSeries,
+        symbol,
+        sizeRange,
+        showXAxis,
+        showXAxisTicks,
+        showYAxis,
+        showYAxisTicks,
+        showXAxisSplitLines,
+        showYAxisSplitLines,
+        boundaryGap,
+        grid,
+        showLegend,
+        hasNamedSeries,
+        showHighlighter,
+        xAxisTickLabelFormatter,
+        yAxisTickLabelFormatter,
+        xAxisLabel,
+        yAxisLabel,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', { width, height });
+                chart.setOption(option);
+                const handleSeriesClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'scatter')
+                        return;
+                    const seriesIndex = params.seriesIndex;
+                    const dataIndex = params.dataIndex;
+                    if (typeof seriesIndex !== 'number' ||
+                        typeof dataIndex !== 'number' ||
+                        dataIndex < 0) {
+                        return;
+                    }
+                    const { normalizedSeries: ns } = selectContextRef.current;
+                    const s = ns[seriesIndex];
+                    if (!s?.data || !Array.isArray(s.data))
+                        return;
+                    const point = s.data[dataIndex];
+                    if (!point || point.length < 2)
+                        return;
+                    const seriesName = s.name != null && s.name !== ''
+                        ? String(s.name)
+                        : `Series ${seriesIndex + 1}`;
+                    const event = {
+                        seriesIndex,
+                        dataIndex,
+                        seriesName,
+                        x: point[0],
+                        y: Number(point[1]),
+                        ...(typeof point[2] === 'number' ? { z: point[2] } : {}),
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleSeriesClick);
+            }
+            catch (error) {
+                console.warn('Chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const BubbleChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const BubbleChart = Object.assign(BubbleChartComponent, {
+    displayName: 'BubbleChart',
+});

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

@@ -0,0 +1,26 @@
+import type { ScatterChartProps } from '../scatter/scatter-chart.props';
+/**
+ * Bubble data: [x, y, size]. The third value (size) drives the bubble radius.
+ * - Single series: [number, number, number][]
+ * - Multiple series: Array<{ name: string; data: [number, number, number][] }>
+ */
+export type BubbleSeriesData = [number, number, number][] | Array<{
+    name: string;
+    data: [number, number, number][];
+}>;
+/**
+ * Props for BubbleChart.
+ * common -> cartesian -> scatter -> bubble
+ */
+export interface BubbleChartProps extends Omit<ScatterChartProps, 'data' | 'symbolSize'> {
+    /**
+     * Bubble data: array of [x, y, size] per series. Size drives bubble radius.
+     */
+    data: BubbleSeriesData;
+    /**
+     * Pixel size range [min, max] for scaling the third data value to bubble radius.
+     * @default [8, 50]
+     */
+    sizeRange?: [number, number];
+}
+//# sourceMappingURL=bubble-chart.props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/bubble-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAExE;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GACxB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAC1B,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,YAAY,CAAC;IACtF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B"}

package/bubble/index.d.ts

@@ -0,0 +1,3 @@
+export { BubbleChart } from './bubble-chart';
+export type { BubbleChartProps, BubbleSeriesData } from './bubble-chart.props';
+//# sourceMappingURL=index.d.ts.map

package/bubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/bubble/index.js

@@ -0,0 +1 @@
+export { BubbleChart } from './bubble-chart';

package/candlestick/candlestick-chart.d.ts

@@ -0,0 +1,12 @@
+import type { CandlestickChartProps } from './candlestick-chart.props';
+import React from 'react';
+export type { CandlestickChartProps, CandlestickData, CandlestickItem } from './candlestick-chart.props';
+export declare const CandlestickChart: ((props: CandlestickChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=candlestick-chart.d.ts.map

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

@@ -0,0 +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"}

package/candlestick/candlestick-chart.js

@@ -0,0 +1,292 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { BarChart, CandlestickChart as EChartsCandlestickChart, LineChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+echarts.use([
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    SkiaRenderer,
+    EChartsCandlestickChart,
+    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 { 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]);
+    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 tooltipConfig = showHighlighter
+            ? {
+                trigger: 'axis',
+                axisPointer: { type: 'cross' },
+            }
+            : { trigger: 'axis' };
+        const volumeColorUp = positiveColor + '40';
+        const volumeColorDown = negativeColor + '40';
+        const mainGrid = hasVolume
+            ? { left: '10%', right: '8%', top: '8%', height: '55%' }
+            : grid ?? { left: '10%', right: '8%', top: '8%', bottom: '15%' };
+        const volumeGrid = hasVolume
+            ? { left: '10%', right: '8%', top: '72%', height: '18%' }
+            : undefined;
+        const xAxisMain = {
+            type: 'category',
+            data: categories,
+            boundaryGap,
+            ...(xAxisLabel != null && xAxisLabel !== '' && {
+                name: xAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 25,
+                nameTextStyle: { color: theme.axis.x.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showXAxis || xAxisTickLabelFormatter != null,
+                color: theme.axis.x.tickLabelColor,
+                formatter: xAxisTickLabelFormatter ?? undefined,
+            },
+            axisLine: showXAxis
+                ? { show: true, lineStyle: { color: theme.axis.x.lineColor, width: theme.axis.x.lineWidth } }
+                : { show: false },
+            axisTick: {
+                show: 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 },
+            },
+        };
+        if (hasVolume) {
+            xAxisMain.gridIndex = 0;
+            xAxisMain.axisLabel = { ...xAxisMain.axisLabel, show: false };
+        }
+        const yAxisMain = {
+            type: 'value',
+            scale: true,
+            ...(yAxisLabel != null && yAxisLabel !== '' && {
+                name: yAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 40,
+                nameTextStyle: { color: theme.axis.y.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showYAxis || yAxisTickLabelFormatter != null,
+                color: theme.axis.y.tickLabelColor,
+                formatter: yAxisTickLabelFormatter ?? undefined,
+            },
+            axisLine: showYAxis
+                ? { show: true, lineStyle: { color: theme.axis.y.lineColor, width: theme.axis.y.lineWidth } }
+                : { show: false },
+            axisTick: {
+                show: showYAxisTicks,
+                lineStyle: { color: theme.axis.y.tickColor, width: theme.axis.y.tickWidth },
+            },
+            splitLine: {
+                show: showYAxisSplitLines,
+                lineStyle: { color: theme.axis.y.splitLineColor, width: theme.axis.y.splitLineWidth },
+            },
+        };
+        if (hasVolume)
+            yAxisMain.gridIndex = 0;
+        const candlestickSeries = {
+            type: 'candlestick',
+            data,
+            itemStyle: {
+                color: positiveColor,
+                color0: negativeColor,
+                borderColor: positiveColor,
+                borderColor0: negativeColor,
+            },
+            emphasis: showHighlighter ? { focus: 'self' } : { focus: 'none' },
+        };
+        if (hasVolume) {
+            candlestickSeries.xAxisIndex = 0;
+            candlestickSeries.yAxisIndex = 0;
+        }
+        const series = [candlestickSeries];
+        if (ma5?.length) {
+            series.push({
+                type: 'line',
+                name: 'MA5',
+                data: ma5,
+                smooth: true,
+                symbol: 'none',
+                lineStyle: { width: 2, color: theme.series[2]?.color ?? '#ff9800' },
+                xAxisIndex: hasVolume ? 0 : undefined,
+                yAxisIndex: hasVolume ? 0 : undefined,
+            });
+        }
+        if (ma10?.length) {
+            series.push({
+                type: 'line',
+                name: 'MA10',
+                data: ma10,
+                smooth: true,
+                symbol: 'none',
+                lineStyle: { width: 2, color: theme.series[3]?.color ?? '#2196f3' },
+                xAxisIndex: hasVolume ? 0 : undefined,
+                yAxisIndex: hasVolume ? 0 : undefined,
+            });
+        }
+        if (ma20?.length) {
+            series.push({
+                type: 'line',
+                name: 'MA20',
+                data: ma20,
+                smooth: true,
+                symbol: 'none',
+                lineStyle: { width: 2, color: theme.series[4]?.color ?? '#9c27b0' },
+                xAxisIndex: hasVolume ? 0 : undefined,
+                yAxisIndex: hasVolume ? 0 : undefined,
+            });
+        }
+        const config = {
+            tooltip: tooltipConfig,
+            grid: hasVolume ? [mainGrid, volumeGrid] : mainGrid,
+            xAxis: hasVolume ? [xAxisMain, { ...xAxisMain, gridIndex: 1, axisLabel: { ...xAxisMain.axisLabel, show: true } }] : xAxisMain,
+            yAxis: hasVolume
+                ? [
+                    yAxisMain,
+                    {
+                        type: 'value',
+                        gridIndex: 1,
+                        axisLabel: { show: true, color: theme.axis.y.tickLabelColor },
+                        axisLine: { show: false },
+                        axisTick: { show: false },
+                        splitLine: { show: showYAxisSplitLines, lineStyle: { color: theme.axis.y.splitLineColor } },
+                    },
+                ]
+                : yAxisMain,
+            series,
+        };
+        if (hasVolume) {
+            const volumeBarData = volumeData.map((v, i) => {
+                const ohlc = data[i];
+                const isUp = ohlc && ohlc[1] >= ohlc[0];
+                return { value: v, itemStyle: { color: isUp ? volumeColorUp : volumeColorDown } };
+            });
+            series.push({
+                type: 'bar',
+                name: 'Volume',
+                xAxisIndex: 1,
+                yAxisIndex: 1,
+                data: volumeBarData,
+                emphasis: showHighlighter ? { focus: 'self' } : { focus: 'none' },
+            });
+        }
+        if (showLegend && hasMA) {
+            config.legend = {
+                data: ['MA5', 'MA10', 'MA20'].filter((name) => {
+                    if (name === 'MA5')
+                        return ma5?.length;
+                    if (name === 'MA10')
+                        return ma10?.length;
+                    return ma20?.length;
+                }),
+                textStyle: { color: theme.legend.textColor, fontSize: theme.legend.fontSize },
+                backgroundColor: theme.legend.backgroundColor,
+            };
+        }
+        return config;
+    }, [
+        data,
+        categories,
+        volumeData,
+        ma5,
+        ma10,
+        ma20,
+        hasVolume,
+        hasMA,
+        theme,
+        boundaryGap,
+        showXAxis,
+        showXAxisTicks,
+        showYAxis,
+        showYAxisTicks,
+        showXAxisSplitLines,
+        showYAxisSplitLines,
+        grid,
+        showLegend,
+        showHighlighter,
+        positiveColor,
+        negativeColor,
+        xAxisTickLabelFormatter,
+        yAxisTickLabelFormatter,
+        xAxisTicks,
+        xAxisLabel,
+        yAxisLabel,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', { width, height });
+                chart.setOption(option);
+                const handleSeriesClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'candlestick')
+                        return;
+                    const dataIndex = params.dataIndex;
+                    if (typeof dataIndex !== 'number' || dataIndex < 0)
+                        return;
+                    const { categories: cats, ohlcData } = selectContextRef.current;
+                    const row = ohlcData[dataIndex];
+                    if (!row || row.length < 4)
+                        return;
+                    const [open, close, low, high] = row;
+                    const x = cats[dataIndex] ?? dataIndex;
+                    const event = {
+                        seriesIndex: params.seriesIndex ?? 0,
+                        dataIndex,
+                        seriesName: 'Candlestick',
+                        x,
+                        y: close,
+                        ohlc: { open, close, low, high },
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleSeriesClick);
+            }
+            catch (error) {
+                console.warn('Candlestick chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Candlestick chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const CandlestickChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const CandlestickChart = Object.assign(CandlestickChartComponent, {
+    displayName: 'CandlestickChart',
+});