fix: overlay align to the right when no left/right price scale defined …

…#926

.size-limit.js

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

src/model/chart-model.ts

@@ -394,9 +394,18 @@ export class ChartModel implements IDestroyable {
 
 			return;
 		}
-
-		res.priceScale.applyOptions(options);
-		this._priceScalesOptionsChanged.fire();
+		if (priceScaleId === 'left') {
+			this.applyOptions({
+				leftPriceScale: options,
+			});
+		} else if (priceScaleId === 'right') {
+			this.applyOptions({
+				rightPriceScale: options,
+			});
+		} else {
+			res.priceScale.applyOptions(options);
+			this._priceScalesOptionsChanged.fire();
+		}
 	}
 
 	public findPriceScale(priceScaleId: string): PriceScaleOnPane | null {

src/views/pane/pane-price-axis-view.ts

@@ -69,17 +69,16 @@ export class PanePriceAxisView implements IPaneView {
 		}
 
 		const position = pane.priceScalePosition(priceScale);
-		if (position === 'overlay') {
-			return null;
-		}
+		// with no left and right price scale, overlay will be align to the right
+		const align = position === 'overlay' ? 'right' : position;
 
 		const options = this._chartModel.priceAxisRendererOptions();
 		if (options.fontSize !== this._fontSize) {
 			this._fontSize = options.fontSize;
 			this._textWidthCache.reset();
 		}
 
-		this._renderer.setParams(this._priceAxisView.paneRenderer(), options, width, position);
+		this._renderer.setParams(this._priceAxisView.paneRenderer(), options, width, align);
 		return this._renderer;
 	}
 }

tests/e2e/graphics/test-cases/series/overlay-series-title-only-overlay-price-scale.js

@@ -0,0 +1,31 @@
+function generateData(func) {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: func(i),
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const line1 = chart.addLineSeries({
+		priceScaleId: 'overlay',
+		color: 'rgb(255, 0, 0)',
+		title: 'SIN',
+	});
+	const line2 = chart.addLineSeries({
+		priceScaleId: 'overlay',
+		color: 'rgb(0, 255, 0)',
+		title: 'COS',
+	});
+
+	line1.setData(generateData(Math.sin));
+	line2.setData(generateData(Math.cos));
+}