Hit test on price scale

[vishnuc]

Hi , i want to show a small button on bottom of price scale.. and when clicked i wanna call chart.fitcontent method, what is the procedure ?

also does hittest method works for price pane view ? i want to detect hittest and display cursor pointer to the button

, i created button but not able to click it

import type {
	ISeriesPrimitive,
	IPrimitivePaneView,
	IPrimitivePaneRenderer,
	ISeriesPrimitiveAxisView,
	PrimitivePaneViewZOrder,
	Coordinate,
	MouseEventParams
} from 'lightweight-charts';
import { PluginBase } from '../../tvplugin/plugin-base';
import { getUid } from '@/lib/helper/uid';

export class AutoButtonPlugin extends PluginBase implements ISeriesPrimitive {
	myChart: any;
	mySeries: any;
	uid: string;
	_priceAxisViews: AutoScaleAxisView[];
	_priceAxisPaneViews: AutoScaleButtonPaneView[];
	_clickHandler: (param: MouseEventParams) => void;

	constructor(chart: any, series: any, paneIndex?: number, grid?: string) {
		super();
		this.uid = getUid('autobutton');
		this.myChart = chart;
		this.mySeries = series;
		this._priceAxisViews = [new AutoScaleAxisView(this)];
		this._priceAxisPaneViews = [new AutoScaleButtonPaneView(this)];
		
		this._clickHandler = (param: MouseEventParams) => this._handleClick(param);
		this.myChart.subscribeClick(this._clickHandler);
	}

	_handleClick(param: MouseEventParams) {
		if (!param.point) return;
		
		console.log('Click detected at:', param.point.x, param.point.y);
		
		const paneView = this._priceAxisPaneViews[0];
		if (paneView) {
			console.log('Button rect:', paneView._buttonRect);
			
			// For price axis pane views, coordinates need conversion
			const chartSize = this.myChart?.paneSize();
			const priceScaleWidth = this.myChart?.priceScale()?.width() || 60;
			
			if (chartSize) {
				// Convert chart coordinates to price axis coordinates
				const priceAxisX = param.point.x - (chartSize.width - priceScaleWidth);
				console.log('Price axis X:', priceAxisX, 'Chart width:', chartSize.width, 'Price scale width:', priceScaleWidth);
				
				const hitResult = paneView.hitTest(priceAxisX, param.point.y);
				console.log('Hit result:', hitResult);
				
				if (hitResult) {
					console.log('Button hit detected!');
					this.handleAutoScale();
				}
			}
		}
	}

	remove() {
		if (this.myChart && this._clickHandler) {
			this.myChart.unsubscribeClick(this._clickHandler);
		}
		super.remove();
	}

	handleAutoScale() {
		alert('Auto scale button clicked!');
		if (this.mySeries && this.myChart) {
			this.mySeries.priceScale().applyOptions({
				autoScale: true
			});
			this.myChart.timeScale().fitContent();
		}
	}

	getCurrentTheme(): 'light' | 'dark' {
		const chartOptions = this.myChart?.options();
		const bgColor = chartOptions?.layout?.background?.color;
		
		if (bgColor === '#FFFFFF' || bgColor === 'white') {
			return 'light';
		}
		return 'dark';
	}

	paneViews() {
		return [];
	}

	priceAxisViews() {
		return [];
	}

	priceAxisPaneViews() {
		return this._priceAxisPaneViews;
	}

	updateAllViews() {
		this._priceAxisViews.forEach((view) => view.update());
		this._priceAxisPaneViews.forEach((view) => view.update());
	}
}

class AutoScaleAxisView implements ISeriesPrimitiveAxisView {
	_source: AutoButtonPlugin;
	_pos: Coordinate | null = null;
	_isClicked: boolean = false;

	constructor(source: AutoButtonPlugin) {
		this._source = source;
	}

	update(): void {
		const chartSize = this._source.myChart?.paneSize();
		if (chartSize) {
			this._pos = (chartSize.height - 8) as Coordinate;
		}
	}

	coordinate(): Coordinate {
		return this._pos ?? -1 as Coordinate;
	}

	text(): string {
		return 'A';
	}

