@qfo/qfchart 0.7.2 → 0.8.0

package/src/components/TooltipFormatter.ts

@@ -1,97 +1,97 @@
-import { QFChartOptions } from "../types";
-
-export class TooltipFormatter {
-  public static format(params: any[], options: QFChartOptions): string {
-    if (!params || params.length === 0) return "";
-
-    const marketName = options.title || "Market";
-    const upColor = options.upColor || "#00da3c";
-    const downColor = options.downColor || "#ec0000";
-    const fontFamily = options.fontFamily || "sans-serif";
-
-    // 1. Header: Date/Time (from the first param)
-    const date = params[0].axisValue;
-    let html = `<div style="font-weight: bold; margin-bottom: 5px; color: #cbd5e1; font-family: ${fontFamily};">${date}</div>`;
-
-    // 2. Separate Market Data (Candlestick) from Indicators
-    const marketSeries = params.find(
-      (p: any) => p.seriesType === "candlestick"
-    );
-    const indicatorParams = params.filter(
-      (p: any) => p.seriesType !== "candlestick"
-    );
-
-    // 3. Market Data Section
-    if (marketSeries) {
-      const [_, open, close, low, high] = marketSeries.value;
-      const color = close >= open ? upColor : downColor;
-
-      html += `
-            <div style="margin-bottom: 8px; font-family: ${fontFamily};">
-                <div style="display:flex; justify-content:space-between; color:${color}; font-weight:bold;">
-                    <span>${marketName}</span>
-                </div>
-                <div style="display: grid; grid-template-columns: auto auto; gap: 2px 15px; font-size: 0.9em; color: #cbd5e1;">
-                    <span>Open:</span> <span style="text-align: right; color: ${
-                      close >= open ? upColor : downColor
-                    }">${open}</span>
-                    <span>High:</span> <span style="text-align: right; color: ${upColor}">${high}</span>
-                    <span>Low:</span> <span style="text-align: right; color: ${downColor}">${low}</span>
-                    <span>Close:</span> <span style="text-align: right; color: ${
-                      close >= open ? upColor : downColor
-                    }">${close}</span>
-                </div>
-            </div>
-            `;
-    }
-
-    // 4. Indicators Section
-    if (indicatorParams.length > 0) {
-      html += `<div style="border-top: 1px solid #334155; margin: 5px 0; padding-top: 5px;"></div>`;
-
-      // Group by Indicator ID (extracted from seriesName "ID::PlotName")
-      const indicators: { [key: string]: any[] } = {};
-
-      indicatorParams.forEach((p: any) => {
-        const parts = p.seriesName.split("::");
-        const indId = parts.length > 1 ? parts[0] : "Unknown";
-        const plotName = parts.length > 1 ? parts[1] : p.seriesName;
-
-        if (!indicators[indId]) indicators[indId] = [];
-        indicators[indId].push({ ...p, displayName: plotName });
-      });
-
-      // Render groups
-      Object.keys(indicators).forEach((indId) => {
-        html += `
-            <div style="margin-top: 8px; font-family: ${fontFamily};">
-                <div style="font-weight:bold; color: #fff; margin-bottom: 2px;">${indId}</div>
-            `;
-
-        indicators[indId].forEach((p) => {
-          let val = p.value;
-          if (Array.isArray(val)) {
-            val = val[1]; // Assuming [index, value]
-          }
-
-          if (val === null || val === undefined) return;
-
-          const valStr =
-            typeof val === "number"
-              ? val.toLocaleString(undefined, { maximumFractionDigits: 4 })
-              : val;
-
-          html += `
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; padding-left: 8px;">
-                    <div>${p.marker} <span style="color: #cbd5e1;">${p.displayName}</span></div>
-                    <div style="font-size: 10px; color: #fff;padding-left:10px;">${valStr}</div>
-                </div>`;
-        });
-
-        html += `</div>`;
-      });
-    }
-
-    return html;
-  }
-}
+import { QFChartOptions } from "../types";
+
+export class TooltipFormatter {
+  public static format(params: any[], options: QFChartOptions): string {
+    if (!params || params.length === 0) return "";
+
+    const marketName = options.title || "Market";
+    const upColor = options.upColor || "#00da3c";
+    const downColor = options.downColor || "#ec0000";
+    const fontFamily = options.fontFamily || "sans-serif";
+
+    // 1. Header: Date/Time (from the first param)
+    const date = params[0].axisValue;
+    let html = `<div style="font-weight: bold; margin-bottom: 5px; color: #cbd5e1; font-family: ${fontFamily};">${date}</div>`;
+
+    // 2. Separate Market Data (Candlestick) from Indicators
+    const marketSeries = params.find(
+      (p: any) => p.seriesType === "candlestick"
+    );
+    const indicatorParams = params.filter(
+      (p: any) => p.seriesType !== "candlestick"
+    );
+
+    // 3. Market Data Section
+    if (marketSeries) {
+      const [_, open, close, low, high] = marketSeries.value;
+      const color = close >= open ? upColor : downColor;
+
+      html += `
+            <div style="margin-bottom: 8px; font-family: ${fontFamily};">
+                <div style="display:flex; justify-content:space-between; color:${color}; font-weight:bold;">
+                    <span>${marketName}</span>
+                </div>
+                <div style="display: grid; grid-template-columns: auto auto; gap: 2px 15px; font-size: 0.9em; color: #cbd5e1;">
+                    <span>Open:</span> <span style="text-align: right; color: ${
+                      close >= open ? upColor : downColor
+                    }">${open}</span>
+                    <span>High:</span> <span style="text-align: right; color: ${upColor}">${high}</span>
+                    <span>Low:</span> <span style="text-align: right; color: ${downColor}">${low}</span>
+                    <span>Close:</span> <span style="text-align: right; color: ${
+                      close >= open ? upColor : downColor
+                    }">${close}</span>
+                </div>
+            </div>
+            `;
+    }
+
+    // 4. Indicators Section
+    if (indicatorParams.length > 0) {
+      html += `<div style="border-top: 1px solid #334155; margin: 5px 0; padding-top: 5px;"></div>`;
+
+      // Group by Indicator ID (extracted from seriesName "ID::PlotName")
+      const indicators: { [key: string]: any[] } = {};
+
+      indicatorParams.forEach((p: any) => {
+        const parts = p.seriesName.split("::");
+        const indId = parts.length > 1 ? parts[0] : "Unknown";
+        const plotName = parts.length > 1 ? parts[1] : p.seriesName;
+
+        if (!indicators[indId]) indicators[indId] = [];
+        indicators[indId].push({ ...p, displayName: plotName });
+      });
+
+      // Render groups
+      Object.keys(indicators).forEach((indId) => {
+        html += `
+            <div style="margin-top: 8px; font-family: ${fontFamily};">
+                <div style="font-weight:bold; color: #fff; margin-bottom: 2px;">${indId}</div>
+            `;
+
+        indicators[indId].forEach((p) => {
+          let val = p.value;
+          if (Array.isArray(val)) {
+            val = val[1]; // Assuming [index, value]
+          }
+
+          if (val === null || val === undefined) return;
+
+          const valStr =
+            typeof val === "number"
+              ? val.toLocaleString(undefined, { maximumFractionDigits: 4 })
+              : val;
+
+          html += `
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; padding-left: 8px;">
+                    <div>${p.marker} <span style="color: #cbd5e1;">${p.displayName}</span></div>
+                    <div style="font-size: 10px; color: #fff;padding-left:10px;">${valStr}</div>
+                </div>`;
+        });
+
+        html += `</div>`;
+      });
+    }
+
+    return html;
+  }
+}

