@qfo/qfchart 0.7.1 → 0.7.3

package/src/QFChart.ts

@@ -1,7 +1,7 @@
 import * as echarts from 'echarts';
 import { OHLCV, IndicatorPlot, QFChartOptions, Indicator as IndicatorInterface, ChartContext, Plugin } from './types';
 import { Indicator } from './components/Indicator';
-import { LayoutManager } from './components/LayoutManager';
+import { LayoutManager, LayoutResult, PaneBoundary } from './components/LayoutManager';
 import { SeriesBuilder } from './components/SeriesBuilder';
 import { GraphicBuilder } from './components/GraphicBuilder';
 import { TooltipFormatter } from './components/TooltipFormatter';
@@ -90,6 +90,18 @@ export class QFChart implements ChartContext {
     private overlayContainer: HTMLElement;
     private _lastTables: any[] = [];
 
+    // Pane drag-resize state
+    private _lastLayout: (LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number }) | null = null;
+    private _mainHeightOverride: number | null = null;
+    private _paneDragState: {
+        startY: number;
+        aboveId: string | 'main';
+        belowId: string;
+        startAboveHeight: number;
+        startBelowHeight: number;
+    } | null = null;
+    private _paneResizeRafId: number | null = null;
+
     constructor(container: HTMLElement, options: QFChartOptions = {}) {
         this.rootContainer = container;
         this.options = {
@@ -206,17 +218,23 @@ export class QFChart implements ChartContext {
         // @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
-        this.chart.getZr().on('mousedown', (params: any) => this.events.emit('mouse:down', params));
+        this.chart.getZr().on('mousedown', (params: any) => { if (!this._paneDragState) this.events.emit('mouse:down', params); });
         // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('mousemove', (params: any) => this.events.emit('mouse:move', params));
+        this.chart.getZr().on('mousemove', (params: any) => { if (!this._paneDragState) this.events.emit('mouse:move', params); });
         // @ts-ignore - ECharts ZRender event handler type mismatch
         this.chart.getZr().on('mouseup', (params: any) => this.events.emit('mouse:up', params));
         // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('click', (params: any) => this.events.emit('mouse:click', params));
+        this.chart.getZr().on('click', (params: any) => { if (!this._paneDragState) this.events.emit('mouse:click', params); });
 
         const zr = this.chart.getZr();
         const originalSetCursorStyle = zr.setCursorStyle;
+        const self = this;
         zr.setCursorStyle = function (cursorStyle: string) {
+            // During pane drag, force row-resize cursor
+            if (self._paneDragState) {
+                originalSetCursorStyle.call(this, 'row-resize');
+                return;
+            }
             // Change 'grab' (default roam cursor) to  'crosshair' (more suitable for candlestick chart)
             if (cursorStyle === 'grab') {
                 cursorStyle = 'crosshair';
@@ -228,6 +246,9 @@ export class QFChart implements ChartContext {
         // Bind Drawing Events
         this.bindDrawingEvents();
 
+        // Bind pane border drag-resize
+        this.bindPaneResizeEvents();
+
         window.addEventListener('resize', this.resize.bind(this));
 
         // Listen for fullscreen change to restore state if exited via ESC
@@ -252,6 +273,133 @@ export class QFChart implements ChartContext {
         this.render();
     };
 
+    // ── Pane border drag-resize ────────────────────────────────
+    private bindPaneResizeEvents(): void {
+        const MIN_MAIN = 10;   // minimum main pane height %
+        const MIN_INDICATOR = 5; // minimum indicator pane height %
+        const HIT_ZONE = 6;   // hit-zone in pixels (±3px from boundary center)
+
+        const zr = this.chart.getZr();
+
+        /** Find a boundary near the mouse Y position (pixels). */
+        const findBoundary = (mouseY: number): PaneBoundary | null => {
+            if (!this._lastLayout || this._lastLayout.paneBoundaries.length === 0) return null;
+            if (this.maximizedPaneId) return null; // no resize when maximized
+            const containerH = this.chart.getHeight();
+            if (containerH <= 0) return null;
+
+            for (const b of this._lastLayout.paneBoundaries) {
+                const bY = (b.yPercent / 100) * containerH;
+                if (Math.abs(mouseY - bY) <= HIT_ZONE) {
+                    // Don't allow resizing collapsed panes
+                    if (b.aboveId === 'main' && this.isMainCollapsed) continue;
+                    const belowInd = this.indicators.get(b.belowId);
+                    if (belowInd?.collapsed) continue;
+                    if (b.aboveId !== 'main') {
+                        const aboveInd = this.indicators.get(b.aboveId);
+                        if (aboveInd?.collapsed) continue;
+                    }
+                    return b;
+                }
+            }
+            return null;
+        };
+
+        /** Get current height of a pane. */
+        const getPaneHeight = (id: string | 'main'): number => {
+            if (id === 'main') {
+                return this._lastLayout?.mainPaneHeight ?? 50;
+            }
+            const ind = this.indicators.get(id);
+            return ind?.height ?? 15;
+        };
+
+        // --- ZR event handlers ---
+
+        zr.on('mousemove', (e: any) => {
+            if (this._paneDragState) {
+                // Active drag: compute new heights
+                const deltaY = e.offsetY - this._paneDragState.startY;
+                const containerH = this.chart.getHeight();
+                if (containerH <= 0) return;
+                const deltaPct = (deltaY / containerH) * 100;
+
+                const minAbove = this._paneDragState.aboveId === 'main' ? MIN_MAIN : MIN_INDICATOR;
+                const minBelow = MIN_INDICATOR;
+
+                let newAbove = this._paneDragState.startAboveHeight + deltaPct;
+                let newBelow = this._paneDragState.startBelowHeight - deltaPct;
+
+                // Clamp
+                if (newAbove < minAbove) {
+                    newAbove = minAbove;
+                    newBelow = this._paneDragState.startAboveHeight + this._paneDragState.startBelowHeight - minAbove;
+                }
+                if (newBelow < minBelow) {
+                    newBelow = minBelow;
+                    newAbove = this._paneDragState.startAboveHeight + this._paneDragState.startBelowHeight - minBelow;
+                }
+
+                // Apply heights
+                if (this._paneDragState.aboveId === 'main') {
+                    this._mainHeightOverride = newAbove;
+                } else {
+                    const aboveInd = this.indicators.get(this._paneDragState.aboveId);
+                    if (aboveInd) aboveInd.height = newAbove;
+                }
+                const belowInd = this.indicators.get(this._paneDragState.belowId);
+                if (belowInd) belowInd.height = newBelow;
+
+                // Throttle re-render via rAF
+                if (!this._paneResizeRafId) {
+                    this._paneResizeRafId = requestAnimationFrame(() => {
+                        this._paneResizeRafId = null;
+                        this.render();
+                    });
+                }
+
+                // Force row-resize cursor
+                zr.setCursorStyle('row-resize');
+                e.stop?.();
+                return;
+            }
+
+            // Not dragging: check hover over boundary
+            const boundary = findBoundary(e.offsetY);
+            if (boundary) {
+                zr.setCursorStyle('row-resize');
+            }
+        });
+
+        zr.on('mousedown', (e: any) => {
+            const boundary = findBoundary(e.offsetY);
+            if (!boundary) return;
+
+            // Start drag
+            this._paneDragState = {
+                startY: e.offsetY,
+                aboveId: boundary.aboveId,
+                belowId: boundary.belowId,
+                startAboveHeight: getPaneHeight(boundary.aboveId),
+                startBelowHeight: getPaneHeight(boundary.belowId),
+            };
+
+            zr.setCursorStyle('row-resize');
+            e.stop?.();
+        });
+
+        zr.on('mouseup', () => {
+            if (this._paneDragState) {
+                this._paneDragState = null;
+                if (this._paneResizeRafId) {
+                    cancelAnimationFrame(this._paneResizeRafId);
+                    this._paneResizeRafId = null;
+                }
+                this.render();
+            }
+        });
+    }
+
     private bindDrawingEvents() {
         let hideTimeout: any = null;
         let lastHoveredGroup: any = null;
@@ -669,8 +817,10 @@ export class QFChart implements ChartContext {
             this.options,
             this.isMainCollapsed,
             this.maximizedPaneId,
-            this.marketData
+            this.marketData,
+            this._mainHeightOverride ?? undefined,
         );
+        this._lastLayout = layout;
 
         // Pass full padded candlestick data for shape positioning
         // But SeriesBuilder expects 'OHLCV[]', while paddedCandlestickData is array of arrays [open,close,low,high]
@@ -745,7 +895,11 @@ export class QFChart implements ChartContext {
                     plot.data?.forEach((entry: any) => {
                         const tables = Array.isArray(entry.value) ? entry.value : [entry.value];
                         tables.forEach((t: any) => {
-                            if (t && !t._deleted) allTables.push(t);
+                            if (t && !t._deleted) {
+                                // Tag table with its indicator's pane for correct positioning
+                                t._paneIndex = (t.force_overlay) ? 0 : indicator.paneIndex;
+                                allTables.push(t);
+                            }
                         });
                     });
                 }
@@ -957,8 +1111,10 @@ export class QFChart implements ChartContext {
     }
 
     private _renderTableOverlays(): void {
-        const gridRect = (this.chart.getModel() as any).getComponent('grid', 0)?.coordinateSystem?.getRect();
-        TableOverlayRenderer.render(this.overlayContainer, this._lastTables, gridRect);
+        const model = this.chart.getModel() as any;
+        const getGridRect = (paneIndex: number) =>
+            model.getComponent('grid', paneIndex)?.coordinateSystem?.getRect();
+        TableOverlayRenderer.render(this.overlayContainer, this._lastTables, getGridRect);
     }
 
     public destroy(): void {
@@ -1040,8 +1196,10 @@ export class QFChart implements ChartContext {
             this.options,
             this.isMainCollapsed,
             this.maximizedPaneId,
-            this.marketData
+            this.marketData,
+            this._mainHeightOverride ?? undefined,
         );
+        this._lastLayout = layout;
 
         // 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)
@@ -1427,7 +1585,11 @@ export class QFChart implements ChartContext {
                     plot.data?.forEach((entry: any) => {
                         const tables = Array.isArray(entry.value) ? entry.value : [entry.value];
                         tables.forEach((t: any) => {
-                            if (t && !t._deleted) allTables.push(t);
+                            if (t && !t._deleted) {
+                                // Tag table with its indicator's pane for correct positioning
+                                t._paneIndex = (t.force_overlay) ? 0 : indicator.paneIndex;
+                                allTables.push(t);
+                            }
                         });
                     });
                 }

package/src/components/LayoutManager.ts

@@ -14,6 +14,12 @@ export interface PaneConfiguration {
     };
 }
 
+export interface PaneBoundary {
+    yPercent: number;           // Y position in %, center of the gap between panes
+    aboveId: string | 'main';   // pane above (main chart or indicator id)
+    belowId: string;            // indicator id below
+}
+
 export interface LayoutResult {
     grid: any[];
     xAxis: any[];
@@ -23,6 +29,7 @@ export interface LayoutResult {
     mainPaneHeight: number;
     mainPaneTop: number;
     pixelToPercent: number;
+    paneBoundaries: PaneBoundary[];
 }
 
 export class LayoutManager {
@@ -32,7 +39,8 @@ export class LayoutManager {
         options: QFChartOptions,
         isMainCollapsed: boolean = false,
         maximizedPaneId: string | null = null,
-        marketData?: import('../types').OHLCV[]
+        marketData?: import('../types').OHLCV[],
+        mainHeightOverride?: number
     ): LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number } {
         // Calculate pixelToPercent early for maximized logic
         let pixelToPercent = 0;
@@ -283,7 +291,10 @@ export class LayoutManager {
             const totalAvailable = chartAreaBottom - mainPaneTop;
             mainHeightVal = totalAvailable - totalBottomSpace;
 
-            if (isMainCollapsed) {
+            // Apply user-dragged main height override
+            if (mainHeightOverride !== undefined && mainHeightOverride > 0 && !isMainCollapsed) {
+                mainHeightVal = mainHeightOverride;
+            } else if (isMainCollapsed) {
                 mainHeightVal = 3;
             } else {
                 // Safety check: ensure main chart has at least some space (e.g. 20%)
@@ -315,6 +326,25 @@ export class LayoutManager {
             }
         }
 
+        // --- Build pane boundaries for drag-resize ---
+        const paneBoundaries: PaneBoundary[] = [];
+        if (paneConfigs.length > 0) {
+            // Boundary between main chart and first indicator
+            paneBoundaries.push({
+                yPercent: mainPaneTop + mainHeightVal + gapPercent / 2,
+                aboveId: 'main',
+                belowId: paneConfigs[0].indicatorId || '',
+            });
+            // Boundaries between consecutive indicators
+            for (let i = 0; i < paneConfigs.length - 1; i++) {
+                paneBoundaries.push({
+                    yPercent: paneConfigs[i].top + paneConfigs[i].height + gapPercent / 2,
+                    aboveId: paneConfigs[i].indicatorId || '',
+                    belowId: paneConfigs[i + 1].indicatorId || '',
+                });
+            }
+        }
+
         // --- Generate Grids ---
         const grid: any[] = [];
         // Main Grid (index 0)
@@ -658,6 +688,7 @@ export class LayoutManager {
             mainPaneHeight: mainHeightVal,
             mainPaneTop,
             pixelToPercent,
+            paneBoundaries,
             overlayYAxisMap,
             separatePaneYAxisOffset,
         };
@@ -677,6 +708,7 @@ export class LayoutManager {
             mainPaneHeight: 0,
             mainPaneTop: 0,
             pixelToPercent: 0,
+            paneBoundaries: [],
         } as any;
     }
 }

package/src/components/SeriesBuilder.ts

@@ -133,7 +133,24 @@ export class SeriesBuilder {
                 // IMPORTANT: If indicator is overlay (paneIndex === 0), treat all plots as overlays
                 // This allows visual-only plots (background, barcolor) to have separate Y-axes while
                 // still being on the main chart pane
-                const plotOverlay = plot.options.overlay;
+                let plotOverlay = plot.options.overlay;
+
+                // Fill plots inherit overlay from their referenced plots.
+                // If both referenced plots are overlay, the fill should render on the
+                // overlay pane too — otherwise its price-scale data stretches the
+                // indicator sub-pane's y-axis to extreme ranges.
+                if (plot.options.style === 'fill' && plotOverlay === undefined) {
+                    const p1Name = plot.options.plot1;
+                    const p2Name = plot.options.plot2;
+                    if (p1Name && p2Name) {
+                        const p1 = indicator.plots[p1Name];
+                        const p2 = indicator.plots[p2Name];
+                        if (p1?.options?.overlay === true && p2?.options?.overlay === true) {
+                            plotOverlay = true;
+                        }
+                    }
+                }
+
                 const isPlotOverlay = indicator.paneIndex === 0 || plotOverlay === true;
 
                 if (isPlotOverlay) {
@@ -158,6 +175,7 @@ export class SeriesBuilder {
                 // Prepare data arrays
                 // For 'fill' style, we don't use plot.data directly in the same way, but we initialize generic arrays
                 const dataArray = new Array(totalDataLength).fill(null);
+                const rawDataArray = new Array(totalDataLength).fill(null); // Unmodified values for fill references
                 const colorArray = new Array(totalDataLength).fill(null);
                 const optionsArray = new Array(totalDataLength).fill(null); // Store per-point options
 
@@ -171,6 +189,10 @@ export class SeriesBuilder {
                             let value = point.value;
                             const pointColor = point.options?.color;
 
+                            // Always store the raw value for fill plots to reference
+                            // (fills need the actual data even when the line is invisible via color=na)
+                            rawDataArray[offsetIndex] = value;
+
                             // TradingView compatibility: if color is 'na' (NaN, null, undefined, or "na"), break the line
                             // When the options object explicitly has a 'color' key set to undefined,
                             // this means PineTS evaluated the color expression to na (hidden segment).
@@ -193,9 +215,9 @@ export class SeriesBuilder {
                     }
                 });
 
-                // Store data array for fill plots to reference
-                // Only store for non-fill plots as fill plots don't produce data to be referenced by other fills (usually)
-                plotDataArrays.set(`${id}::${plotName}`, dataArray);
+                // Store raw data array (before na-color nullification) for fill plots to reference
+                // Fill plots need the actual numeric values even when the referenced plot is invisible (color=na)
+                plotDataArrays.set(`${id}::${plotName}`, rawDataArray);
 
                 if (plot.options?.style?.startsWith('style_')) {
                     plot.options.style = plot.options.style.replace('style_', '') as IndicatorStyle;

package/src/components/TableOverlayRenderer.ts

@@ -30,10 +30,13 @@ export class TableOverlayRenderer {
 
     /**
      * Clear all existing table overlays and render new ones.
-     * @param gridRect The ECharts grid rect {x, y, width, height} in pixels,
-     *                 representing the actual plot area within the container.
+     * @param getGridRect Function that returns the ECharts grid rect for a given pane index.
      */
-    static render(container: HTMLElement, tables: any[], gridRect?: { x: number; y: number; width: number; height: number }): void {
+    static render(
+        container: HTMLElement,
+        tables: any[],
+        getGridRect?: (paneIndex: number) => { x: number; y: number; width: number; height: number } | undefined,
+    ): void {
         TableOverlayRenderer.clearAll(container);
 
         // Pine Script: only the last table at each position is displayed
@@ -45,6 +48,8 @@ export class TableOverlayRenderer {
         }
 
         byPosition.forEach((tbl) => {
+            const paneIndex = tbl._paneIndex ?? 0;
+            const gridRect = getGridRect ? getGridRect(paneIndex) : undefined;
             const el = TableOverlayRenderer.buildTable(tbl);
             TableOverlayRenderer.positionTable(el, tbl.position, gridRect);
             container.appendChild(el);
@@ -59,9 +64,18 @@ export class TableOverlayRenderer {
 
     private static buildTable(tbl: any): HTMLElement {
         const table = document.createElement('table');
-        table.style.borderCollapse = 'separate';
-        table.style.borderSpacing = '0';
-        table.style.pointerEvents = 'auto';
+        const borderWidth = tbl.border_width ?? 0;
+        const frameWidth = tbl.frame_width ?? 0;
+        // Use collapse when no visible borders — prevents sub-pixel hairlines between cells.
+        // Use separate when visible borders are present — so each cell's border is drawn independently.
+        const hasVisibleBorders = (borderWidth > 0 && !!tbl.border_color) || (frameWidth > 0 && !!tbl.frame_color);
+        if (hasVisibleBorders) {
+            table.style.borderCollapse = 'separate';
+            table.style.borderSpacing = '0';
+        } else {
+            table.style.borderCollapse = 'collapse';
+        }
+        table.style.pointerEvents = 'none';
         table.style.fontSize = '14px';
         table.style.lineHeight = '1.4';
         table.style.fontFamily = 'sans-serif';
@@ -75,11 +89,13 @@ export class TableOverlayRenderer {
         }
 
         // Frame (outer border)
-        if (tbl.frame_width > 0 && tbl.frame_color) {
+        // Pine Script default frame_color is "no color" (transparent), so only
+        // draw frame when an explicit color is provided.
+        if (frameWidth > 0 && tbl.frame_color) {
             const { color: fc } = TableOverlayRenderer.safeParseColor(tbl.frame_color);
-            table.style.border = `${tbl.frame_width}px solid ${fc}`;
-        } else if (tbl.frame_width > 0) {
-            table.style.border = `${tbl.frame_width}px solid #999`;
+            table.style.border = `${frameWidth}px solid ${fc}`;
+        } else {
+            table.style.border = 'none';
         }
 
         // Build merge lookup: for each cell, determine colspan/rowspan
@@ -103,6 +119,14 @@ export class TableOverlayRenderer {
             }
         }
 
+        // Cell border settings
+        // Pine Script default border_color is "no color" (transparent), so only
+        // draw cell borders when an explicit color is provided.
+        const hasCellBorders = borderWidth > 0 && !!tbl.border_color;
+        const borderColorStr = hasCellBorders
+            ? TableOverlayRenderer.safeParseColor(tbl.border_color).color
+            : '';
+
         // Build rows
         const rows = tbl.rows || 0;
         const cols = tbl.columns || 0;
@@ -126,11 +150,10 @@ export class TableOverlayRenderer {
                 }
 
                 // Cell borders
-                if (tbl.border_width > 0) {
-                    const bc = tbl.border_color
-                        ? TableOverlayRenderer.safeParseColor(tbl.border_color).color
-                        : '#999';
-                    td.style.border = `${tbl.border_width}px solid ${bc}`;
+                if (hasCellBorders) {
+                    td.style.border = `${borderWidth}px solid ${borderColorStr}`;
+                } else {
+                    td.style.border = 'none';
                 }
 
                 // Get cell data

package/src/components/renderers/BoxRenderer.ts

@@ -50,20 +50,13 @@ export class BoxRenderer implements SeriesRenderer {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
-        // Compute y-range for axis scaling
-        let yMin = Infinity, yMax = -Infinity;
-        for (const bx of boxObjects) {
-            if (bx.top < yMin) yMin = bx.top;
-            if (bx.top > yMax) yMax = bx.top;
-            if (bx.bottom < yMin) yMin = bx.bottom;
-            if (bx.bottom > yMax) yMax = bx.bottom;
-        }
-
         // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
         // ECharts filters a data item only when ALL its x-dimensions are on the same side
         // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
         // the viewport, so renderItem fires exactly once regardless of scroll position.
-        // Dims 2/3 are yMin/yMax for axis scaling.
+        // Note: We do NOT encode y-dimensions — drawing objects should not influence the
+        // y-axis auto-scaling.  Otherwise boxes drawn at the chart's end would prevent
+        // the y-axis from adapting when scrolling to earlier (lower-priced) history.
         const totalBars = (context.candlestickData?.length || 0) + offset;
         const lastBarIndex = Math.max(0, totalBars - 1);
 
@@ -87,16 +80,16 @@ export class BoxRenderer implements SeriesRenderer {
                     let w = pBottomRight[0] - pTopLeft[0];
                     let h = pBottomRight[1] - pTopLeft[1];
 
-                    // Handle extend (horizontal borders)
+                    // Handle extend (none/n | left/l | right/r | both/b)
                     const extend = bx.extend || 'none';
-                    if (extend !== 'none') {
+                    if (extend !== 'none' && extend !== 'n') {
                         const cs = params.coordSys;
-                        if (extend === 'left' || extend === 'both') {
+                        if (extend === 'left' || extend === 'l' || extend === 'both' || extend === 'b') {
                             x = cs.x;
-                            w = (extend === 'both') ? cs.width : (pBottomRight[0] - cs.x);
+                            w = (extend === 'both' || extend === 'b') ? cs.width : (pBottomRight[0] - cs.x);
                         }
-                        if (extend === 'right' || extend === 'both') {
-                            if (extend === 'right') {
+                        if (extend === 'right' || extend === 'r' || extend === 'both' || extend === 'b') {
+                            if (extend === 'right' || extend === 'r') {
                                 w = cs.x + cs.width - pTopLeft[0];
                             }
                         }
@@ -107,13 +100,18 @@ export class BoxRenderer implements SeriesRenderer {
                     children.push({
                         type: 'rect',
                         shape: { x, y, width: w, height: h },
-                        style: { fill: bgColor },
+                        style: { fill: bgColor, stroke: 'none' },
                     });
 
                     // Border rect (on top of fill)
-                    const borderColor = normalizeColor(bx.border_color) || '#2962ff';
+                    // border_color = na means no border (na resolves to NaN or undefined)
+                    const rawBorderColor = bx.border_color;
+                    const isNaBorder = rawBorderColor === null || rawBorderColor === undefined ||
+                        (typeof rawBorderColor === 'number' && isNaN(rawBorderColor)) ||
+                        rawBorderColor === 'na' || rawBorderColor === 'NaN';
+                    const borderColor = isNaBorder ? null : (normalizeColor(rawBorderColor) || '#2962ff');
                     const borderWidth = bx.border_width ?? 1;
-                    if (borderWidth > 0) {
+                    if (borderWidth > 0 && borderColor) {
                         children.push({
                             type: 'rect',
                             shape: { x, y, width: w, height: h },
@@ -150,9 +148,11 @@ export class BoxRenderer implements SeriesRenderer {
 
                 return { type: 'group', children };
             },
-            data: [[0, lastBarIndex, yMin, yMax]],
+            data: [[0, lastBarIndex]],
             clip: true,
-            encode: { x: [0, 1], y: [2, 3] },
+            encode: { x: [0, 1] },
+            // Prevent ECharts visual system from overriding element colors with palette
+            itemStyle: { color: 'transparent', borderColor: 'transparent' },
             z: 14,
             silent: true,
             emphasis: { disabled: true },

package/src/components/renderers/DrawingLineRenderer.ts

@@ -35,20 +35,13 @@ export class DrawingLineRenderer implements SeriesRenderer {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
-        // Compute y-range for axis scaling
-        let yMin = Infinity, yMax = -Infinity;
-        for (const ln of lineObjects) {
-            if (ln.y1 < yMin) yMin = ln.y1;
-            if (ln.y1 > yMax) yMax = ln.y1;
-            if (ln.y2 < yMin) yMin = ln.y2;
-            if (ln.y2 > yMax) yMax = ln.y2;
-        }
-
         // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
         // ECharts filters a data item only when ALL its x-dimensions are on the same side
         // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
         // the viewport, so renderItem fires exactly once regardless of scroll position.
-        // Dims 2/3 are yMin/yMax for axis scaling.
+        // Note: We do NOT encode y-dimensions — drawing objects should not influence the
+        // y-axis auto-scaling.  Otherwise lines drawn at the chart's end would prevent
+        // the y-axis from adapting when scrolling to earlier (lower-priced) history.
         const totalBars = (context.candlestickData?.length || 0) + offset;
         const lastBarIndex = Math.max(0, totalBars - 1);
 
@@ -67,9 +60,9 @@ export class DrawingLineRenderer implements SeriesRenderer {
                     let p1 = api.coord([ln.x1 + xOff, ln.y1]);
                     let p2 = api.coord([ln.x2 + xOff, ln.y2]);
 
-                    // Handle extend (none | left | right | both)
+                    // Handle extend (none/n | left/l | right/r | both/b)
                     const extend = ln.extend || 'none';
-                    if (extend !== 'none') {
+                    if (extend !== 'none' && extend !== 'n') {
                         const cs = params.coordSys;
                         [p1, p2] = this.extendLine(p1, p2, extend, cs.x, cs.x + cs.width, cs.y, cs.y + cs.height);
                     }
@@ -81,6 +74,7 @@ export class DrawingLineRenderer implements SeriesRenderer {
                         type: 'line',
                         shape: { x1: p1[0], y1: p1[1], x2: p2[0], y2: p2[1] },
                         style: {
+                            fill: 'none',
                             stroke: color,
                             lineWidth,
                             lineDash: this.getDashPattern(ln.style),
@@ -100,9 +94,11 @@ export class DrawingLineRenderer implements SeriesRenderer {
 
                 return { type: 'group', children };
             },
-            data: [[0, lastBarIndex, yMin, yMax]],
+            data: [[0, lastBarIndex]],
             clip: true,
-            encode: { x: [0, 1], y: [2, 3] },
+            encode: { x: [0, 1] },
+            // Prevent ECharts visual system from overriding element colors with palette
+            itemStyle: { color: 'transparent', borderColor: 'transparent' },
             z: 15,
             silent: true,
             emphasis: { disabled: true },
@@ -151,10 +147,10 @@ export class DrawingLineRenderer implements SeriesRenderer {
         let newP1 = p1;
         let newP2 = p2;
 
-        if (extend === 'right' || extend === 'both') {
+        if (extend === 'right' || extend === 'r' || extend === 'both' || extend === 'b') {
             newP2 = extendPoint(p1, [dx, dy]);
         }
-        if (extend === 'left' || extend === 'both') {
+        if (extend === 'left' || extend === 'l' || extend === 'both' || extend === 'b') {
             newP1 = extendPoint(p2, [-dx, -dy]);
         }