	textColor(): string {
		const theme = this._source.getCurrentTheme();
		if (this._isClicked) {
			return '#FFFFFF';
		}
		return theme === 'light' ? '#191919' : '#E2E8F0';
	}

	backColor(): string {
		const theme = this._source.getCurrentTheme();
		
		if (this._isClicked) {
			return theme === 'light' ? '#0EA5E9' : '#38BDF8';
		}
		
		return theme === 'light' ? '#F8FAFC' : '#334155';
	}

	visible(): boolean {
		return true;
	}

	tickVisible(): boolean {
		return false;
	}

	handleClick(): void {
		this._isClicked = true;
		this._source.handleAutoScale();
		
		setTimeout(() => {
			this._isClicked = false;
			this._source.requestUpdate();
		}, 150);
	}
}

class AutoScaleButtonPaneView implements IPrimitivePaneView {
	_source: AutoButtonPlugin;
	_buttonRect: { x: number; y: number; width: number; height: number } | null = null;

	constructor(source: AutoButtonPlugin) {
		this._source = source;
	}

	zOrder(): PrimitivePaneViewZOrder {
		return 'top';
	}

	update(): void {
		const chartSize = this._source.myChart?.paneSize();
		const priceScaleWidth = this._source.myChart?.priceScale()?.width() || 60;
		
		if (chartSize) {
			this._buttonRect = {
				x: priceScaleWidth - 25,
				y: chartSize.height - 20,
				width: 20,
				height: 15
			};
		}
	}

	hitTest(x: number, y: number) {
		if (!this._buttonRect) return null;
		
		if (
			x >= this._buttonRect.x &&
			x <= this._buttonRect.x + this._buttonRect.width &&
			y >= this._buttonRect.y &&
			y <= this._buttonRect.y + this._buttonRect.height
		) {
			return {
				cursorStyle: 'pointer',
				externalId: this._source.uid,
			};
		}
		
		return null;
	}

	renderer() {
		return new AutoScaleButtonRenderer(this._buttonRect, this._source);
	}
}

class AutoScaleButtonRenderer implements IPrimitivePaneRenderer {
	_buttonRect: { x: number; y: number; width: number; height: number } | null;
	_source: AutoButtonPlugin;

	constructor(buttonRect: { x: number; y: number; width: number; height: number } | null, source: AutoButtonPlugin) {
		this._buttonRect = buttonRect;
		this._source = source;
	}

	draw(target: any) {
		if (!this._buttonRect) return;

		target.useBitmapCoordinateSpace((scope: any) => {
			const ctx = scope.context;
			const { horizontalPixelRatio, verticalPixelRatio } = scope;
			
			const x = this._buttonRect!.x * horizontalPixelRatio;
			const y = this._buttonRect!.y * verticalPixelRatio;
			const width = this._buttonRect!.width * horizontalPixelRatio;
			const height = this._buttonRect!.height * verticalPixelRatio;
			const radius = 3 * horizontalPixelRatio;

			const theme = this._source.getCurrentTheme();
			const axisView = this._source._priceAxisViews[0];
			
			const bgColor = axisView?.backColor() || (theme === 'light' ? '#F8FAFC' : '#334155');
			const textColor = axisView?.textColor() || (theme === 'light' ? '#191919' : '#E2E8F0');
			const borderColor = theme === 'light' ? '#E2E8F0' : '#475569';

			ctx.fillStyle = bgColor;
			ctx.beginPath();
			ctx.roundRect(x, y, width, height, radius);
			ctx.fill();

			ctx.strokeStyle = borderColor;
			ctx.lineWidth = 1 * horizontalPixelRatio;
			ctx.beginPath();
			ctx.roundRect(x, y, width, height, radius);
			ctx.stroke();

			ctx.fillStyle = textColor;
			ctx.font = `bold ${10 * verticalPixelRatio}px -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif`;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillText('A', x + width / 2, y + height / 2);
		});
	}
}

[SlicedSilver]

If you place the button on the bottom right corner of the chart pane then you would be able to use an approach like shown on the following demos:

• https://tradingview.github.io/lightweight-charts/plugin-examples/plugins/user-price-alerts/example/
• https://tradingview.github.io/lightweight-charts/plugin-examples/plugins/user-price-lines/example/

The source code is here: https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples/src/plugins

