Add possibility to change price axis text color

src/gui/price-axis-widget.ts

@@ -11,14 +11,13 @@ import { InvalidationLevel } from '../model/invalidate-mask';
 import { IPriceDataSource } from '../model/iprice-data-source';
 import { LayoutOptions } from '../model/layout-options';
 import { PriceScalePosition } from '../model/pane';
-import { PriceScale } from '../model/price-scale';
+import { PriceMark, PriceScale } from '../model/price-scale';
 import { TextWidthCache } from '../model/text-width-cache';
 import { PriceAxisViewRendererOptions } from '../renderers/iprice-axis-view-renderer';
 import { PriceAxisRendererOptionsProvider } from '../renderers/price-axis-renderer-options-provider';
 import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
 
 import { createBoundCanvas, getContext2D, Size } from './canvas-utils';
-import { LabelsImageCache } from './labels-image-cache';
 import { MouseEventHandler, MouseEventHandlers, TouchMouseEvent } from './mouse-event-handler';
 import { PaneWidget } from './pane-widget';
 
@@ -41,7 +40,7 @@ const enum Constants {
 
 export class PriceAxisWidget implements IDestroyable {
 	private readonly _pane: PaneWidget;
-	private readonly _options: LayoutOptions;
+	private readonly _layoutOptions: LayoutOptions;
 	private readonly _rendererOptionsProvider: PriceAxisRendererOptionsProvider;
 	private readonly _isLeft: boolean;
 
@@ -56,17 +55,15 @@ export class PriceAxisWidget implements IDestroyable {
 	private _mouseEventHandler: MouseEventHandler;
 	private _mousedown: boolean = false;
 
-	private readonly _widthCache: TextWidthCache = new TextWidthCache(50);
-	private _tickMarksCache: LabelsImageCache = new LabelsImageCache(11, '#000');
+	private readonly _widthCache: TextWidthCache = new TextWidthCache(200);
 
-	private _color: string | null = null;
 	private _font: string | null = null;
 	private _prevOptimalWidth: number = 0;
 	private _isSettingSize: boolean = false;
 
 	public constructor(pane: PaneWidget, options: LayoutOptions, rendererOptionsProvider: PriceAxisRendererOptionsProvider, side: PriceAxisWidgetSide) {
 		this._pane = pane;
-		this._options = options;
+		this._layoutOptions = options;
 		this._rendererOptionsProvider = rendererOptionsProvider;
 		this._isLeft = side === 'left';
 
@@ -130,8 +127,6 @@ export class PriceAxisWidget implements IDestroyable {
 		}
 
 		this._priceScale = null;
-
-		this._tickMarksCache.destroy();
 	}
 
 	public getElement(): HTMLElement {
@@ -142,29 +137,18 @@ export class PriceAxisWidget implements IDestroyable {
 		return ensureNotNull(this._priceScale).options().borderColor;
 	}
 
-	public textColor(): string {
-		return this._options.textColor;
-	}
-
 	public fontSize(): number {
-		return this._options.fontSize;
+		return this._layoutOptions.fontSize;
 	}
 
 	public baseFont(): string {
-		return makeFont(this.fontSize(), this._options.fontFamily);
+		return makeFont(this.fontSize(), this._layoutOptions.fontFamily);
 	}
 
 	public rendererOptions(): Readonly<PriceAxisViewRendererOptions> {
 		const options = this._rendererOptionsProvider.options();
-
-		const isColorChanged = this._color !== options.color;
 		const isFontChanged = this._font !== options.font;
 
-		if (isColorChanged || isFontChanged) {
-			this._recreateTickMarksCache(options);
-			this._color = options.color;
-		}
-
 		if (isFontChanged) {
 			this._widthCache.reset();
 			this._font = options.font;
@@ -461,7 +445,6 @@ export class PriceAxisWidget implements IDestroyable {
 			Math.round(tickMarkLeftX - rendererOptions.paddingInner * pixelRatio) :
 			Math.round(tickMarkLeftX + rendererOptions.tickLength * pixelRatio + rendererOptions.paddingInner * pixelRatio);
 
-		const textAlign = this._isLeft ? 'right' : 'left';
 		const tickHeight = Math.max(1, Math.floor(pixelRatio));
 		const tickOffset = Math.floor(pixelRatio * 0.5);
 
@@ -476,10 +459,18 @@ export class PriceAxisWidget implements IDestroyable {
 			ctx.fill();
 		}
 
-		ctx.fillStyle = this.textColor();
-		for (const tickMark of tickMarks) {
-			this._tickMarksCache.paintTo(ctx, tickMark.label, textLeftX, Math.round(tickMark.coord * pixelRatio), textAlign);
-		}
+		ctx.fillStyle = this._priceScale?.options().textColor ?? this._layoutOptions.textColor;
+		ctx.textAlign = this._isLeft ? 'right' : 'left';
+		ctx.textBaseline = 'middle';
+
+		const yMidCorrections = tickMarks.map((mark: PriceMark) => this._widthCache.yMidCorrection(ctx, mark.label));
+
+		drawScaled(ctx, pixelRatio, () => {
+			for (let i = tickMarks.length; i--;) {
+				const tickMark = tickMarks[i];
+				ctx.fillText(tickMark.label, textLeftX / pixelRatio, tickMark.coord + yMidCorrections[i]);
+			}
+		});
 
 		ctx.restore();
 	}
@@ -649,18 +640,7 @@ export class PriceAxisWidget implements IDestroyable {
 		this._prevOptimalWidth = width;
 	}
 
-	private _recreateTickMarksCache(options: PriceAxisViewRendererOptions): void {
-		this._tickMarksCache.destroy();
-
-		this._tickMarksCache = new LabelsImageCache(
-			options.fontSize,
-			options.color,
-			options.fontFamily
-		);
-	}
-
 	private readonly _canvasConfiguredHandler = () => {
-		this._recreateTickMarksCache(this._rendererOptionsProvider.options());
 		if (!this._isSettingSize) {
 			this._pane.chart().model().lightUpdate();
 		}

src/model/price-scale.ts

@@ -147,6 +147,14 @@ export interface PriceScaleOptions {
 	 */
 	borderColor: string;
 
+	/**
+	 * Price scale text color.
+	 * If not provided {@link LayoutOptions.textColor} is used.
+	 *
+	 * @defaultValue `undefined`
+	 */
+	textColor?: string;
+
 	/**
 	 * Show top and bottom corner labels only if entire text is visible.
 	 *

tests/e2e/graphics/test-cases/two-scales/price-scale-text-colors.js

@@ -0,0 +1,31 @@
+function generateData(offset) {
+	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: Math.cos(i + offset),
+		});
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = LightweightCharts.createChart(container, {
+		leftPriceScale: {
+			visible: true,
+			textColor: 'blue',
+		},
+		rightPriceScale: {
+			visible: true,
+			textColor: 'red',
+		},
+	});
+
+	const series1 = chart.addLineSeries({ color: 'red', priceScaleId: 'right' });
+	const series2 = chart.addLineSeries({ color: 'blue', priceScaleId: 'left' });
+
+	series1.setData(generateData(0));
+	series2.setData(generateData(Math.PI));
+}