@qfo/qfchart 0.5.7 → 0.6.1

package/src/QFChart.ts

@@ -20,6 +20,7 @@ export class QFChart implements ChartContext {
     public events: EventBus = new EventBus();
     private isMainCollapsed: boolean = false;
     private maximizedPaneId: string | null = null;
+    private countdownInterval: any = null;
 
     private selectedDrawingId: string | null = null; // Track selected drawing
 
@@ -178,7 +179,19 @@ export class QFChart implements ChartContext {
         this.drawingEditor = new DrawingEditor(this);
 
         // Bind global chart/ZRender events to the EventBus
-        this.chart.on('dataZoom', (params: any) => this.events.emit('chart:dataZoom', params));
+        this.chart.on('dataZoom', (params: any) => {
+            this.events.emit('chart:dataZoom', params);
+            
+            // Auto-hide tooltip when dragging chart if triggerOn is 'click' and position is 'floating'
+            const triggerOn = this.options.databox?.triggerOn;
+            const position = this.options.databox?.position;
+            if (triggerOn === 'click' && position === 'floating') {
+                // Hide tooltip by dispatching a hideTooltip action
+                this.chart.dispatchAction({
+                    type: 'hideTip'
+                });
+            }
+        });
         // @ts-ignore - ECharts event handler type mismatch
         this.chart.on('finished', (params: any) => this.events.emit('chart:updated', params)); // General chart update
         // @ts-ignore - ECharts ZRender event handler type mismatch
@@ -622,9 +635,13 @@ export class QFChart implements ChartContext {
         const paddingPoints = this.dataIndexOffset;
 
         // Build candlestick data with padding
-        const candlestickData = this.marketData.map((d) => [d.open, d.close, d.low, d.high]);
+        const candlestickSeries = SeriesBuilder.buildCandlestickSeries(this.marketData, this.options);
         const emptyCandle = { value: [NaN, NaN, NaN, NaN], itemStyle: { opacity: 0 } };
-        const paddedCandlestickData = [...Array(paddingPoints).fill(emptyCandle), ...candlestickData, ...Array(paddingPoints).fill(emptyCandle)];
+        const paddedCandlestickData = [
+            ...Array(paddingPoints).fill(emptyCandle),
+            ...candlestickSeries.data,
+            ...Array(paddingPoints).fill(emptyCandle),
+        ];
 
         // Build category data with padding
         const categoryData = [
@@ -635,7 +652,14 @@ export class QFChart implements ChartContext {
 
         // Build indicator series data
         const currentOption = this.chart.getOption() as any;
-        const layout = LayoutManager.calculate(this.chart.getHeight(), this.indicators, this.options, this.isMainCollapsed, this.maximizedPaneId);
+        const layout = LayoutManager.calculate(
+            this.chart.getHeight(),
+            this.indicators,
+            this.options,
+            this.isMainCollapsed,
+            this.maximizedPaneId,
+            this.marketData
+        );
 
         // Pass full padded candlestick data for shape positioning
         // But SeriesBuilder expects 'OHLCV[]', while paddedCandlestickData is array of arrays [open,close,low,high]
@@ -649,15 +673,33 @@ export class QFChart implements ChartContext {
 
         const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
 
-        const indicatorSeries = SeriesBuilder.buildIndicatorSeries(
+        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
             this.indicators,
             this.timeToIndex,
             layout.paneLayout,
             categoryData.length,
             paddingPoints,
-            paddedOHLCVForShapes // Pass padded OHLCV data
+            paddedOHLCVForShapes, // Pass padded OHLCV data
+            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
+            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
         );
 
+        // Apply barColors to candlestick data
+        const coloredCandlestickData = paddedCandlestickData.map((candle: any, i: number) => {
+            if (barColors[i]) {
+                return {
+                    value: candle.value || candle,
+                    itemStyle: {
+                        color: barColors[i],
+                        color0: barColors[i],
+                        borderColor: barColors[i],
+                        borderColor0: barColors[i],
+                    },
+                };
+            }
+            return candle;
+        });
+
         // Update only the data arrays in the option, not the full config
         const updateOption: any = {
             xAxis: currentOption.xAxis.map((axis: any, index: number) => ({
@@ -665,16 +707,133 @@ export class QFChart implements ChartContext {
             })),
             series: [
                 {
-                    data: paddedCandlestickData,
+                    data: coloredCandlestickData,
+                    markLine: candlestickSeries.markLine, // Ensure markLine is updated
                 },
-                ...indicatorSeries.map((s) => ({
-                    data: s.data,
-                })),
+                ...indicatorSeries.map((s) => {
+                    const update: any = { data: s.data };
+                    // If the series has a renderItem function (custom series like background),
+                    // we MUST update it because it likely closes over variables (colorArray)
+                    // from the SeriesBuilder scope which have been recreated.
+                    if (s.renderItem) {
+                        update.renderItem = s.renderItem;
+                    }
+                    return update;
+                }),
             ],
         };
 
         // Merge the update (don't replace entire config)
         this.chart.setOption(updateOption, { notMerge: false });
+
+        // Update countdown if needed
+        this.startCountdown();
+    }
+
+    private startCountdown() {
+        // Stop existing timer
+        this.stopCountdown();
+
+        if (!this.options.lastPriceLine?.showCountdown || !this.options.interval || this.marketData.length === 0) {
+            return;
+        }
+
+        const updateLabel = () => {
+            if (this.marketData.length === 0) return;
+            const lastBar = this.marketData[this.marketData.length - 1];
+            const nextCloseTime = lastBar.time + (this.options.interval || 0);
+            const now = Date.now();
+            const diff = nextCloseTime - now;
+
+            if (diff <= 0) {
+                // Timer expired (bar closed), maybe wait for next update
+                // Or show 00:00:00
+                return;
+            }
+
+            // Format time
+            const absDiff = Math.abs(diff);
+            const hours = Math.floor(absDiff / 3600000);
+            const minutes = Math.floor((absDiff % 3600000) / 60000);
+            const seconds = Math.floor((absDiff % 60000) / 1000);
+
+            const timeString = `${hours > 0 ? hours.toString().padStart(2, '0') + ':' : ''}${minutes.toString().padStart(2, '0')}:${seconds
+                .toString()
+                .padStart(2, '0')}`;
+
+            // Update markLine label
+            // We need to find the candlestick series index (usually 0)
+            // But we can update by name if unique, or by index. SeriesBuilder sets name to options.title or 'Market'
+            // Safest is to modify the option directly for series index 0 (if that's where candle is)
+            // Or better, check current option
+            const currentOption = this.chart.getOption() as any;
+            if (!currentOption || !currentOption.series) return;
+
+            // Find candlestick series (type 'candlestick')
+            const candleSeriesIndex = currentOption.series.findIndex((s: any) => s.type === 'candlestick');
+            if (candleSeriesIndex === -1) return;
+
+            const candleSeries = currentOption.series[candleSeriesIndex];
+            if (!candleSeries.markLine || !candleSeries.markLine.data || !candleSeries.markLine.data[0]) return;
+
+            const markLineData = candleSeries.markLine.data[0];
+            const currentFormatter = markLineData.label.formatter;
+
+            // We need to preserve the price formatting logic.
+            // But formatter is a function in the option we passed, but ECharts might have stored it?
+            // ECharts getOption() returns the merged option. Functions are preserved.
+            // We can wrap the formatter or just use the price value.
+            // markLineData.yAxis is the price.
+
+            const price = markLineData.yAxis;
+            let priceStr = '';
+
+            // Re-use formatting logic from options if possible, or simple fix
+            if (this.options.yAxisLabelFormatter) {
+                priceStr = this.options.yAxisLabelFormatter(price);
+            } else {
+                const decimals = this.options.yAxisDecimalPlaces !== undefined ? this.options.yAxisDecimalPlaces : 2;
+                priceStr = typeof price === 'number' ? price.toFixed(decimals) : price;
+            }
+
+            const labelText = `${priceStr}\n${timeString}`;
+
+            // Reconstruct the markLine data to preserve styles (lineStyle, symbol, etc.)
+            // We spread markLineData to keep everything (including lineStyle which defines color),
+            // then overwrite the label to update the formatter/text.
+
+            this.chart.setOption({
+                series: [
+                    {
+                        name: this.options.title || 'Market',
+                        markLine: {
+                            data: [
+                                {
+                                    ...markLineData, // Preserve lineStyle (color), symbol, yAxis, etc.
+                                    label: {
+                                        ...markLineData.label, // Preserve existing label styles including backgroundColor
+                                        formatter: labelText, // Update only the text
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            });
+        };
+
+        // Run immediately
+        updateLabel();
+
+        // Start interval
+        this.countdownInterval = setInterval(updateLabel, 1000);
+    }
+
+    private stopCountdown() {
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
     }
 
     public addIndicator(
@@ -764,6 +923,7 @@ export class QFChart implements ChartContext {
     }
 
     public destroy(): void {
+        this.stopCountdown();
         window.removeEventListener('resize', this.resize.bind(this));
         document.removeEventListener('fullscreenchange', this.onFullscreenChange);
         document.removeEventListener('keydown', this.onKeyDown);
@@ -835,9 +995,42 @@ export class QFChart implements ChartContext {
         ];
 
         // 1. Calculate Layout
-        const layout = LayoutManager.calculate(this.chart.getHeight(), this.indicators, this.options, this.isMainCollapsed, this.maximizedPaneId);
+        const layout = LayoutManager.calculate(
+            this.chart.getHeight(),
+            this.indicators,
+            this.options,
+            this.isMainCollapsed,
+            this.maximizedPaneId,
+            this.marketData
+        );
+
+        // Convert user-provided dataZoom start/end to account for padding
+        // User's start/end refer to real data (0% = start of real data, 100% = end of real data)
+        // We need to convert to padded data coordinates
+        if (!currentZoomState && layout.dataZoom && this.marketData.length > 0) {
+            const realDataLength = this.marketData.length;
+            const totalLength = categoryData.length; // includes padding on both sides
+            const paddingRatio = paddingPoints / totalLength;
+            const dataRatio = realDataLength / totalLength;
+
+            layout.dataZoom.forEach((dz) => {
+                // Convert user's start/end (0-100 referring to real data) to actual start/end (0-100 referring to padded data)
+                if (dz.start !== undefined) {
+                    // User's start% of real data -> actual position in padded data
+                    const userStartFraction = dz.start / 100;
+                    const actualStartFraction = paddingRatio + userStartFraction * dataRatio;
+                    dz.start = actualStartFraction * 100;
+                }
+                if (dz.end !== undefined) {
+                    // User's end% of real data -> actual position in padded data
+                    const userEndFraction = dz.end / 100;
+                    const actualEndFraction = paddingRatio + userEndFraction * dataRatio;
+                    dz.end = actualEndFraction * 100;
+                }
+            });
+        }
 
-        // Apply preserved zoom state if available
+        // Apply preserved zoom state if available (this overrides the conversion above)
         if (currentZoomState && layout.dataZoom) {
             layout.dataZoom.forEach((dz) => {
                 dz.start = currentZoomState!.start;
@@ -860,15 +1053,33 @@ export class QFChart implements ChartContext {
         // Build array of OHLCV aligned with indices for shape positioning
         const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
 
-        const indicatorSeries = SeriesBuilder.buildIndicatorSeries(
+        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
             this.indicators,
             this.timeToIndex,
             layout.paneLayout,
             categoryData.length,
             paddingPoints,
-            paddedOHLCVForShapes // Pass padded OHLCV
+            paddedOHLCVForShapes, // Pass padded OHLCV
+            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
+            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
         );
 
+        // Apply barColors to candlestick data
+        candlestickSeries.data = candlestickSeries.data.map((candle: any, i: number) => {
+            if (barColors[i]) {
+                return {
+                    value: candle.value || candle,
+                    itemStyle: {
+                        color: barColors[i],
+                        color0: barColors[i],
+                        borderColor: barColors[i],
+                        borderColor0: barColors[i],
+                    },
+                };
+            }
+            return candle;
+        });
+
         // 3. Build Graphics
         const graphic = GraphicBuilder.build(layout, this.options, this.toggleIndicator.bind(this), this.isMainCollapsed, this.maximizedPaneId);
 
@@ -1178,6 +1389,7 @@ export class QFChart implements ChartContext {
                 show: true,
                 showContent: !!this.options.databox, // Show content only if databox is present
                 trigger: 'axis',
+                triggerOn: this.options.databox?.triggerOn ?? 'mousemove', // Control when to show tooltip/crosshair
                 axisPointer: { type: 'cross', label: { backgroundColor: '#475569' } },
                 backgroundColor: 'rgba(30, 41, 59, 0.9)',
                 borderWidth: 1,

package/src/components/LayoutManager.ts

@@ -30,14 +30,35 @@ export class LayoutManager {
         indicators: Map<string, IndicatorType>,
         options: QFChartOptions,
         isMainCollapsed: boolean = false,
-        maximizedPaneId: string | null = null
-    ): LayoutResult {
+        maximizedPaneId: string | null = null,
+        marketData?: import('../types').OHLCV[]
+    ): LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number } {
         // Calculate pixelToPercent early for maximized logic
         let pixelToPercent = 0;
         if (containerHeight > 0) {
             pixelToPercent = (1 / containerHeight) * 100;
         }
 
+        // Get Y-axis padding percentage (default 5%)
+        const yAxisPaddingPercent = options.yAxisPadding !== undefined ? options.yAxisPadding : 5;
+
+        // Create min/max functions that apply padding
+        const createMinFunction = (paddingPercent: number) => {
+            return (value: any) => {
+                const range = value.max - value.min;
+                const padding = range * (paddingPercent / 100);
+                return value.min - padding;
+            };
+        };
+
+        const createMaxFunction = (paddingPercent: number) => {
+            return (value: any) => {
+                const range = value.max - value.min;
+                const padding = range * (paddingPercent / 100);
+                return value.max + padding;
+            };
+        };
+
         // Identify unique separate panes (indices > 0) and sort them
         const separatePaneIndices = Array.from(indicators.values())
             .map((ind) => ind.paneIndex)
@@ -92,7 +113,11 @@ export class LayoutManager {
             const dzStart = options.dataZoom?.start ?? 50;
             const dzEnd = options.dataZoom?.end ?? 100;
 
-            dataZoom.push({ type: 'inside', xAxisIndex: 'all', start: dzStart, end: dzEnd });
+            // Add 'inside' zoom only if zoomOnTouch is enabled (default true)
+            const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
+            if (zoomOnTouch) {
+                dataZoom.push({ type: 'inside', xAxisIndex: 'all', start: dzStart, end: dzEnd });
+            }
 
             // Need to know total panes to iterate
             const maxPaneIndex = hasSeparatePane ? Math.max(...separatePaneIndices) : 0;
@@ -132,15 +157,41 @@ export class LayoutManager {
                 });
 
                 // Y-Axis
+                // For maximized pane 0 (main), respect custom min/max if provided
+                let yMin: any;
+                let yMax: any;
+
+                if (i === 0 && maximizeTargetIndex === 0) {
+                    // Main pane is maximized, use custom values if provided
+                    yMin = options.yAxisMin !== undefined && options.yAxisMin !== 'auto' ? options.yAxisMin : createMinFunction(yAxisPaddingPercent);
+                    yMax = options.yAxisMax !== undefined && options.yAxisMax !== 'auto' ? options.yAxisMax : createMaxFunction(yAxisPaddingPercent);
+                } else {
+                    // Separate panes always use dynamic scaling
+                    yMin = createMinFunction(yAxisPaddingPercent);
+                    yMax = createMaxFunction(yAxisPaddingPercent);
+                }
+
                 yAxis.push({
                     position: 'right',
                     gridIndex: i,
                     show: isTarget,
                     scale: true,
+                    min: yMin,
+                    max: yMax,
                     axisLabel: {
                         show: isTarget,
                         color: '#94a3b8',
                         fontFamily: options.fontFamily,
+                        formatter: (value: number) => {
+                            if (options.yAxisLabelFormatter) {
+                                return options.yAxisLabelFormatter(value);
+                            }
+                            const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
+                            if (typeof value === 'number') {
+                                return value.toFixed(decimals);
+                            }
+                            return String(value);
+                        },
                     },
                     splitLine: {
                         show: isTarget,
@@ -176,6 +227,8 @@ export class LayoutManager {
                 mainPaneHeight: maximizeTargetIndex === 0 ? 90 : 0,
                 mainPaneTop: maximizeTargetIndex === 0 ? 5 : 0,
                 pixelToPercent,
+                overlayYAxisMap: new Map(), // No overlays in maximized view
+                separatePaneYAxisOffset: 1, // In maximized view, no overlays, so separate panes start at 1
             };
         }
 
@@ -320,6 +373,16 @@ export class LayoutManager {
                 show: !isMainCollapsed,
                 color: '#94a3b8',
                 fontFamily: options.fontFamily || 'sans-serif',
+                formatter: (value: number) => {
+                    if (options.yAxisLabelFormatter) {
+                        return options.yAxisLabelFormatter(value);
+                    }
+                    const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
+                    if (typeof value === 'number') {
+                        return value.toFixed(decimals);
+                    }
+                    return String(value);
+                },
             },
             axisTick: { show: !isMainCollapsed },
             axisPointer: {
@@ -354,10 +417,29 @@ export class LayoutManager {
 
         // --- Generate Y-Axes ---
         const yAxis: any[] = [];
-        // Main Y-Axis
+
+        // Determine min/max for main Y-axis (respect custom values if provided)
+        let mainYAxisMin: any;
+        let mainYAxisMax: any;
+
+        if (options.yAxisMin !== undefined && options.yAxisMin !== 'auto') {
+            mainYAxisMin = options.yAxisMin;
+        } else {
+            mainYAxisMin = createMinFunction(yAxisPaddingPercent);
+        }
+
+        if (options.yAxisMax !== undefined && options.yAxisMax !== 'auto') {
+            mainYAxisMax = options.yAxisMax;
+        } else {
+            mainYAxisMax = createMaxFunction(yAxisPaddingPercent);
+        }
+
+        // Main Y-Axis (for candlesticks)
         yAxis.push({
             position: 'right',
             scale: true,
+            min: mainYAxisMin,
+            max: mainYAxisMax,
             gridIndex: 0,
             splitLine: {
                 show: !isMainCollapsed,
@@ -368,14 +450,115 @@ export class LayoutManager {
                 show: !isMainCollapsed,
                 color: '#94a3b8',
                 fontFamily: options.fontFamily || 'sans-serif',
+                formatter: (value: number) => {
+                    if (options.yAxisLabelFormatter) {
+                        return options.yAxisLabelFormatter(value);
+                    }
+                    const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
+                    if (typeof value === 'number') {
+                        return value.toFixed(decimals);
+                    }
+                    return String(value);
+                },
             },
         });
 
-        // Separate Panes Y-Axes
+        // Create separate Y-axes for overlay plots that are incompatible with price range
+        // Analyze each PLOT separately, not entire indicators
+        let nextYAxisIndex = 1;
+
+        // Calculate price range if market data is available
+        let priceMin = -Infinity;
+        let priceMax = Infinity;
+        if (marketData && marketData.length > 0) {
+            priceMin = Math.min(...marketData.map((d) => d.low));
+            priceMax = Math.max(...marketData.map((d) => d.high));
+        }
+
+        // Map to store plot-specific Y-axis assignments (key: "indicatorId::plotName")
+        const overlayYAxisMap: Map<string, number> = new Map();
+
+        indicators.forEach((indicator, id) => {
+            if (indicator.paneIndex === 0 && !indicator.collapsed) {
+                // This is an overlay on the main pane
+                // Analyze EACH PLOT separately
+
+                if (marketData && marketData.length > 0) {
+                    Object.entries(indicator.plots).forEach(([plotName, plot]) => {
+                        const plotKey = `${id}::${plotName}`;
+
+                        // Skip visual-only plot types that should never affect Y-axis scaling
+                        const visualOnlyStyles = ['background', 'barcolor', 'shape', 'char'];
+                        if (visualOnlyStyles.includes(plot.options.style)) {
+                            // Assign these to a separate Y-axis so they don't affect price scale
+                            if (!overlayYAxisMap.has(plotKey)) {
+                                overlayYAxisMap.set(plotKey, nextYAxisIndex);
+                                nextYAxisIndex++;
+                            }
+                            return; // Skip further processing for this plot
+                        }
+
+                        const values: number[] = [];
+
+                        // Extract values for this specific plot
+                        Object.values(plot.data).forEach((value) => {
+                            if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
+                                values.push(value);
+                            }
+                        });
+
+                        if (values.length > 0) {
+                            const plotMin = Math.min(...values);
+                            const plotMax = Math.max(...values);
+                            const plotRange = plotMax - plotMin;
+                            const priceRange = priceMax - priceMin;
+
+                            // Check if this plot's range is compatible with price range
+                            // Compatible = within price bounds with similar magnitude
+                            const isWithinBounds = plotMin >= priceMin * 0.5 && plotMax <= priceMax * 1.5;
+                            const hasSimilarMagnitude = plotRange > priceRange * 0.01; // At least 1% of price range
+
+                            const isCompatible = isWithinBounds && hasSimilarMagnitude;
+
+                            if (!isCompatible) {
+                                // This plot needs its own Y-axis - check if we already assigned one
+                                if (!overlayYAxisMap.has(plotKey)) {
+                                    overlayYAxisMap.set(plotKey, nextYAxisIndex);
+                                    nextYAxisIndex++;
+                                }
+                            }
+                            // Compatible plots stay on yAxisIndex: 0 (not added to map)
+                        }
+                    });
+                }
+            }
+        });
+
+        // Create Y-axes for incompatible plots
+        // nextYAxisIndex already incremented in the loop above, so we know how many axes we need
+        const numOverlayAxes = overlayYAxisMap.size > 0 ? nextYAxisIndex - 1 : 0;
+        for (let i = 0; i < numOverlayAxes; i++) {
+            yAxis.push({
+                position: 'left',
+                scale: true,
+                min: createMinFunction(yAxisPaddingPercent),
+                max: createMaxFunction(yAxisPaddingPercent),
+                gridIndex: 0,
+                show: false, // Hide the axis visual elements
+                splitLine: { show: false },
+                axisLine: { show: false },
+                axisLabel: { show: false },
+            });
+        }
+
+        // Separate Panes Y-Axes (start after overlay axes)
+        const separatePaneYAxisOffset = nextYAxisIndex;
         paneConfigs.forEach((pane, i) => {
             yAxis.push({
                 position: 'right',
                 scale: true,
+                min: createMinFunction(yAxisPaddingPercent),
+                max: createMaxFunction(yAxisPaddingPercent),
                 gridIndex: i + 1,
                 splitLine: {
                     show: !pane.isCollapsed,
@@ -386,6 +569,16 @@ export class LayoutManager {
                     color: '#94a3b8',
                     fontFamily: options.fontFamily || 'sans-serif',
                     fontSize: 10,
+                    formatter: (value: number) => {
+                        if (options.yAxisLabelFormatter) {
+                            return options.yAxisLabelFormatter(value);
+                        }
+                        const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
+                        if (typeof value === 'number') {
+                            return value.toFixed(decimals);
+                        }
+                        return String(value);
+                    },
                 },
                 axisLine: { show: !pane.isCollapsed, lineStyle: { color: '#334155' } },
             });
@@ -394,12 +587,16 @@ export class LayoutManager {
         // --- Generate DataZoom ---
         const dataZoom: any[] = [];
         if (dzVisible) {
-            dataZoom.push({
-                type: 'inside',
-                xAxisIndex: allXAxisIndices,
-                start: dzStart,
-                end: dzEnd,
-            });
+            // Add 'inside' zoom (pan/drag) only if zoomOnTouch is enabled (default true)
+            const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
+            if (zoomOnTouch) {
+                dataZoom.push({
+                    type: 'inside',
+                    xAxisIndex: allXAxisIndices,
+                    start: dzStart,
+                    end: dzEnd,
+                });
+            }
 
             if (dzPosition === 'top') {
                 dataZoom.push({
@@ -437,6 +634,8 @@ export class LayoutManager {
             mainPaneHeight: mainHeightVal,
             mainPaneTop,
             pixelToPercent,
+            overlayYAxisMap,
+            separatePaneYAxisOffset,
         };
     }