However if you want to place the button on the price scale pane then you would need to add your own mouse event listeners on that DOM element since the library doesn't have mouse move and mouse click events on the price or time scale panes as part of the API.

We hadn't had a need for mouse events on the axis panes previously so it's not part of the library.

[vishnuc]

so hitTest function works only main chart and not on price scale or timescale am I right ? also we had cursor bug before in hittest.. in Which version was it fixed ?

[vishnuc]

also what is the best way to access this areas DOM html ?

[SlicedSilver]

so hitTest function works only main chart and not on price scale or timescale am I right ? also we had cursor bug before in hittest.. in Which version was it fixed ?

It was fixed in 5.0.3
Release notes are here: https://tradingview.github.io/lightweight-charts/docs/release-notes#503

also what is the best way to access this areas DOM html ?

We don't have this canvas as part of the Plugins api.
But to answer your question, you could probably access it like this:

chart.chartElement().querySelector('table tr:nth-child(2) td:last-child')

[vishnuc]

thanks i added buttons and looks good ..And I dont wanna create new post just small doubt regarding cursor.. i use 5.0.8 , still cursor not changing , other things like dragging hover effect else working fine.. means hittest is perfect.. but cursor not changing , is this the right way to do it ?

hitTest(x: number, y: number) {
	if (
		!this._paneViews[0]?._data?.x1 ||
		!this._paneViews[0]?._data?.y1 ||
		!this._paneViews[0]?._data?.x2 ||
		!this._paneViews[0]?._data?.y2
	) {
		return null;
	}

	const p1 = {
		x: this._paneViews[0]._data.x1,
		y: this._paneViews[0]._data.y1
	};
	const p2 = {
		x: this._paneViews[0]._data.x2,
		y: this._paneViews[0]._data.y2
	};

	// Check if hovering over endpoints (circles)
	const endpointRadius = 5;
	const isNearP1 = Math.sqrt(Math.pow(x - p1.x, 2) + Math.pow(y - p1.y, 2)) <= endpointRadius;
	const isNearP2 = Math.sqrt(Math.pow(x - p2.x, 2) + Math.pow(y - p2.y, 2)) <= endpointRadius;

	if (isNearP1 || isNearP2) {
		this.setHover(true, isNearP1 ? 'p1' : 'p2');
		return {
			cursorStyle: 'pointer',
			externalId: isNearP1 ? 'p1' : 'p2',
			zOrder: 'top' as PrimitivePaneViewZOrder
		};
	}

	// Check if hovering over the line
	const lineWidth = 10;

	// Calculate distance from point to line segment
	const A = x - p1.x;
	const B = y - p1.y;
	const C = p2.x - p1.x;
	const D = p2.y - p1.y;

	const dot = A * C + B * D;
	const lenSq = C * C + D * D;
	let param = -1;

	if (lenSq !== 0) {
		param = dot / lenSq;
	}

	let xx, yy;

	if (param < 0) {
		xx = p1.x;
		yy = p1.y;
	} else if (param > 1) {
		xx = p2.x;
		yy = p2.y;
	} else {
		xx = p1.x + param * C;
		yy = p1.y + param * D;
	}

	const dx = x - xx;
	const dy = y - yy;
	const distance = Math.sqrt(dx * dx + dy * dy);

	if (distance <= lineWidth) {
		this.setHover(true, 'line');
		return {
			cursorStyle: 'pointer',
			externalId: 'line',
			zOrder: 'top' as PrimitivePaneViewZOrder
		};
	}

	this.setHover(false, null);
	return null;
}

[SlicedSilver]

It works on this plugin example:

lightweight-charts/plugin-examples/src/plugins/user-price-alerts/user-price-alerts.ts

Lines 106 to 113 in 7170ead

	hitTest(): PrimitiveHoveredItem | null {
	if (!this._currentCursor) return null;
	return {
	cursorStyle: this._currentCursor,
	externalId: 'user-alerts-primitive',
	zOrder: 'top',
	};
	}

On tradingview.com it is used for the cursor change when dragging this item on the chart
https://github.com/user-attachments/assets/42d5ee96-dde0-49b7-a250-08b3f886fcfc

So it should be working. Perhaps you log the result you are returning from hitTest? Maybe you are having it called multiple times and returning 'null' in some cases.