Custom price line label snaps to "minMove" and shows a rounded value instead of the precise number

[Deodes]

Custom price line is positioned at the exact numeric value on the chart (Y-coordinate is correct), but the axis label for that line is rounded to the nearest tick defined by the series/price scalevminMove. There is no way to specify a per price line formatter or disable snapping only for the line’s label.

This creates a visible mismatch: the line is drawn at the precise value, but the label shows a different, tick-rounded value.

Lightweight Charts™ Version: 5.0.7

Steps/code to reproduce:

<div id="c" style="width:800px;height:400px"></div>
<script type="module">
  import { createChart, CandlestickSeries } from 'lightweight-charts';

  const chart = createChart(document.getElementById('c'), {});

  // Series uses instrument tick (example: 0.00050)
  const series = chart.addSeries(CandlestickSeries, {
    priceScaleId: 'right',
    priceFormat: { type: 'price', precision: 5, minMove: 0.0005 },
  });

  series.setData([
    { time: 1, open: 1.1590, high: 1.1600, low: 1.1580, close: 1.1592 },
    { time: 2, open: 1.1592, high: 1.1602, low: 1.1585, close: 1.1591 },
  ]);

  // Draw a price line at a precise value that is not aligned to minMove
  const preciseValue = 1.15949;
  series.createPriceLine({
    price: preciseValue,
    axisLabelVisible: true,
    color: '#21ba45',
    lineWidth: 2,
  });

  // Observed: line Y position is correct; axis label displays 1.15950 (rounded to tick)
</script>

Actual behavior:

The line is rendered at the precise price (correct Y position).

The axis label for that line displays a tick-rounded value (snapped to minMove), not the exact number passed to price.

Expected behavior:

The axis label displays the exact line value (no tick snapping)

[SlicedSilver]

This is the expected behaviour. The minMove setting on the series is defining the minimum unit of price and the library is ensuring that displayed values are rounded to that minimum unit.

If a price like 1.15949 is considered valid then minMove should rather be 1e-5.

If you really wanted the price scale to have that smaller minMove (1e-5) value but still have your candlestick series have its own minMove value of 0.0005 then you could create a hidden series before your series which has that minMove setting. Maybe a bit of hack but it achieves your requirement.

const blankSeries = chart.addSeries(LineSeries, {
	priceScaleId: 'right',
	priceFormat: { type: 'price', precision: 5, minMove: 1e-5 },
	autoscaleInfoProvider: () => {
		return null; // ignore for autoscale
	},
});
blankSeries.setData([{ time: 1 as Time, value: 0, color: 'transparent' }]); // needs some data

// Series uses instrument tick (example: 0.00050)
const series = chart.addSeries(CandlestickSeries, {
	priceScaleId: 'right',
	priceFormat: { type: 'price', precision: 5, minMove: 0.0005 },
});

series.setData([
	{ time: 1 as Time, open: 1.159, high: 1.16, low: 1.158, close: 1.1592 },
	{ time: 2 as Time, open: 1.1592, high: 1.1602, low: 1.1585, close: 1.1591 },
]);

const preciseValue = 1.15949;
series.createPriceLine({
	price: preciseValue,
	axisLabelVisible: true,
	color: '#21ba45',
	lineWidth: 2,
});

[Deodes]

@SlicedSilver Is it the only one possible workaround? I'm hitting lots of walls with this approach:

1. It means now I have to follow the right order of adding series to the chart(I can dynamically add them), otherwise the hidden one will be in the background, since chart shows the latest added series on top.
2. Using setSeriesOrder shouldn't help based on it's description: Price scales derive their formatters from the series with the lowest index; changing the order may affect the price scale's formatting. So it means, the hidden series will follow formatters of the series with the lowest index

Indeed it can be an expected behaviour, but in my opinion it's very tricky workaround for just showing the relevant value on a chart..

[SlicedSilver]

