Take a look at this plugin I built for lightweight-charts-python ( https://github.com/EsIstJosh/lightweight-charts-python) , you can probably do some minor adjustments to get it to work using normal lightweight-charts :

import { IPrimitivePaneRenderer, Coordinate, IPrimitivePaneView, Time, ISeriesPrimitive, SeriesAttachedParameter, DataChangedScope, SeriesDataItemTypeMap, SeriesType, Logical, AutoscaleInfo, BarData, LineData, ISeriesApi, PrimitivePaneViewZOrder } from "lightweight-charts";
import { PluginBase } from "../plugin-base";
import { setOpacity } from "../helpers/colors";
import { ClosestTimeIndexFinder } from '../helpers/closest-index';
import { hasColorOption } from "../helpers/typeguards";
export class FillArea extends PluginBase implements ISeriesPrimitive<Time> {
    static type = "Fill Area"; // Explicitly set the type name
    
    _paneViews: FillAreaPaneView[];
    _originSeries: ISeriesApi<SeriesType>;
    _destinationSeries: ISeriesApi<SeriesType>;
    _bandsData: BandData[] = [];
    options: Required<FillAreaOptions>;
    _timeIndices: ClosestTimeIndexFinder<{ time: number }>;

    constructor(
        originSeries: ISeriesApi<SeriesType>,
        destinationSeries: ISeriesApi<SeriesType>,
        options: FillAreaOptions
    ) {
        super();
    
        // Existing logic for setting colors
        const defaultOriginColor = setOpacity('#0000FF', 0.25); // Blue
        const defaultDestinationColor = setOpacity('#FF0000', 0.25); // Red
        const originSeriesColor = hasColorOption(originSeries)
            ? setOpacity((originSeries.options() as any).lineColor || defaultOriginColor, 0.3)
            : setOpacity(defaultOriginColor, 0.3);
        const destinationSeriesColor = hasColorOption(destinationSeries)
            ? setOpacity((destinationSeries.options() as any).lineColor || defaultDestinationColor, 0.3)
            : setOpacity(defaultDestinationColor, 0.3);
    
        this.options = {
            ...defaultFillAreaOptions,
            ...options,
            originColor: options.originColor ?? originSeriesColor,
            destinationColor: options.destinationColor ?? destinationSeriesColor,
        };
    
        this._paneViews = [new FillAreaPaneView(this)];
        this._timeIndices = new ClosestTimeIndexFinder([]);
        this._originSeries = originSeries;
        this._destinationSeries = destinationSeries;
    
        // Subscribe to data changes in both series
        this._originSeries.subscribeDataChanged(() => {
            console.log("Origin series data has changed. Recalculating bands.");
            this.dataUpdated('full');
            this.updateAllViews();
        });
    
        this._destinationSeries.subscribeDataChanged(() => {
            console.log("Destination series data has changed. Recalculating bands.");
            this.dataUpdated('full');
            this.updateAllViews();
        });
    }
    
    

    updateAllViews() {
        this._paneViews.forEach(pw => pw.update());
    }
    applyOptions(options: Partial<FillAreaOptions>) {

        this.options = {
            ...this.options,
            ...options,
        };
    
        this.calculateBands();
        this.updateAllViews();
        super.requestUpdate();
    
        console.log("FillArea options updated:", this.options);
    }
    
    
    
    paneViews() {
        return this._paneViews;
    }

    attached(p: SeriesAttachedParameter<Time>): void {
        super.attached(p);
        this.dataUpdated('full');
    }

    dataUpdated(scope: DataChangedScope) {
        this.calculateBands();
        if (scope === 'full') {
            const originData = this._originSeries.data();
            this._timeIndices = new ClosestTimeIndexFinder(
                [...originData]  as { time: number }[]
            );
        }
    }

    calculateBands() {
        const originData = this._originSeries.data();
        const destinationData = this._destinationSeries.data();

        // Ensure both datasets have the same length
        const alignedData = this._alignDataLengths([...originData], [...destinationData]);

        const bandData: BandData[] = [];
        for (let i = 0; i < alignedData.origin.length; i++) {
            let points = extractPrices(alignedData.origin[i],alignedData.destination[i]);

            if (points?.originValue === undefined || points?.destinationValue === undefined) continue;

            // Determine which series is upper and lower
            const upper = Math.max(points?.originValue, points?.destinationValue);
            const lower = Math.min(points?.originValue, points?.destinationValue);

            bandData.push({
                time: alignedData.origin[i].time,
                origin: points?.originValue,
                destination: points?.destinationValue,
                upper,
                lower,
            });
        }

        this._bandsData = bandData;
    }

    _alignDataLengths(
        originData: SeriesDataItemTypeMap[SeriesType][],
        destinationData: SeriesDataItemTypeMap[SeriesType][]
    ): { origin: SeriesDataItemTypeMap[SeriesType][], destination: SeriesDataItemTypeMap[SeriesType][] } {
        const originLength = originData.length;
        const destinationLength = destinationData.length;

        if (originLength > destinationLength) {
            const lastKnown = destinationData[destinationLength - 1];
            while (destinationData.length < originLength) {
                destinationData.push({ ...lastKnown });
            }
        } else if (destinationLength > originLength) {
            const lastKnown = originData[originLength - 1];
            while (originData.length < destinationLength) {
                originData.push({ ...lastKnown });
            }
        }

        return { origin: originData, destination: destinationData };
    }

    autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo {
        const ts = this.chart.timeScale();
        const startTime = (ts.coordinateToTime(
            ts.logicalToCoordinate(startTimePoint) ?? 0
        ) ?? 0) as number;
        const endTime = (ts.coordinateToTime(
            ts.logicalToCoordinate(endTimePoint) ?? 5000000000
        ) ?? 5000000000) as number;
        const startIndex = this._timeIndices.findClosestIndex(startTime, 'left');
        const endIndex = this._timeIndices.findClosestIndex(endTime, 'right');

        const range = {
            minValue: Math.min(...this._bandsData.map(b => b.lower).slice(startIndex, endIndex + 1)),
            maxValue: Math.max(...this._bandsData.map(b => b.upper).slice(startIndex, endIndex + 1)),
        };

        return {
            priceRange: {
                minValue: range.minValue,
                maxValue: range.maxValue,
            },
        };
    }
}
class FillAreaPaneRenderer implements IPrimitivePaneRenderer {
    _viewData: BandViewData;
    _options: FillAreaOptions;

    constructor(data: BandViewData) {
        this._viewData = data;
        this._options = data.options;
    }

    draw() {}
    drawBackground(target: CanvasRenderingTarget2D) {
        const points: BandRendererData[] = this._viewData.data;
        const options = this._options;

        if (points.length < 2) return; // Ensure there are enough points to draw

        target.useBitmapCoordinateSpace((scope) => {
            const ctx = scope.context;
            ctx.scale(scope.horizontalPixelRatio, scope.verticalPixelRatio);

            let currentPathStarted = false;
            let startIndex = 0;

            for (let i = 0; i < points.length - 1; i++) {
                const current = points[i];
                const next = points[i + 1];

                if (!currentPathStarted || current.isOriginAbove !== points[i - 1]?.isOriginAbove) {
                    if (currentPathStarted) {
                        for (let j = i - 1; j >= startIndex; j--) {
                            ctx.lineTo(points[j].x, points[j].destination);
                        }
                        ctx.closePath();
                        ctx.fill();
                    }

                    ctx.beginPath();
                    ctx.moveTo(current.x, current.origin);

                    ctx.fillStyle = current.isOriginAbove
                        ? options.originColor || 'rgba(0, 0, 0, 0)' // Default to transparent if null
                        : options.destinationColor || 'rgba(0, 0, 0, 0)'; // Default to transparent if null

                    startIndex = i;
                    currentPathStarted = true;
                }

                ctx.lineTo(next.x, next.origin);

                if (i === points.length - 2 || next.isOriginAbove !== current.isOriginAbove) {
                    for (let j = i + 1; j >= startIndex; j--) {
                        ctx.lineTo(points[j].x, points[j].destination);
                    }
                    ctx.closePath();
                    ctx.fill();
                    currentPathStarted = false;
                }
            }

            if (options.lineWidth) {
                ctx.lineWidth = options.lineWidth;
                ctx.strokeStyle = options.originColor || 'rgba(0, 0, 0, 0)';
                ctx.stroke();
            }
        });
    }
}

class FillAreaPaneView implements IPrimitivePaneView {
    _source: FillArea;
    _data: BandViewData;

    constructor(source: FillArea) {
        this._source = source;
        this._data = {
            data: [],
            options: this._source.options, // Pass the options for the renderer
        };
    }

    update() {
        const timeScale = this._source.chart.timeScale();

        this._data.data = this._source._bandsData.map((d) => ({
            x: timeScale.timeToCoordinate(d.time)!,
            origin: this._source._originSeries.priceToCoordinate(d.origin)!,
            destination: this._source._destinationSeries.priceToCoordinate(d.destination)!,
            isOriginAbove: d.origin > d.destination,
        }));

        // Ensure options are updated in the data
        this._data.options = this._source.options;
    }

    renderer() {
        return new FillAreaPaneRenderer(this._data);
    }
    zOrder() {
        return 'bottom' as PrimitivePaneViewZOrder;
    }
}



export interface FillAreaOptions {
    originColor: string | null; // Color for origin on top
    destinationColor: string | null; 
    lineWidth: number | null;
};

export const defaultFillAreaOptions: Required<FillAreaOptions> = {
    originColor: null,
    destinationColor: null,
    lineWidth: null,
};

interface BandData {
    time: Time;
    origin: number; // Price value from the origin series
    destination: number; // Price value from the destination series
    upper: number; // The upper value for rendering
    lower: number; // The lower value for rendering
};
interface BandViewData {
    data: BandRendererData[];
    options: Required<FillAreaOptions>;
};
interface BandRendererData {
    x: Coordinate | number;
    origin: Coordinate | number;
    destination: Coordinate | number;
    isOriginAbove: boolean; // True if the origin series is above the destination series
}

function extractPrices(
    originPoint: SeriesDataItemTypeMap[SeriesType],
    destinationPoint: SeriesDataItemTypeMap[SeriesType]
): {originValue: number| undefined, destinationValue: number| undefined} | undefined {
    let originPrice: number | undefined;
    let destinationPrice: number | undefined;

    // Extract origin price
    if ((originPoint as BarData).close !== undefined) {
        const originBar = originPoint as BarData;
        originPrice = originBar.close; // Use close price for comparison
    } else if ((originPoint as LineData).value !== undefined) {
        originPrice = (originPoint as LineData).value; // Use value for LineData
    }

    // Extract destination price
    if ((destinationPoint as BarData).close !== undefined) {
        const destinationBar = destinationPoint as BarData;
        destinationPrice = destinationBar.close; // Use close price for comparison
    } else if ((destinationPoint as LineData).value !== undefined) {
        destinationPrice = (destinationPoint as LineData).value; // Use value for LineData
    }

    // Ensure both prices are defined
    if (originPrice === undefined || destinationPrice === undefined) {
        return undefined;
    }

    // Handle mixed types and determine the appropriate values to return
    if (originPrice < destinationPrice) {
        // origin > destination: min(open, close) for BarData (if applicable), otherwise value
        const originValue =
            (originPoint as BarData).close !== undefined
                ? Math.min((originPoint as BarData).open, (originPoint as BarData).close)
                : originPrice;

        const destinationValue =
            (destinationPoint as BarData).close !== undefined
                ? Math.max((destinationPoint as BarData).open, (destinationPoint as BarData).close)
                : destinationPrice;

        return {originValue, destinationValue};
    } else {
        // origin <= destination: max(open, close) for BarData (if applicable), otherwise value
        const originValue =
            (originPoint as BarData).close !== undefined
                ? Math.max((originPoint as BarData).open, (originPoint as BarData).close)
                : originPrice;

        const destinationValue =
            (destinationPoint as BarData).close !== undefined
                ? Math.min((destinationPoint as BarData).open, (destinationPoint as BarData).close)
                : destinationPrice;

        return {originValue, destinationValue};
    }
}```