Draw series last price & price line labels on the top layer

.size-limit.js

@@ -9,6 +9,6 @@ module.exports = [
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '43.5 KB',
+		limit: '43.55 KB',
 	},
 ];

src/gui/pane-widget.ts

@@ -48,6 +48,10 @@ function sourcePaneViews(source: IDataSource, pane: Pane): readonly IPaneView[]
 	return source.paneViews(pane);
 }
 
+function sourceLabelPaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
+	return source.labelPaneViews(pane);
+}
+
 function sourceTopPaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
 	return source.topPaneViews !== undefined ? source.topPaneViews(pane) : [];
 }
@@ -478,6 +482,7 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 				this._drawGrid(ctx, this._canvasBinding.pixelRatio);
 				this._drawWatermark(ctx, this._canvasBinding.pixelRatio);
 				this._drawSources(ctx, this._canvasBinding.pixelRatio, sourcePaneViews);
+				this._drawSources(ctx, this._canvasBinding.pixelRatio, sourceLabelPaneViews);
 			}
 			ctx.restore();
 		}

src/model/custom-price-line.ts

@@ -35,11 +35,12 @@ export class CustomPriceLine {
 		return this._options;
 	}
 
-	public paneViews(): readonly IPaneView[] {
-		return [
-			this._priceLineView,
-			this._panePriceAxisView,
-		];
+	public paneView(): IPaneView {
+		return this._priceLineView;
+	}
+
+	public labelPaneView(): IPaneView {
+		return this._panePriceAxisView;
 	}
 
 	public priceAxisView(): IPriceAxisView {

src/model/data-source.ts

@@ -30,6 +30,10 @@ export abstract class DataSource implements IDataSource {
 	public abstract priceAxisViews(pane?: Pane, priceScale?: PriceScale): readonly IPriceAxisView[];
 	public abstract paneViews(pane?: Pane): readonly IPaneView[];
 
+	public labelPaneViews(pane?: Pane): readonly IPaneView[] {
+		return [];
+	}
+
 	public timeAxisViews(): readonly ITimeAxisView[] {
 		return [];
 	}

src/model/idata-source.ts

@@ -16,6 +16,7 @@ export interface IDataSource {
 	priceAxisViews(pane?: Pane, priceScale?: PriceScale): readonly IPriceAxisView[];
 	timeAxisViews(): readonly ITimeAxisView[];
 	paneViews(pane: Pane): readonly IPaneView[];
+	labelPaneViews(pane?: Pane): readonly IPaneView[];
 
 	/**
 	 * Pane views that are painted on the most top layer

src/model/series.ts

@@ -371,17 +371,22 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		res.push(
 			this._paneView,
 			this._priceLineView,
-			this._panePriceAxisView,
 			this._markersPaneView
 		);
 
-		for (const customPriceLine of this._customPriceLines) {
-			res.push(...customPriceLine.paneViews());
-		}
+		const priceLineViews = this._customPriceLines.map((line: CustomPriceLine) => line.paneView());
+		res.push(...priceLineViews);
 
 		return res;
 	}
 
+	public override labelPaneViews(pane?: Pane): readonly IPaneView[] {
+		return [
+			this._panePriceAxisView,
+			...this._customPriceLines.map((line: CustomPriceLine) => line.labelPaneView()),
+		];
+	}
+
 	public override priceAxisViews(pane: Pane, priceScale: PriceScale): readonly IPriceAxisView[] {
 		if (priceScale !== this._priceScale && !this._isOverlay()) {
 			return [];

tests/e2e/graphics/test-cases/series/price-line-overlapping-series-title.js

@@ -0,0 +1,13 @@
+function runTestCase(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const series = chart.addLineSeries({ title: 'TITLE' });
+
+	series.setData([
+		{ time: '1990-04-24', value: 0 },
+		{ time: '1990-04-25', value: 1 },
+		{ time: '1990-04-26', value: 2 },
+	]);
+
+	series.createPriceLine({ color: 'red', title: 'price line', price: 2 });
+}