From 06f46e35ac71b74ba2bec3d1e408e5db58136e9d Mon Sep 17 00:00:00 2001
From: Evgeniy Timokhov <timocov@gmail.com>
Date: Tue, 7 Sep 2021 09:05:48 +0100
Subject: [PATCH] Added measuring crosshair's labels to calculate correct
 optimal width in PriceAxisWidget

Fixes #834
---
 src/gui/price-axis-widget.ts                  | 13 ++++++
 ...custom-price-format-with-extending-axis.js | 41 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 tests/e2e/graphics/test-cases/initial-options/custom-price-format-with-extending-axis.js

diff --git a/src/gui/price-axis-widget.ts b/src/gui/price-axis-widget.ts
index d5b1d7ca41..8cad25f327 100644
--- a/src/gui/price-axis-widget.ts
+++ b/src/gui/price-axis-widget.ts
@@ -5,6 +5,7 @@ import { clearRect, clearRectWithGradient, drawScaled } from '../helpers/canvas-
 import { IDestroyable } from '../helpers/idestroyable';
 import { makeFont } from '../helpers/make-font';
 
+import { Coordinate } from '../model/coordinate';
 import { IDataSource } from '../model/idata-source';
 import { InvalidationLevel } from '../model/invalidate-mask';
 import { IPriceDataSource } from '../model/iprice-data-source';
@@ -194,6 +195,18 @@ export class PriceAxisWidget implements IDestroyable {
 			}
 		}
 
+		const firstValue = this._priceScale.firstValue();
+		if (firstValue !== null && this._size !== null) {
+			const topValue = this._priceScale.coordinateToPrice(1 as Coordinate, firstValue);
+			const bottomValue = this._priceScale.coordinateToPrice(this._size.h - 2 as Coordinate, firstValue);
+
+			tickMarkMaxWidth = Math.max(
+				tickMarkMaxWidth,
+				this._widthCache.measureText(ctx, this._priceScale.formatPrice(Math.floor(Math.min(topValue, bottomValue)) + 0.11111111111111, firstValue)),
+				this._widthCache.measureText(ctx, this._priceScale.formatPrice(Math.ceil(Math.max(topValue, bottomValue)) - 0.11111111111111, firstValue))
+			);
+		}
+
 		let res = Math.ceil(
 			rendererOptions.borderSize +
 			rendererOptions.tickLength +
diff --git a/tests/e2e/graphics/test-cases/initial-options/custom-price-format-with-extending-axis.js b/tests/e2e/graphics/test-cases/initial-options/custom-price-format-with-extending-axis.js
new file mode 100644
index 0000000000..9fb7da8d14
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/initial-options/custom-price-format-with-extending-axis.js
@@ -0,0 +1,41 @@
+function generateData() {
+	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: i + ((i % 3) + 1) * 0.3333,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	res.push({
+		time: time.getTime() / 1000,
+		value: 500,
+	});
+
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const series = chart.addLineSeries({
+		priceFormat: {
+			type: 'custom',
+			minMove: 0.00000001,
+			formatter: price => {
+				if (price % 1 === 0) {
+					return price + 'USD';
+				}
+
+				return price.toFixed(3) + 'USD';
+			},
+		},
+	});
+
+	series.setData(generateData());
+
+	chart.timeScale().fitContent();
+}