@qfo/qfchart 0.7.3 → 0.8.1

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 || "";
+    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)
@@ -96,14 +128,21 @@ export class BoxRenderer implements SeriesRenderer {
                     }
 
                     // Background fill rect
-                    const bgColor = normalizeColor(bx.bgcolor) || '#2962ff';
-                    children.push({
-                        type: 'rect',
-                        shape: { x, y, width: w, height: h },
-                        style: { fill: bgColor, stroke: 'none' },
-                    });
-
-                    // Border rect (on top of fill)
+                    // 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 ||
@@ -128,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),
@@ -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/FillRenderer.ts

@@ -1,6 +1,15 @@
 import { SeriesRenderer, RenderContext } from './SeriesRenderer';
 import { ColorUtils } from '../../utils/ColorUtils';
 
+/**
+ * Configuration for a single fill band within a batched render.
+ */
+export interface BatchedFillEntry {
+    plot1Data: (number | null)[];
+    plot2Data: (number | null)[];
+    barColors: { color: string; opacity: number }[];
+}
+
 export class FillRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
         const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName, optionsArray } = context;
@@ -34,8 +43,25 @@ export class FillRenderer implements SeriesRenderer {
             );
         }
 
-        // --- Simple (solid color) fill ---
-        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+        // --- Simple fill (supports per-bar color when color is a series) ---
+        const { color: defaultFillColor, opacity: defaultFillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+
+        // Check if we have per-bar color data in optionsArray
+        const hasPerBarColor = optionsArray?.some((o: any) => o && o.color !== undefined);
+
+        // Pre-parse per-bar colors for efficiency
+        let barColors: { color: string; opacity: number }[] | null = null;
+        if (hasPerBarColor) {
+            barColors = [];
+            for (let i = 0; i < totalDataLength; i++) {
+                const opts = optionsArray?.[i];
+                if (opts && opts.color !== undefined) {
+                    barColors[i] = ColorUtils.parseColor(opts.color);
+                } else {
+                    barColors[i] = { color: defaultFillColor, opacity: defaultFillOpacity };
+                }
+            }
+        }
 
         // Create fill data with previous values for smooth polygon rendering
         const fillDataWithPrev: any[] = [];
@@ -54,6 +80,9 @@ export class FillRenderer implements SeriesRenderer {
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
             z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
             renderItem: (params: any, api: any) => {
                 const index = params.dataIndex;
                 if (index === 0) return null;
@@ -70,6 +99,12 @@ export class FillRenderer implements SeriesRenderer {
                     return null;
                 }
 
+                const fc = barColors ? barColors[index] : null;
+
+                // Skip fully transparent fills
+                const fillOpacity = fc ? fc.opacity : defaultFillOpacity;
+                if (fillOpacity < 0.01) return null;
+
                 const p1Prev = api.coord([index - 1, prevY1]);
                 const p1Curr = api.coord([index, y1]);
                 const p2Curr = api.coord([index, y2]);
@@ -81,13 +116,86 @@ export class FillRenderer implements SeriesRenderer {
                         points: [p1Prev, p1Curr, p2Curr, p2Prev],
                     },
                     style: {
-                        fill: fillColor,
+                        fill: fc ? fc.color : defaultFillColor,
                         opacity: fillOpacity,
                     },
                     silent: true,
                 };
             },
             data: fillDataWithPrev,
+            silent: true,
+        };
+    }
+
+    /**
+     * Batch-render multiple fill bands as a single ECharts custom series.
+     * Instead of N separate series (one per fill), this creates ONE series
+     * where each renderItem call draws all fill bands as a group of children.
+     *
+     * Performance: reduces series count from N to 1, eliminates per-series
+     * ECharts overhead, and enables viewport culling via clip + encode.
+     */
+    renderBatched(
+        seriesName: string,
+        xAxisIndex: number,
+        yAxisIndex: number,
+        totalDataLength: number,
+        fills: BatchedFillEntry[]
+    ): any {
+        // Simple index-only data for ECharts — encode: {x:0} enables dataZoom filtering
+        const data = Array.from({ length: totalDataLength }, (_, i) => [i]);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex,
+            yAxisIndex,
+            z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+                if (index === 0) return null;
+
+                const children: any[] = [];
+
+                for (let f = 0; f < fills.length; f++) {
+                    const fill = fills[f];
+                    const y1 = fill.plot1Data[index];
+                    const y2 = fill.plot2Data[index];
+                    const prevY1 = fill.plot1Data[index - 1];
+                    const prevY2 = fill.plot2Data[index - 1];
+
+                    if (
+                        y1 == null || y2 == null || prevY1 == null || prevY2 == null ||
+                        isNaN(y1 as number) || isNaN(y2 as number) ||
+                        isNaN(prevY1 as number) || isNaN(prevY2 as number)
+                    ) {
+                        continue;
+                    }
+
+                    // Skip fully transparent fills
+                    const fc = fill.barColors[index];
+                    if (!fc || fc.opacity < 0.01) continue;
+
+                    const p1Prev = api.coord([index - 1, prevY1]);
+                    const p1Curr = api.coord([index, y1]);
+                    const p2Curr = api.coord([index, y2]);
+                    const p2Prev = api.coord([index - 1, prevY2]);
+
+                    children.push({
+                        type: 'polygon',
+                        shape: { points: [p1Prev, p1Curr, p2Curr, p2Prev] },
+                        style: { fill: fc.color, opacity: fc.opacity },
+                        silent: true,
+                    });
+                }
+
+                return children.length > 0 ? { type: 'group', children, silent: true } : null;
+            },
+            data,
+            silent: true,
         };
     }
 
@@ -148,6 +256,9 @@ export class FillRenderer implements SeriesRenderer {
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
             z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
             renderItem: (params: any, api: any) => {
                 const index = params.dataIndex;
                 if (index === 0) return null;
@@ -173,6 +284,9 @@ export class FillRenderer implements SeriesRenderer {
                 const gc = gradientColors[index] || gradientColors[index - 1];
                 if (!gc) return null;
 
+                // Skip fully transparent gradient fills
+                if (gc.topOpacity < 0.01 && gc.bottomOpacity < 0.01) return null;
+
                 // Convert colors to rgba strings with their opacities
                 const topRgba = ColorUtils.toRgba(gc.topColor, gc.topOpacity);
                 const bottomRgba = ColorUtils.toRgba(gc.bottomColor, gc.bottomOpacity);
@@ -200,6 +314,7 @@ export class FillRenderer implements SeriesRenderer {
                 };
             },
             data: fillDataWithPrev,
+            silent: true,
         };
     }