You could set a priceFormatter for the entire chart which can display more decimal points (and trim trailing zeros so it doesn't get too long):

const maxDecimalPoints = 5; // Affects amount of space used by crosshair labels

/**
 * Trims trailing zeros from a number formatted as a string.
 * For example, "12.3400" becomes "12.34", and "12.00" becomes "12".
 *
 * @param numStr The number formatted as a string.
 * @returns The trimmed number string.
 */
function trimTrailingZeros(numStr: string): string {
	// If the string does not contain a decimal point, there's nothing to trim.
	if (!numStr.includes('.')) {
		return numStr;
	}

	// Remove trailing zeros from the end of the string.
	let trimmed = numStr.replace(/0+$/, '');

	// If the last character is now a decimal point, remove it as well.
	if (trimmed.endsWith('.')) {
		trimmed = trimmed.slice(0, -1);
	}

	return trimmed;
}

const chartOptions = {
	autoSize: true,
	localization: {
		priceFormatter: (price: number): string => {
			return trimTrailingZeros(price.toFixed(maxDecimalPoints));
		},
	},
} satisfies DeepPartial<ChartOptions>;

const chart = createChart('container', chartOptions);

The above appears to resolve your issue, but you can go further and specify different formatters for the tick marks and prices.

• tickmarksPriceFormatter is an new option which gives you all the tickmark values in one call so that you can adjust your formatting based on all the values present (aka you can shorten the precision if the visible values allows)

const maxDecimalPoints = 5; // Affects amount of space used by crosshair labels

/**
 * Trims trailing zeros from a number formatted as a string.
 * For example, "12.3400" becomes "12.34", and "12.00" becomes "12".
 *
 * @param numStr The number formatted as a string.
 * @returns The trimmed number string.
 */
function trimTrailingZeros(numStr: string): string {
	// If the string does not contain a decimal point, there's nothing to trim.
	if (!numStr.includes('.')) {
		return numStr;
	}

	// Remove trailing zeros from the end of the string.
	let trimmed = numStr.replace(/0+$/, '');

	// If the last character is now a decimal point, remove it as well.
	if (trimmed.endsWith('.')) {
		trimmed = trimmed.slice(0, -1);
	}

	return trimmed;
}

function findValuablePrecision(values: number[], maxPrecision: number): number {
	let precision = maxPrecision;
	for (; precision > 0; precision--) {
		const precisionMultiplier = Math.pow(10, precision);
		const multiplied = values.map(v => Math.round(v * precisionMultiplier));
		if (multiplied.some(v => v % 10)) {
			break;
		}
	}
	return precision;
}

const chartOptions = {
	autoSize: true,
	localization: {
		priceFormatter: (price: number): string => {
			return trimTrailingZeros(price.toFixed(maxDecimalPoints));
		},
		tickmarksPriceFormatter: (priceValues: number[]): string[] => {
			const precision = findValuablePrecision(priceValues, maxDecimalPoints);
			return priceValues.map(n => n.toFixed(precision));
		},
	},
} satisfies DeepPartial<ChartOptions>;

const chart = createChart('container', chartOptions);

// Series uses instrument tick (example: 0.00050)
const series = chart.addSeries(CandlestickSeries, {
	priceScaleId: 'right',
	priceFormat: {
		type: 'custom',
		formatter: (val: number) =>
			trimTrailingZeros(val.toFixed(maxDecimalPoints)),
		tickmarksFormatter: (vals: number[]) => {
			const precision = findValuablePrecision(vals, 4);
			return vals.map(n => n.toFixed(precision));
		},
		minMove: 0.0005,
	},
});

series.setData([
	{ time: 1 as Time, open: 1.159, high: 1.16, low: 1.158, close: 1.159245 },
	{ time: 2 as Time, open: 1.1592, high: 1.1602, low: 1.1585, close: 1.1591 },
]);

const preciseValue = 1.15949;
series.createPriceLine({
	price: preciseValue,
	axisLabelVisible: true,
	color: '#21ba45',
	lineWidth: 2,
});

If there still isn't enough customisation then you could re-implement prices lines as a plugin and exactly control the rendering logic on the price scale (but this is a lot of work).