package/src/components/renderers/BackgroundRenderer.ts

@@ -1,47 +1,59 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class BackgroundRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray } = context;
-
-        return {
-            name: seriesName,
-            type: 'custom',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            z: -10,
-            renderItem: (params: any, api: any) => {
-                const xVal = api.value(0);
-                if (isNaN(xVal)) return;
-
-                const start = api.coord([xVal, 0.5]); // Use 0.5 as a fixed Y-value within [0,1] range
-                const size = api.size([1, 0]);
-                const width = size[0];
-                const sys = params.coordSys;
-                const x = start[0] - width / 2;
-                const barColor = colorArray[params.dataIndex];
-                const val = api.value(1);
-
-                if (!barColor || val === null || val === undefined || isNaN(val)) return;
-
-                return {
-                    type: 'rect',
-                    shape: {
-                        x: x,
-                        y: sys.y,
-                        width: width,
-                        height: sys.height,
-                    },
-                    style: {
-                        fill: barColor,
-                        opacity: 0.3,
-                    },
-                    silent: true,
-                };
-            },
-            // Normalize data values to 0.5 (middle of [0,1] range) to prevent Y-axis scaling issues
-            // The actual value is only used to check if the background should render (non-null/non-NaN)
-            data: dataArray.map((val, i) => [i, val !== null && val !== undefined && !isNaN(val) ? 0.5 : null]),
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+export class BackgroundRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray } = context;
+
+        // Pre-parse colors to extract embedded alpha (e.g. #RRGGBBAA → rgb + opacity)
+        // This avoids the double-opacity problem where ECharts multiplies a hardcoded
+        // opacity with the alpha already embedded in the color string.
+        const parsedColors: { color: string; opacity: number }[] = [];
+        for (let i = 0; i < colorArray.length; i++) {
+            parsedColors[i] = colorArray[i] ? ColorUtils.parseColor(colorArray[i]) : { color: '', opacity: 0 };
+        }
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: -10,
+            renderItem: (params: any, api: any) => {
+                const xVal = api.value(0);
+                if (isNaN(xVal)) return;
+
+                const start = api.coord([xVal, 0.5]); // Use 0.5 as a fixed Y-value within [0,1] range
+                const size = api.size([1, 0]);
+                const width = size[0];
+                const sys = params.coordSys;
+                const x = start[0] - width / 2;
+                const barColor = colorArray[params.dataIndex];
+                const val = api.value(1);
+
+                if (!barColor || val === null || val === undefined || isNaN(val)) return;
+
+                const parsed = parsedColors[params.dataIndex];
+                if (!parsed || parsed.opacity <= 0) return; // Skip fully transparent
+
+                return {
+                    type: 'rect',
+                    shape: {
+                        x: x,
+                        y: sys.y,
+                        width: width,
+                        height: sys.height,
+                    },
+                    style: {
+                        fill: parsed.color,
+                        opacity: parsed.opacity,
+                    },
+                    silent: true,
+                };
+            },
+            // Normalize data values to 0.5 (middle of [0,1] range) to prevent Y-axis scaling issues
+            // The actual value is only used to check if the background should render (non-null/non-NaN)
+            data: dataArray.map((val, i) => [i, val !== null && val !== undefined && !isNaN(val) ? 0.5 : null]),
+        };
+    }
+}

package/src/components/renderers/BoxRenderer.ts

@@ -19,6 +19,38 @@ function normalizeColor(color: string | undefined): string | undefined {
     return color;
 }
 
+/**
+ * Parse a CSS color string into { r, g, b } (0-255 each).
+ * Supports #rgb, #rrggbb, #rrggbbaa, rgb(), rgba().
+ */
+function parseRGB(color: string | null | undefined): { r: number; g: number; b: number } | null {
+    if (!color || typeof color !== 'string') return null;
+    if (color.startsWith('#')) {
+        const hex = color.slice(1);
+        if (hex.length >= 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return { r, g, b };
+        }
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return { r, g, b };
+        }
+        return null;
+    }
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (m) return { r: +m[1], g: +m[2], b: +m[3] };
+    return null;
+}
+
+/** Relative luminance (0 = black, 1 = white). */
+function luminance(r: number, g: number, b: number): number {
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+
 /**
  * Renderer for Pine Script box.* drawing objects.
  * Each box is defined by two corners (left,top) → (right,bottom)
@@ -50,20 +82,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,33 +112,45 @@ 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];
                             }
                         }
                     }
 
                     // Background fill rect
-                    const bgColor = normalizeColor(bx.bgcolor) || '#2962ff';
-                    children.push({
-                        type: 'rect',
-                        shape: { x, y, width: w, height: h },
-                        style: { fill: bgColor },
-                    });
-
-                    // Border rect (on top of fill)
-                    const borderColor = normalizeColor(bx.border_color) || '#2962ff';
+                    // bgcolor = na means no fill (na resolves to NaN or undefined)
+                    const rawBgColor = bx.bgcolor;
+                    const isNaBgColor = rawBgColor === null || rawBgColor === undefined ||
+                        (typeof rawBgColor === 'number' && isNaN(rawBgColor)) ||
+                        rawBgColor === 'na' || rawBgColor === 'NaN' || rawBgColor === '';
+                    const bgColor = isNaBgColor ? null : (normalizeColor(rawBgColor) || '#2962ff');
+                    if (bgColor) {
+                        children.push({
+                            type: 'rect',
+                            shape: { x, y, width: w, height: h },
+                            style: { fill: bgColor, stroke: 'none' },
+                        });
+                    }
+
+                    // Explicit border rect (on top of fill)
+                    // 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 },
@@ -130,16 +167,38 @@ export class BoxRenderer implements SeriesRenderer {
                     if (bx.text) {
                         const textX = this.getTextX(x, w, bx.text_halign);
                         const textY = this.getTextY(y, h, bx.text_valign);
+
+                        // Auto-contrast: TradingView renders box text as bold white on dark
+                        // backgrounds. When text_color is the default black, compute luminance
+                        // of bgcolor and use white text if the background is dark.
+                        let textFill = normalizeColor(bx.text_color) || '#000000';
+                        const isDefaultTextColor = !bx.text_color || bx.text_color === '#000000' ||
+                            bx.text_color === 'black' || bx.text_color === 'color.black';
+                        if (isDefaultTextColor && bgColor) {
+                            const rgb = parseRGB(bgColor);
+                            if (rgb && luminance(rgb.r, rgb.g, rgb.b) < 0.5) {
+                                textFill = '#FFFFFF';
+                            }
+                        }
+
+                        // TradingView renders box text bold by default (format_none → bold)
+                        const isBold = !bx.text_formatting || bx.text_formatting === 'format_none' ||
+                            bx.text_formatting === 'format_bold';
+
+                        // Font size: for 'auto'/'size.auto', scale to fit within the box.
+                        // For named sizes (tiny, small, etc.), use fixed values.
+                        const fontSize = this.computeFontSize(bx.text_size, bx.text, Math.abs(w), Math.abs(h), isBold);
+
                         children.push({
                             type: 'text',
                             style: {
                                 x: textX,
                                 y: textY,
                                 text: bx.text,
-                                fill: normalizeColor(bx.text_color) || '#000000',
-                                fontSize: this.getSizePixels(bx.text_size),
+                                fill: textFill,
+                                fontSize,
                                 fontFamily: bx.text_font_family === 'monospace' ? 'monospace' : 'sans-serif',
-                                fontWeight: (bx.text_formatting === 'format_bold') ? 'bold' : 'normal',
+                                fontWeight: isBold ? 'bold' : 'normal',
                                 fontStyle: (bx.text_formatting === 'format_italic') ? 'italic' : 'normal',
                                 textAlign: this.mapHAlign(bx.text_halign),
                                 textVerticalAlign: this.mapVAlign(bx.text_valign),
@@ -150,9 +209,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 },
@@ -170,12 +231,17 @@ export class BoxRenderer implements SeriesRenderer {
         }
     }
 
-    private getSizePixels(size: string | number): number {
+    /**
+     * Compute font size for box text.
+     * For 'auto'/'size.auto' (the default), dynamically scale text to fit within
+     * the box dimensions with a small gap — matching TradingView behavior.
+     * For explicit named sizes, return fixed pixel values.
+     */
+    private computeFontSize(size: string | number, text: string, boxW: number, boxH: number, bold: boolean): number {
         if (typeof size === 'number' && size > 0) return size;
+
+        // Fixed named sizes
         switch (size) {
-            case 'auto':
-            case 'size.auto':
-                return 12;
             case 'tiny':
             case 'size.tiny':
                 return 8;
@@ -191,9 +257,39 @@ export class BoxRenderer implements SeriesRenderer {
             case 'huge':
             case 'size.huge':
                 return 36;
-            default:
-                return 12;
         }
+
+        // 'auto' / 'size.auto' / default → scale to fit box
+        if (!text || boxW <= 0 || boxH <= 0) return 12;
+
+        const padding = 6; // px gap on each side
+        const availW = boxW - padding * 2;
+        const availH = boxH - padding * 2;
+        if (availW <= 0 || availH <= 0) return 6;
+
+        const lines = text.split('\n');
+        const numLines = lines.length;
+
+        // Find the longest line by character count
+        let maxChars = 1;
+        for (const line of lines) {
+            if (line.length > maxChars) maxChars = line.length;
+        }
+
+        // Average character width ratio (font-size relative).
+        // Bold sans-serif is ~0.62; regular is ~0.55.
+        const charWidthRatio = bold ? 0.62 : 0.55;
+
+        // Max font size constrained by width: availW = maxChars * fontSize * ratio
+        const maxByWidth = availW / (maxChars * charWidthRatio);
+
+        // Max font size constrained by height: availH = numLines * fontSize * lineHeight
+        const lineHeight = 1.3;
+        const maxByHeight = availH / (numLines * lineHeight);
+
+        // Use the smaller of the two, clamped to a reasonable range
+        const computed = Math.min(maxByWidth, maxByHeight);
+        return Math.max(6, Math.min(computed, 48));
     }
 
     private mapHAlign(align: string): string {

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]);
         }