From 2b4cad362cd4f182c0a24f810e371913fd6861c8 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 31 Jul 2024 09:33:07 +0100
Subject: [PATCH 01/17] historicalUpdate for series.update

---
 src/api/chart-api.ts                          |   4 +-
 src/api/iseries-api.ts                        |   4 +-
 src/api/series-api.ts                         |   4 +-
 src/model/data-consumer.ts                    |   2 +-
 src/model/data-layer.ts                       |  36 ++++-
 src/model/series.ts                           |   1 +
 .../coverage/test-cases/series/update-data.js |  17 +++
 .../test-cases/historical-data-updates.js     |  45 ++++++
 tests/unittests/data-layer.spec.ts            | 132 ++++++++++++++++--
 9 files changed, 222 insertions(+), 23 deletions(-)
 create mode 100644 tests/e2e/graphics/test-cases/historical-data-updates.js

diff --git a/src/api/chart-api.ts b/src/api/chart-api.ts
index aaa060b372..3d19706232 100644
--- a/src/api/chart-api.ts
+++ b/src/api/chart-api.ts
@@ -261,8 +261,8 @@ export class ChartApi<HorzScaleItem> implements IChartApiBase<HorzScaleItem>, Da
 		this._sendUpdateToChart(this._dataLayer.setSeriesData(series, data));
 	}
 
-	public updateData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType]): void {
-		this._sendUpdateToChart(this._dataLayer.updateSeriesData(series, data));
+	public updateData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType], historicalUpdate: boolean): void {
+		this._sendUpdateToChart(this._dataLayer.updateSeriesData(series, data, historicalUpdate));
 	}
 
 	public subscribeClick(handler: MouseEventHandler<HorzScaleItem>): void {
diff --git a/src/api/iseries-api.ts b/src/api/iseries-api.ts
index 28521cc824..cafb940690 100644
--- a/src/api/iseries-api.ts
+++ b/src/api/iseries-api.ts
@@ -158,6 +158,8 @@ export interface ISeriesApi<
 	 *
 	 * @param bar - A single data item to be added. Time of the new item must be greater or equal to the latest existing time point.
 	 * If the new item's time is equal to the last existing item's time, then the existing item is replaced with the new one.
+	 * @param historicalUpdate - If true, allows updating an existing data point that is not the latest bar. Default is false.
+	 * Updating older data using `historicalUpdate` will be slower than updating the most recent data point.
 	 * @example Updating line series data
 	 * ```js
 	 * lineSeries.update({
@@ -176,7 +178,7 @@ export interface ISeriesApi<
 	 * });
 	 * ```
 	 */
-	update(bar: TData): void;
+	update(bar: TData, historicalUpdate?: boolean): void;
 
 	/**
 	 * Returns a bar data by provided logical index.
diff --git a/src/api/series-api.ts b/src/api/series-api.ts
index 608f88b89f..f21af462b3 100644
--- a/src/api/series-api.ts
+++ b/src/api/series-api.ts
@@ -155,10 +155,10 @@ export class SeriesApi<
 		this._onDataChanged('full');
 	}
 
-	public update(bar: TData): void {
+	public update(bar: TData, historicalUpdate: boolean = false): void {
 		checkSeriesValuesType(this._series.seriesType(), [bar]);
 
-		this._dataUpdatesConsumer.updateData(this._series, bar);
+		this._dataUpdatesConsumer.updateData(this._series, bar, historicalUpdate);
 		this._onDataChanged('update');
 	}
 
diff --git a/src/model/data-consumer.ts b/src/model/data-consumer.ts
index f189ebcc82..8fd3caa53f 100644
--- a/src/model/data-consumer.ts
+++ b/src/model/data-consumer.ts
@@ -228,5 +228,5 @@ export interface SeriesDataItemTypeMap<HorzScaleItem = Time> {
 
 export interface DataUpdatesConsumer<TSeriesType extends SeriesType, HorzScaleItem = Time> {
 	applyNewData(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType][]): void;
-	updateData(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType]): void;
+	updateData(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType], historicalUpdate: boolean): void;
 }
diff --git a/src/model/data-layer.ts b/src/model/data-layer.ts
index b1b9af0cc7..515cc7a8cd 100644
--- a/src/model/data-layer.ts
+++ b/src/model/data-layer.ts
@@ -96,6 +96,7 @@ function seriesUpdateInfo<TSeriesType extends SeriesType, HorzScaleItem>(seriesR
 	const prevFirstAndLastTime = seriesRowsFirstAndLastTime(prevSeriesRows, bh);
 	if (firstAndLastTime !== undefined && prevFirstAndLastTime !== undefined) {
 		return {
+			historicalUpdate: false,
 			lastBarUpdatedOrNewBarsAddedToTheRight:
 				firstAndLastTime.lastTime >= prevFirstAndLastTime.lastTime &&
 				firstAndLastTime.firstTime >= prevFirstAndLastTime.firstTime,
@@ -242,7 +243,7 @@ export class DataLayer<HorzScaleItem> {
 		return this.setSeriesData(series, []);
 	}
 
-	public updateSeriesData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType]): DataUpdateResponse {
+	public updateSeriesData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType], historicalUpdate: boolean): DataUpdateResponse {
 		const extendedData = data as SeriesDataItemWithOriginalTime<TSeriesType, HorzScaleItem>;
 		saveOriginalTime(extendedData);
 		// convertStringToBusinessDay(data);
@@ -252,13 +253,17 @@ export class DataLayer<HorzScaleItem> {
 		const time = timeConverter(data.time);
 
 		const lastSeriesTime = this._seriesLastTimePoint.get(series);
-		if (lastSeriesTime !== undefined && this._horzScaleBehavior.key(time) < this._horzScaleBehavior.key(lastSeriesTime)) {
+		if (!historicalUpdate && lastSeriesTime !== undefined && this._horzScaleBehavior.key(time) < this._horzScaleBehavior.key(lastSeriesTime)) {
 			// eslint-disable-next-line @typescript-eslint/no-base-to-string
 			throw new Error(`Cannot update oldest data, last time=${lastSeriesTime}, new time=${time}`);
 		}
 
 		let pointDataAtTime = this._pointDataByTimePoint.get(this._horzScaleBehavior.key(time));
 
+		if (historicalUpdate && pointDataAtTime === undefined) {
+			throw new Error('Cannot update non-existing data point when historicalUpdate is true');
+		}
+
 		// if no point data found for the new data item
 		// that means that we need to update scale
 		const affectsTimeScale = pointDataAtTime === undefined;
@@ -276,9 +281,16 @@ export class DataLayer<HorzScaleItem> {
 
 		pointDataAtTime.mapping.set(series, plotRow);
 
-		this._updateLastSeriesRow(series, plotRow);
+		if (historicalUpdate) {
+			this._updateHistoricalSeriesRow(series, plotRow, pointDataAtTime.index);
+		} else {
+			this._updateLastSeriesRow(series, plotRow);
+		}
 
-		const info: SeriesUpdateInfo = { lastBarUpdatedOrNewBarsAddedToTheRight: isSeriesPlotRow(plotRow) };
+		const info: SeriesUpdateInfo = {
+			lastBarUpdatedOrNewBarsAddedToTheRight: isSeriesPlotRow(plotRow),
+			historicalUpdate,
+		};
 
 		// if point already exist on the time scale - we don't need to make a full update and just make an incremental one
 		if (!affectsTimeScale) {
@@ -332,6 +344,22 @@ export class DataLayer<HorzScaleItem> {
 		this._seriesLastTimePoint.set(series, plotRow.time);
 	}
 
+	private _updateHistoricalSeriesRow(series: Series<SeriesType>, plotRow: SeriesPlotRow<SeriesType> | WhitespacePlotRow, pointDataIndex: number): void {
+		const seriesData = this._seriesRowsBySeries.get(series);
+		if (seriesData === undefined) {
+			return;
+		}
+		// binary search for actual index in array.
+		const index = lowerBound(seriesData, pointDataIndex, (row: SeriesPlotRow<SeriesType>, currentIndex: number): boolean =>
+			row.index < currentIndex
+		);
+		if (isSeriesPlotRow(plotRow)) {
+			seriesData[index] = plotRow;
+		} else {
+			seriesData.splice(index, 1);
+		}
+	}
+
 	private _setRowsToSeries(series: Series<SeriesType>, seriesRows: (SeriesPlotRow<SeriesType> | WhitespacePlotRow)[]): void {
 		if (seriesRows.length !== 0) {
 			this._seriesRowsBySeries.set(series, seriesRows.filter(isSeriesPlotRow));
diff --git a/src/model/series.ts b/src/model/series.ts
index 51eca43058..9367daa124 100644
--- a/src/model/series.ts
+++ b/src/model/series.ts
@@ -124,6 +124,7 @@ export interface SeriesDataAtTypeMap {
 
 export interface SeriesUpdateInfo {
 	lastBarUpdatedOrNewBarsAddedToTheRight: boolean;
+	historicalUpdate: boolean;
 }
 
 // note that if would like to use `Omit` here - you can't due https://github.com/microsoft/TypeScript/issues/36981
diff --git a/tests/e2e/coverage/test-cases/series/update-data.js b/tests/e2e/coverage/test-cases/series/update-data.js
index 97c2461eda..b38f6d4e17 100644
--- a/tests/e2e/coverage/test-cases/series/update-data.js
+++ b/tests/e2e/coverage/test-cases/series/update-data.js
@@ -88,5 +88,22 @@ async function afterInteractions() {
 		...barData[barData.length - 1],
 		time: barData[barData.length - 1].time + 3600,
 	});
+
+	await awaitNewFrame();
+
+	lineSeries.update(
+		{
+			...barData[barData.length - 5],
+			value: 1234,
+		},
+		true // historical update
+	);
+	lineSeries.update(
+		{
+			time: barData[barData.length - 6],
+		},
+		true // historical update
+	);
+
 	return Promise.resolve();
 }
diff --git a/tests/e2e/graphics/test-cases/historical-data-updates.js b/tests/e2e/graphics/test-cases/historical-data-updates.js
new file mode 100644
index 0000000000..802341b3d8
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/historical-data-updates.js
@@ -0,0 +1,45 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 50; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container, {
+		layout: {
+			attributionLogo: true,
+		},
+	}));
+
+	const mainSeries = chart.addLineSeries();
+
+	const data = generateData();
+	const thirdLastPoint = {
+		...data[data.length - 4],
+	};
+	mainSeries.setData(data);
+
+	try {
+		mainSeries.update(thirdLastPoint);
+
+		console.assert(
+			false,
+			'should fail if older update and not setting historicalUpdate to true'
+		);
+	} catch (e) {
+		// passed
+	}
+	mainSeries.update(
+		{ ...thirdLastPoint, value: thirdLastPoint.value - 10 },
+		true
+	);
+	chart.timeScale().fitContent();
+}
diff --git a/tests/unittests/data-layer.spec.ts b/tests/unittests/data-layer.spec.ts
index d3fbc393a7..0c0ec9e340 100644
--- a/tests/unittests/data-layer.spec.ts
+++ b/tests/unittests/data-layer.spec.ts
@@ -35,6 +35,10 @@ function dataItemAt(time: Time): BarData<Time> & LineData<Time> & HistogramData<
 	return { time, value: 0, open: 0, high: 0, low: 0, close: 0 };
 }
 
+function changedDataItemAt(time: Time): BarData<Time> & LineData<Time> & HistogramData<Time> {
+	return { time, value: 1, open: 1, high: 1, low: 1, close: 1 };
+}
+
 function whitespaceItemAt(time: Time): WhitespaceData<Time> {
 	return { time };
 }
@@ -199,7 +203,7 @@ describe('DataLayer', () => {
 		dataLayer.setSeriesData(series2, [dataItemAt(2000 as UTCTimestamp), dataItemAt(4000 as UTCTimestamp)]);
 
 		// add a new point
-		const updateResult1 = dataLayer.updateSeriesData(series1, dataItemAt(5000 as UTCTimestamp));
+		const updateResult1 = dataLayer.updateSeriesData(series1, dataItemAt(5000 as UTCTimestamp), false);
 		expect(updateResult1.timeScale.baseIndex).to.be.equal(4 as TimePointIndex);
 		expect(updateResult1.timeScale.points).excludingEvery('pointData').to.have.deep.members([
 			{ time: { timestamp: 1000 }, timeWeight: 70, originalTime: 1000 },
@@ -221,7 +225,7 @@ describe('DataLayer', () => {
 		*/
 
 		// add one more point
-		const updateResult2 = dataLayer.updateSeriesData(series2, dataItemAt(6000 as UTCTimestamp));
+		const updateResult2 = dataLayer.updateSeriesData(series2, dataItemAt(6000 as UTCTimestamp), false);
 		expect(updateResult2.timeScale.baseIndex).to.be.equal(5 as TimePointIndex);
 		expect(updateResult2.timeScale.points).excludingEvery('pointData').to.have.deep.members([
 			{ time: { timestamp: 1000 }, timeWeight: 70, originalTime: 1000 },
@@ -255,7 +259,7 @@ describe('DataLayer', () => {
 		dataLayer.setSeriesData(series2, [dataItemAt(2000 as UTCTimestamp), dataItemAt(4000 as UTCTimestamp)]);
 
 		// change the last point of the first series
-		const updateResult1 = dataLayer.updateSeriesData(series1, dataItemAt(4000 as UTCTimestamp));
+		const updateResult1 = dataLayer.updateSeriesData(series1, dataItemAt(4000 as UTCTimestamp), false);
 		expect(updateResult1.timeScale.baseIndex).to.be.equal(2 as TimePointIndex);
 		expect(updateResult1.timeScale.points).to.be.equal(undefined);
 		expect(updateResult1.timeScale.firstChangedPointIndex).to.be.equal(undefined);
@@ -269,7 +273,7 @@ describe('DataLayer', () => {
 		});
 
 		// change the last point of the second series
-		const updateResult2 = dataLayer.updateSeriesData(series2, dataItemAt(4000 as UTCTimestamp));
+		const updateResult2 = dataLayer.updateSeriesData(series2, dataItemAt(4000 as UTCTimestamp), false);
 		expect(updateResult2.timeScale.baseIndex).to.be.equal(2 as TimePointIndex);
 		expect(updateResult2.timeScale.points).to.be.equal(undefined);
 		expect(updateResult2.timeScale.firstChangedPointIndex).to.be.equal(undefined);
@@ -283,6 +287,108 @@ describe('DataLayer', () => {
 		});
 	});
 
+	it('should be able to change an historical point', () => {
+		const dataLayer = new DataLayer<Time>(behavior);
+
+		// actually we don't need to use Series, so we just use new Object()
+		const series1 = createSeriesMock();
+		const series2 = createSeriesMock();
+
+		dataLayer.setSeriesData(
+			series1,
+			[
+				dataItemAt(1000 as UTCTimestamp),
+				dataItemAt(3000 as UTCTimestamp),
+				dataItemAt(4000 as UTCTimestamp),
+				dataItemAt(6000 as UTCTimestamp),
+				dataItemAt(8000 as UTCTimestamp),
+			]
+		);
+		dataLayer.setSeriesData(
+			series2,
+			[
+				dataItemAt(2000 as UTCTimestamp),
+				dataItemAt(5000 as UTCTimestamp),
+				dataItemAt(7000 as UTCTimestamp),
+			]
+		);
+
+		// change a point of the first series which is not the last point.
+		const HISTORICAL_UPDATE = true;
+		const updateResult1 = dataLayer.updateSeriesData(series1, changedDataItemAt(3000 as UTCTimestamp), HISTORICAL_UPDATE);
+		expect(updateResult1.timeScale.baseIndex).to.be.equal(7 as TimePointIndex);
+		expect(updateResult1.timeScale.points).to.be.equal(undefined);
+		expect(updateResult1.timeScale.firstChangedPointIndex).to.be.equal(undefined);
+		expect(updateResult1.series.size).to.be.equal(1);
+		updateResult1.series.forEach((updatePacket: SeriesChanges, series: Series<SeriesType>) => {
+			expect(series).to.be.equal(series1);
+			expect(updatePacket.data).excludingEvery(['value', 'originalTime']).to.have.deep.members([
+				{ index: 0, time: { timestamp: 1000 } },
+				{ index: 2, time: { timestamp: 3000 } },
+				{ index: 3, time: { timestamp: 4000 } },
+				{ index: 5, time: { timestamp: 6000 } },
+				{ index: 7, time: { timestamp: 8000 } },
+			]);
+			expect(updatePacket.data[0].value[PlotRowValueIndex.Close]).to.be.equal(0);
+			expect(updatePacket.data[1].value[PlotRowValueIndex.Close]).to.be.equal(1);
+			expect(updatePacket.data[2].value[PlotRowValueIndex.Close]).to.be.equal(0);
+		});
+		const updateResult2 = dataLayer.updateSeriesData(series1, changedDataItemAt(6000 as UTCTimestamp), HISTORICAL_UPDATE);
+		expect(updateResult2.timeScale.baseIndex).to.be.equal(7 as TimePointIndex);
+		expect(updateResult2.timeScale.points).to.be.equal(undefined);
+		expect(updateResult2.timeScale.firstChangedPointIndex).to.be.equal(undefined);
+		expect(updateResult2.series.size).to.be.equal(1);
+		updateResult2.series.forEach((updatePacket: SeriesChanges, series: Series<SeriesType>) => {
+			expect(series).to.be.equal(series1);
+			expect(updatePacket.data).excludingEvery(['value', 'originalTime']).to.have.deep.members([
+				{ index: 0, time: { timestamp: 1000 } },
+				{ index: 2, time: { timestamp: 3000 } },
+				{ index: 3, time: { timestamp: 4000 } },
+				{ index: 5, time: { timestamp: 6000 } },
+				{ index: 7, time: { timestamp: 8000 } },
+			]);
+			expect(updatePacket.data[2].value[PlotRowValueIndex.Close]).to.be.equal(0);
+			expect(updatePacket.data[3].value[PlotRowValueIndex.Close]).to.be.equal(1);
+			expect(updatePacket.data[4].value[PlotRowValueIndex.Close]).to.be.equal(0);
+		});
+
+		const updateResult3 = dataLayer.updateSeriesData(series1, changedDataItemAt(4000 as UTCTimestamp), HISTORICAL_UPDATE);
+		expect(updateResult3.timeScale.baseIndex).to.be.equal(7 as TimePointIndex);
+		expect(updateResult3.timeScale.points).to.be.equal(undefined);
+		expect(updateResult3.timeScale.firstChangedPointIndex).to.be.equal(undefined);
+		expect(updateResult3.series.size).to.be.equal(1);
+		updateResult3.series.forEach((updatePacket: SeriesChanges, series: Series<SeriesType>) => {
+			expect(series).to.be.equal(series1);
+			expect(updatePacket.data).excludingEvery(['value', 'originalTime']).to.have.deep.members([
+				{ index: 0, time: { timestamp: 1000 } },
+				{ index: 2, time: { timestamp: 3000 } },
+				{ index: 3, time: { timestamp: 4000 } },
+				{ index: 5, time: { timestamp: 6000 } },
+				{ index: 7, time: { timestamp: 8000 } },
+			]);
+			expect(updatePacket.data[2].value[PlotRowValueIndex.Close]).to.be.equal(1);
+			expect(updatePacket.data[3].value[PlotRowValueIndex.Close]).to.be.equal(1);
+			expect(updatePacket.data[4].value[PlotRowValueIndex.Close]).to.be.equal(0);
+		});
+
+		const updateResult4 = dataLayer.updateSeriesData(series1, changedDataItemAt(8000 as UTCTimestamp), HISTORICAL_UPDATE);
+		expect(updateResult4.timeScale.baseIndex).to.be.equal(7 as TimePointIndex);
+		expect(updateResult4.timeScale.points).to.be.equal(undefined);
+		expect(updateResult4.timeScale.firstChangedPointIndex).to.be.equal(undefined);
+		expect(updateResult4.series.size).to.be.equal(1);
+		updateResult4.series.forEach((updatePacket: SeriesChanges, series: Series<SeriesType>) => {
+			expect(series).to.be.equal(series1);
+			expect(updatePacket.data).excludingEvery(['value', 'originalTime']).to.have.deep.members([
+				{ index: 0, time: { timestamp: 1000 } },
+				{ index: 2, time: { timestamp: 3000 } },
+				{ index: 3, time: { timestamp: 4000 } },
+				{ index: 5, time: { timestamp: 6000 } },
+				{ index: 7, time: { timestamp: 8000 } },
+			]);
+			expect(updatePacket.data[4].value[PlotRowValueIndex.Close]).to.be.equal(1);
+		});
+	});
+
 	it('should be able to add new point in the middle', () => {
 		const dataLayer = new DataLayer<Time>(behavior);
 
@@ -294,7 +400,7 @@ describe('DataLayer', () => {
 		dataLayer.setSeriesData(series2, [dataItemAt(2000 as UTCTimestamp), dataItemAt(3000 as UTCTimestamp)]);
 
 		// add a new point in the end of one series but not in the end of all points
-		const updateResult = dataLayer.updateSeriesData(series2, dataItemAt(4000 as UTCTimestamp));
+		const updateResult = dataLayer.updateSeriesData(series2, dataItemAt(4000 as UTCTimestamp), false);
 		expect(updateResult.timeScale.baseIndex).to.be.equal(4 as TimePointIndex);
 		expect(updateResult.timeScale.points).excludingEvery('pointData').to.have.deep.members([
 			{ time: { timestamp: 2000 }, timeWeight: 22, originalTime: 2000 },
@@ -382,7 +488,7 @@ describe('DataLayer', () => {
 		const dataLayer = new DataLayer<Time>(behavior);
 		const series = createSeriesMock();
 		dataLayer.setSeriesData(series, [dataItemAt({ day: 1, month: 10, year: 2019 })]);
-		expect(() => dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp)))
+		expect(() => dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp), false))
 			.to.throw();
 	});
 
@@ -697,7 +803,7 @@ describe('DataLayer', () => {
 			]);
 
 			// change the last point of the first series
-			const updateResult = dataLayer.updateSeriesData(series1, dataItemAt(4000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series1, dataItemAt(4000 as UTCTimestamp), false);
 			updateResult.series.forEach((seriesUpdate: SeriesChanges, series: Series<SeriesType>) => {
 				expect(seriesUpdate.data.length).to.be.equal(2);
 
@@ -725,7 +831,7 @@ describe('DataLayer', () => {
 				},
 			]);
 
-			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp), false);
 
 			expect(updateResult.timeScale.baseIndex).to.be.equal(1 as TimePointIndex);
 			expect(updateResult.timeScale.points).to.be.equal(undefined);
@@ -744,7 +850,7 @@ describe('DataLayer', () => {
 			expect((seriesUpdate.data[1].time as unknown as TimePoint).timestamp).to.be.equal(4000 as UTCTimestamp);
 
 			// Update the last item from whitespace back to a normal data item (without customValue)
-			const updateResultTwo = dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp));
+			const updateResultTwo = dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp), false);
 			updateResultTwo.series.forEach((seriesUpdateTwo: SeriesChanges, updatedSeries: Series<SeriesType>) => {
 				expect(seriesUpdateTwo.data.length).to.be.equal(3);
 
@@ -802,7 +908,7 @@ describe('DataLayer', () => {
 				dataItemAt(4000 as UTCTimestamp),
 			]);
 
-			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp), false);
 
 			expect(updateResult.timeScale.baseIndex).to.be.equal(1 as TimePointIndex);
 			expect(updateResult.timeScale.points).excludingEvery('pointData').to.have.deep.members([
@@ -836,7 +942,7 @@ describe('DataLayer', () => {
 				whitespaceItemAt(5000 as UTCTimestamp),
 			]);
 
-			const updateResult = dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series, dataItemAt(5000 as UTCTimestamp), false);
 
 			expect(updateResult.timeScale.baseIndex).to.be.equal(2 as TimePointIndex);
 			expect(updateResult.timeScale.points).to.be.equal(undefined);
@@ -865,7 +971,7 @@ describe('DataLayer', () => {
 				dataItemAt(5000 as UTCTimestamp),
 			]);
 
-			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp), false);
 
 			expect(updateResult.timeScale.baseIndex).to.be.equal(1 as TimePointIndex);
 			expect(updateResult.timeScale.points).to.be.equal(undefined);
@@ -900,7 +1006,7 @@ describe('DataLayer', () => {
 				dataItemAt(3000 as UTCTimestamp),
 			]);
 
-			const updateResult = dataLayer.updateSeriesData(series2, whitespaceItemAt(4000 as UTCTimestamp));
+			const updateResult = dataLayer.updateSeriesData(series2, whitespaceItemAt(4000 as UTCTimestamp), false);
 
 			expect(updateResult.timeScale.baseIndex).to.be.equal(4 as TimePointIndex);
 			expect(updateResult.timeScale.points).excludingEvery('pointData').to.have.deep.members([

From a346d3d5ca673f482b5033deddf3f5ff5f62a423 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 31 Jul 2024 15:38:08 +0100
Subject: [PATCH 02/17] add ignoreWhitespaceIndices option to time scale

---
 .../options/time-scale-options-defaults.ts    |  1 +
 src/model/chart-model.ts                      |  5 +-
 src/model/plot-list.ts                        |  8 +-
 src/model/series.ts                           |  6 ++
 src/model/tick-marks.ts                       | 31 +++++--
 src/model/time-scale.ts                       | 91 ++++++++++++++++++-
 .../time-scale/ignore-whitespace-indices.js   | 37 ++++++++
 tests/unittests/plot-list.spec.ts             | 20 ++++
 8 files changed, 187 insertions(+), 12 deletions(-)
 create mode 100644 tests/e2e/graphics/test-cases/time-scale/ignore-whitespace-indices.js

diff --git a/src/api/options/time-scale-options-defaults.ts b/src/api/options/time-scale-options-defaults.ts
index d28982915e..f7bdb2c903 100644
--- a/src/api/options/time-scale-options-defaults.ts
+++ b/src/api/options/time-scale-options-defaults.ts
@@ -19,4 +19,5 @@ export const timeScaleOptionsDefaults: HorzScaleOptions = {
 	uniformDistribution: false,
 	minimumHeight: 0,
 	allowBoldLabels: true,
+	ignoreWhitespaceIndices: false,
 };
diff --git a/src/model/chart-model.ts b/src/model/chart-model.ts
index fb2d7d562d..6809330787 100644
--- a/src/model/chart-model.ts
+++ b/src/model/chart-model.ts
@@ -781,7 +781,7 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 	public setAndSaveCurrentPosition(x: Coordinate, y: Coordinate, event: TouchMouseEventData | null, pane: Pane, skipEvent?: boolean): void {
 		this._crosshair.saveOriginCoord(x, y);
 		let price = NaN;
-		let index = this._timeScale.coordinateToIndex(x);
+		let index = this._timeScale.coordinateToIndex(x, true);
 
 		const visibleBars = this._timeScale.visibleStrictRange();
 		if (visibleBars !== null) {
@@ -933,6 +933,9 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 		if (series.destroy) {
 			series.destroy();
 		}
+
+		this._timeScale.recalculateIndicesWithData();
+
 		this._cleanupIfPaneIsEmpty(paneImpl);
 	}
 
diff --git a/src/model/plot-list.ts b/src/model/plot-list.ts
index 65145de1ac..67a8797712 100644
--- a/src/model/plot-list.ts
+++ b/src/model/plot-list.ts
@@ -41,6 +41,7 @@ export class PlotList<PlotRowType extends PlotRow = PlotRow> {
 	private _items: readonly PlotRowType[] = [];
 	private _minMaxCache: Map<PlotRowValueIndex, Map<number, MinMax | null>> = new Map();
 	private _rowSearchCache: Map<TimePointIndex, Map<MismatchDirection, PlotRowType>> = new Map();
+	private _indices: readonly TimePointIndex[] = [];
 
 	// @returns Last row
 	public last(): PlotRowType | null {
@@ -108,8 +109,13 @@ export class PlotList<PlotRowType extends PlotRow = PlotRow> {
 	public setData(plotRows: readonly PlotRowType[]): void {
 		this._rowSearchCache.clear();
 		this._minMaxCache.clear();
-
 		this._items = plotRows;
+		this._indices = plotRows.map((plotRow: PlotRowType) => plotRow.index);
+	}
+
+	// TimePointIndex values for fulfilled data points
+	public indices(): readonly TimePointIndex[] {
+		return this._indices;
 	}
 
 	private _indexAt(offset: PlotRowIndex): TimePointIndex {
diff --git a/src/model/series.ts b/src/model/series.ts
index 9367daa124..0523fccdd3 100644
--- a/src/model/series.ts
+++ b/src/model/series.ts
@@ -142,6 +142,7 @@ export interface ISeries<T extends SeriesType> extends IPriceDataSource {
 	barColorer(): ISeriesBarColorer<T>;
 	markerDataAtIndex(index: TimePointIndex): MarkerData | null;
 	dataAt(time: TimePointIndex): SeriesDataAtTypeMap[SeriesType] | null;
+	fulfilledIndices(): readonly TimePointIndex[];
 }
 
 export class Series<T extends SeriesType> extends PriceDataSource implements IDestroyable, ISeries<SeriesType> {
@@ -294,6 +295,7 @@ export class Series<T extends SeriesType> extends PriceDataSource implements IDe
 		this._data.setData(data);
 
 		this._recalculateMarkers();
+		this.model().timeScale().recalculateIndicesWithData();
 
 		this._paneView.update('data');
 		this._markersPaneView.update('data');
@@ -583,6 +585,10 @@ export class Series<T extends SeriesType> extends PriceDataSource implements IDe
 		};
 	}
 
+	public fulfilledIndices(): readonly TimePointIndex[] {
+		return this._data.indices();
+	}
+
 	private _isOverlay(): boolean {
 		const priceScale = this.priceScale();
 		return !isDefaultPriceScale(priceScale.id());
diff --git a/src/model/tick-marks.ts b/src/model/tick-marks.ts
index 5cf1417170..6859dc1aa3 100644
--- a/src/model/tick-marks.ts
+++ b/src/model/tick-marks.ts
@@ -20,6 +20,8 @@ export interface TickMark {
 
 interface MarksCache {
 	maxIndexesPerMark: number;
+	indicesWithDataId: number;
+	checkIndicesForData: boolean;
 	marks: readonly TickMark[];
 }
 
@@ -55,11 +57,18 @@ export class TickMarks<HorzScaleItem> {
 		}
 	}
 
-	public build(spacing: number, maxWidth: number): readonly TickMark[] {
+	public build(spacing: number, maxWidth: number, checkIndicesForData: boolean, indicesWithDataMap: Map<TimePointIndex, boolean>, indicesWithDataId: number): readonly TickMark[] {
 		const maxIndexesPerMark = Math.ceil(maxWidth / spacing);
-		if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark) {
+		if (
+			this._cache === null ||
+			this._cache.maxIndexesPerMark !== maxIndexesPerMark ||
+			indicesWithDataId !== this._cache.indicesWithDataId ||
+			checkIndicesForData !== this._cache.checkIndicesForData
+		) {
 			this._cache = {
-				marks: this._buildMarksImpl(maxIndexesPerMark),
+				indicesWithDataId,
+				checkIndicesForData,
+				marks: this._buildMarksImpl(maxIndexesPerMark, checkIndicesForData, indicesWithDataMap),
 				maxIndexesPerMark,
 			};
 		}
@@ -91,9 +100,11 @@ export class TickMarks<HorzScaleItem> {
 		}
 	}
 
-	private _buildMarksImpl(maxIndexesPerMark: number): readonly TickMark[] {
+	private _buildMarksImpl(maxIndexesPerMark: number, checkIndicesForData: boolean, indicesWithDataMap: Map<TimePointIndex, boolean>): readonly TickMark[] {
 		let marks: TickMark[] = [];
 
+		const canBeIncluded = (mark: TickMark): boolean => !checkIndicesForData || indicesWithDataMap.has(mark.index);
+
 		for (const weight of Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a)) {
 			if (!this._marksByWeight.get(weight)) {
 				continue;
@@ -119,7 +130,7 @@ export class TickMarks<HorzScaleItem> {
 				while (prevMarksPointer < prevMarksLength) {
 					const lastMark = prevMarks[prevMarksPointer];
 					const lastIndex = lastMark.index;
-					if (lastIndex < currentIndex) {
+					if (lastIndex < currentIndex && canBeIncluded(lastMark)) {
 						prevMarksPointer++;
 						marks.push(lastMark);
 						leftIndex = lastIndex;
@@ -130,7 +141,11 @@ export class TickMarks<HorzScaleItem> {
 					}
 				}
 
-				if (rightIndex - currentIndex >= maxIndexesPerMark && currentIndex - leftIndex >= maxIndexesPerMark) {
+				if (
+					rightIndex - currentIndex >= maxIndexesPerMark &&
+					currentIndex - leftIndex >= maxIndexesPerMark &&
+					canBeIncluded(mark)
+				) {
 					// TickMark fits. Place it into new array
 					marks.push(mark);
 					leftIndex = currentIndex;
@@ -143,7 +158,9 @@ export class TickMarks<HorzScaleItem> {
 
 			// Place all unused tickMarks into new array;
 			for (; prevMarksPointer < prevMarksLength; prevMarksPointer++) {
-				marks.push(prevMarks[prevMarksPointer]);
+				if (canBeIncluded(prevMarks[prevMarksPointer])) {
+					marks.push(prevMarks[prevMarksPointer]);
+				}
 			}
 		}
 
diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts
index a02d237dbd..75d103b496 100644
--- a/src/model/time-scale.ts
+++ b/src/model/time-scale.ts
@@ -202,6 +202,14 @@ export interface HorzScaleOptions {
 	 * @defaultValue true
 	 */
 	allowBoldLabels: boolean;
+
+	/**
+	 * Ignore time scale points containing only whitespace (for all series) when
+	 * drawing grid lines, tick marks, and snapping the crosshair to time scale points.
+	 *
+	 * @defaultValue false
+	 */
+	ignoreWhitespaceIndices: boolean;
 }
 
 export interface ITimeScale {
@@ -223,6 +231,8 @@ export interface ITimeScale {
 	coordinateToIndex(x: Coordinate): TimePointIndex;
 
 	options(): Readonly<HorzScaleOptions>;
+
+	recalculateIndicesWithData(): void;
 }
 
 export class TimeScale<HorzScaleItem> implements ITimeScale {
@@ -250,6 +260,9 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 	private _commonTransitionStartState: TransitionState | null = null;
 	private _timeMarksCache: TimeMark[] | null = null;
 
+	private _indicesWithData: Map<TimePointIndex, boolean> = new Map();
+	private _indicesWithDataUpdateId: number = -1;
+
 	private _labels: TimeMark[] = [];
 
 	private readonly _horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>;
@@ -266,6 +279,7 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		this._updateDateTimeFormatter();
 
 		this._tickMarks.setUniformDistribution(options.uniformDistribution);
+		this.recalculateIndicesWithData();
 	}
 
 	public options(): Readonly<HorzScaleOptions> {
@@ -306,6 +320,10 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 			this._model.setBarSpacing(options.barSpacing ?? this._barSpacing);
 		}
 
+		if (options.ignoreWhitespaceIndices !== undefined && options.ignoreWhitespaceIndices !== this._options.ignoreWhitespaceIndices) {
+			this.recalculateIndicesWithData();
+		}
+
 		this._invalidateTickMarks();
 		this._updateDateTimeFormatter();
 		this._optionsApplied.fire();
@@ -464,8 +482,16 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		}
 	}
 
-	public coordinateToIndex(x: Coordinate): TimePointIndex {
-		return Math.ceil(this._coordinateToFloatIndex(x)) as TimePointIndex;
+	public coordinateToIndex(x: Coordinate, considerIgnoreWhitespace?: boolean): TimePointIndex {
+		const index = Math.ceil(this._coordinateToFloatIndex(x)) as TimePointIndex;
+		if (
+			!considerIgnoreWhitespace ||
+			!this._options.ignoreWhitespaceIndices ||
+			this._shouldConsiderIndex(index)
+		) {
+			return index;
+		}
+		return this._findNearestIndexWithData(index);
 	}
 
 	public setRightOffset(offset: number): void {
@@ -517,7 +543,13 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		const firstBar = Math.max(visibleBars.left(), visibleBars.left() - indexPerLabel);
 		const lastBar = Math.max(visibleBars.right(), visibleBars.right() - indexPerLabel);
 
-		const items = this._tickMarks.build(spacing, maxLabelWidth);
+		const items = this._tickMarks.build(
+			spacing,
+			maxLabelWidth,
+			this._options.ignoreWhitespaceIndices,
+			this._indicesWithData,
+			this._indicesWithDataUpdateId
+		);
 
 		// according to indexPerLabel value this value means "earliest index which _might be_ used as the second label on time scale"
 		const earliestIndexOfSecondLabel = (this._firstIndex() as number) + indexPerLabel;
@@ -775,6 +807,20 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		return this._horzScaleBehavior.formatHorzItem(timeScalePoint.time);
 	}
 
+	public recalculateIndicesWithData(): void {
+		if (!this._options.ignoreWhitespaceIndices) {
+			return;
+		}
+		this._indicesWithData.clear();
+		const series = this._model.serieses();
+		for (const s of series) {
+			for (const index of s.fulfilledIndices()) {
+				this._indicesWithData.set(index, true);
+			}
+		}
+		this._indicesWithDataUpdateId++;
+	}
+
 	private _isAllScalingAndScrollingDisabled(): boolean {
 		const handleScroll = this._model.options()['handleScroll'];
 		const handleScale = this._model.options()['handleScale'];
@@ -996,4 +1042,43 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 
 		this._correctBarSpacing();
 	}
+
+	private _shouldConsiderIndex(index: TimePointIndex): boolean {
+		if (!this._options.ignoreWhitespaceIndices) {
+			return true;
+		}
+		return this._indicesWithData.get(index) || false;
+	}
+
+	private _findNearestIndexWithData(x: TimePointIndex): TimePointIndex {
+		const gen = testNearestIntegers(x);
+		const maxIndex = this._lastIndex();
+		while (maxIndex) {
+			const index = gen.next().value as TimePointIndex;
+			if (this._indicesWithData.get(index)) {
+				return index;
+			}
+			if (index < 0 || index > maxIndex) {
+				break;
+			}
+		}
+		return x; // fallback to original index
+	}
+}
+
+function* testNearestIntegers(num: number): Generator<number, number, unknown> {
+	const rounded = Math.round(num);
+	const isRoundedDown = rounded < num;
+	let offset = 1;
+
+	while (true) {
+		if (isRoundedDown) {
+			yield rounded + offset;
+			yield rounded - offset;
+		} else {
+			yield rounded - offset;
+			yield rounded + offset;
+		}
+		offset++;
+	}
 }
diff --git a/tests/e2e/graphics/test-cases/time-scale/ignore-whitespace-indices.js b/tests/e2e/graphics/test-cases/time-scale/ignore-whitespace-indices.js
new file mode 100644
index 0000000000..16bb99f786
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/time-scale/ignore-whitespace-indices.js
@@ -0,0 +1,37 @@
+function generateWhiteSpaceData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 100; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container, {
+		layout: {
+			attributionLogo: true,
+		},
+		timeScale: {
+			/**
+			 * Expecting that only the grid lines for the three points are drawn.
+			 */
+			ignoreWhitespaceIndices: true,
+		},
+	}));
+
+	const mainSeries = chart.addLineSeries();
+
+	const data = generateWhiteSpaceData();
+	data[0].value = 50;
+	data[49].value = 70;
+	data[99].value = 50;
+
+	mainSeries.setData(data);
+	chart.timeScale().fitContent();
+}
diff --git a/tests/unittests/plot-list.spec.ts b/tests/unittests/plot-list.spec.ts
index 42bb5d352f..c1e47e6843 100644
--- a/tests/unittests/plot-list.spec.ts
+++ b/tests/unittests/plot-list.spec.ts
@@ -186,4 +186,24 @@ describe('PlotList', () => {
 			expect(ensureNotNull(minMaxNonCached).max).to.be.equal(26);
 		});
 	});
+
+	describe('indices', () => {
+		it('should return indices for fulfilled data', () => {
+			const p1 = new PlotList();
+			p1.setData([
+				plotRow(-5 as TimePointIndex, timePoint(1), [1, 2, 3, 4]),
+				plotRow(0 as TimePointIndex, timePoint(2), [10, 20, 30, 40]),
+				plotRow(5 as TimePointIndex, timePoint(3), [100, 200, 300, 400]),
+			]);
+			expect(p1.indices().length).to.be.equal(3);
+			expect(p1.indices()).to.deep.equal([-5, 0, 5]);
+			p1.setData([
+				plotRow(-2 as TimePointIndex, timePoint(4), [1, 2, 3, 4]),
+				plotRow(0 as TimePointIndex, timePoint(5), [10, 20, 30, 40]),
+				plotRow(2 as TimePointIndex, timePoint(6), [100, 200, 300, 400]),
+			]);
+			expect(p1.indices().length).to.be.equal(3);
+			expect(p1.indices()).to.deep.equal([-2, 0, 2]);
+		});
+	});
 });

From 8689e911d5599250c1cb74920bd0811aac266af4 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:23:54 +0100
Subject: [PATCH 03/17] add yield chart type

---
 .size-limit.js                                |   8 +
 src/api/chart-api.ts                          |   3 +-
 src/api/create-chart.ts                       |  19 +-
 src/api/create-yield-curve-chart.ts           |  31 +++
 src/api/iyield-chart-api.ts                   |   6 +
 .../yield-curve-chart-options-defaults.ts     |   7 +
 src/api/yield-chart-api.ts                    | 127 +++++++++++++
 src/index.ts                                  |   1 +
 src/model/price-scale.ts                      |   3 +-
 src/model/time-scale.ts                       |   2 +
 .../yield-curve-chart-options.ts              |  47 +++++
 .../yield-curve-horz-scale-behavior.ts        | 177 ++++++++++++++++++
 12 files changed, 420 insertions(+), 11 deletions(-)
 create mode 100644 src/api/create-yield-curve-chart.ts
 create mode 100644 src/api/iyield-chart-api.ts
 create mode 100644 src/api/options/yield-curve-chart-options-defaults.ts
 create mode 100644 src/api/yield-chart-api.ts
 create mode 100644 src/model/yield-curve-horz-scale-behavior/yield-curve-chart-options.ts
 create mode 100644 src/model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior.ts

diff --git a/.size-limit.js b/.size-limit.js
index 7e4e3f3c4a..c420bfa195 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -29,6 +29,14 @@ export default [
 		ignore: ['fancy-canvas'],
 		brotli: true,
 	},
+	{
+		name: 'ESM createYieldCurveChart',
+		path: 'dist/lightweight-charts.production.mjs',
+		limit: '45.00 KB',
+		import: '{ createYieldCurveChart }',
+		ignore: ['fancy-canvas'],
+		brotli: true,
+	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
diff --git a/src/api/chart-api.ts b/src/api/chart-api.ts
index 3d19706232..a0a1d25602 100644
--- a/src/api/chart-api.ts
+++ b/src/api/chart-api.ts
@@ -117,6 +117,8 @@ function toInternalOptions<HorzScaleItem>(options: DeepPartial<ChartOptionsImpl<
 export type IPriceScaleApiProvider<HorzScaleItem> = Pick<IChartApiBase<HorzScaleItem>, 'priceScale'>;
 
 export class ChartApi<HorzScaleItem> implements IChartApiBase<HorzScaleItem>, DataUpdatesConsumer<SeriesType, HorzScaleItem> {
+	protected readonly _horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>;
+
 	private _chartWidget: ChartWidget<HorzScaleItem>;
 	private _dataLayer: DataLayer<HorzScaleItem>;
 	private readonly _seriesMap: Map<SeriesApi<SeriesType, HorzScaleItem>, Series<SeriesType>> = new Map();
@@ -128,7 +130,6 @@ export class ChartApi<HorzScaleItem> implements IChartApiBase<HorzScaleItem>, Da
 
 	private readonly _timeScaleApi: TimeScaleApi<HorzScaleItem>;
 	private readonly _panes: WeakMap<Pane, PaneApi<HorzScaleItem>> = new WeakMap();
-	private readonly _horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>;
 
 	public constructor(container: HTMLElement, horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>, options?: DeepPartial<ChartOptionsImpl<HorzScaleItem>>) {
 		this._dataLayer = new DataLayer<HorzScaleItem>(horzScaleBehavior);
diff --git a/src/api/create-chart.ts b/src/api/create-chart.ts
index d8ccf37d49..b1080a9fe4 100644
--- a/src/api/create-chart.ts
+++ b/src/api/create-chart.ts
@@ -9,6 +9,15 @@ import { IHorzScaleBehavior } from '../model/ihorz-scale-behavior';
 import { ChartApi } from './chart-api';
 import { IChartApiBase } from './ichart-api';
 
+export function fetchHtmlElement(container: string | HTMLElement): HTMLElement {
+	if (isString(container)) {
+		const element = document.getElementById(container);
+		assert(element !== null, `Cannot find element in DOM with id=${container}`);
+		return element;
+	}
+	return container;
+}
+
 /**
  * This function is the main entry point of the Lightweight Charting Library. If you are using time values
  * for the horizontal scale then it is recommended that you rather use the {@link createChart} function.
@@ -26,15 +35,7 @@ export function createChartEx<HorzScaleItem, THorzScaleBehavior extends IHorzSca
 	horzScaleBehavior: THorzScaleBehavior,
 	options?: DeepPartial<ReturnType<THorzScaleBehavior['options']>>
 ): IChartApiBase<HorzScaleItem> {
-	let htmlElement: HTMLElement;
-	if (isString(container)) {
-		const element = document.getElementById(container);
-		assert(element !== null, `Cannot find element in DOM with id=${container}`);
-		htmlElement = element;
-	} else {
-		htmlElement = container;
-	}
-
+	const htmlElement = fetchHtmlElement(container);
 	const res = new ChartApi<HorzScaleItem>(htmlElement, horzScaleBehavior, options);
 	horzScaleBehavior.setOptions(res.options());
 	return res;
diff --git a/src/api/create-yield-curve-chart.ts b/src/api/create-yield-curve-chart.ts
new file mode 100644
index 0000000000..79cfad3f64
--- /dev/null
+++ b/src/api/create-yield-curve-chart.ts
@@ -0,0 +1,31 @@
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+import {
+	YieldCurveChartOptions,
+} from '../model/yield-curve-horz-scale-behavior/yield-curve-chart-options';
+
+import { fetchHtmlElement } from './create-chart';
+import { IYieldCurveChartApi } from './iyield-chart-api';
+import { YieldChartApi } from './yield-chart-api';
+
+/**
+ * Creates a yield curve chart with the specified options.
+ *
+ * A yield curve chart differs from the default chart type
+ * in the following ways:
+ * - Horizontal scale is linearly spaced, and defined in monthly
+ * time duration units
+ * - Whitespace is ignored for the crosshair and grid lines
+ *
+ * @param container - ID of HTML element or element itself
+ * @param options - The yield chart options.
+ * @returns An interface to the created chart
+ */
+export function createYieldCurveChart(
+	container: string | HTMLElement,
+	options?: DeepPartial<YieldCurveChartOptions>
+): IYieldCurveChartApi {
+	const htmlElement = fetchHtmlElement(container);
+	const chartApi = new YieldChartApi(htmlElement, options);
+	return chartApi;
+}
diff --git a/src/api/iyield-chart-api.ts b/src/api/iyield-chart-api.ts
new file mode 100644
index 0000000000..e94447e899
--- /dev/null
+++ b/src/api/iyield-chart-api.ts
@@ -0,0 +1,6 @@
+import { IChartApiBase } from './ichart-api';
+
+/**
+ * The main interface of a single yield curve chart.
+ */
+export interface IYieldCurveChartApi extends IChartApiBase<number> {}
diff --git a/src/api/options/yield-curve-chart-options-defaults.ts b/src/api/options/yield-curve-chart-options-defaults.ts
new file mode 100644
index 0000000000..f7023bb014
--- /dev/null
+++ b/src/api/options/yield-curve-chart-options-defaults.ts
@@ -0,0 +1,7 @@
+import { YieldCurveOptions } from '../../model/yield-curve-horz-scale-behavior/yield-curve-chart-options';
+
+export const yieldChartOptionsDefaults: YieldCurveOptions = {
+	baseResolution: 1,
+	minimumTimeRange: 120,
+	startTimeRange: 0,
+};
diff --git a/src/api/yield-chart-api.ts b/src/api/yield-chart-api.ts
new file mode 100644
index 0000000000..b275322653
--- /dev/null
+++ b/src/api/yield-chart-api.ts
@@ -0,0 +1,127 @@
+import { DeepPartial, merge } from '../helpers/strict-type-checks';
+
+import { AreaData, LineData, WhitespaceData } from '../model/data-consumer';
+import {
+	AreaSeriesOptions,
+	AreaStyleOptions,
+	LineSeriesOptions,
+	LineStyleOptions,
+	SeriesOptionsCommon,
+} from '../model/series-options';
+import { YieldCurveChartOptions, YieldCurveOptions } from '../model/yield-curve-horz-scale-behavior/yield-curve-chart-options';
+import { YieldCurveHorzScaleBehavior } from '../model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior';
+
+import { ChartApi } from './chart-api';
+import { ISeriesApi } from './iseries-api';
+import { IYieldCurveChartApi } from './iyield-chart-api';
+import { yieldChartOptionsDefaults } from './options/yield-curve-chart-options-defaults';
+
+interface WhitespaceState {
+	start: number;
+	end: number;
+	resolution: number;
+}
+
+function generateWhitespaceData({
+	start,
+	end,
+	resolution,
+}: WhitespaceState): WhitespaceData<number>[] {
+	return Array.from(
+		{ length: Math.floor((end - start) / resolution) + 1 },
+		// eslint-disable-next-line quote-props
+		(item: unknown, i: number) => ({ 'time': start + i * resolution })
+	);
+}
+
+function buildWhitespaceState(
+	options: YieldCurveOptions,
+	lastIndex: number
+): WhitespaceState {
+	return {
+		start: Math.max(0, options.startTimeRange),
+		end: Math.max(0, options.minimumTimeRange, lastIndex || 0),
+		resolution: Math.max(1, options.baseResolution),
+	};
+}
+
+const generateWhitespaceHash = ({
+	start,
+	end,
+	resolution,
+}: WhitespaceState): string => `${start}~${end}~${resolution}`;
+
+const defaultOptions: DeepPartial<YieldCurveChartOptions> = {
+	yieldCurve: yieldChartOptionsDefaults,
+	// and add sensible default options for yield charts which
+	// are different from the usual defaults.
+	timeScale: {
+		ignoreWhitespaceIndices: true,
+	},
+	leftPriceScale: {
+		visible: true,
+	},
+	rightPriceScale: {
+		visible: false,
+	},
+	localization: {
+		priceFormatter: (value: number): string => {
+			return value.toFixed(3) + '%';
+		},
+	},
+};
+
+const lineStyleDefaultOptionOverrides: DeepPartial<LineStyleOptions & SeriesOptionsCommon & AreaStyleOptions> = {
+	lastValueVisible: false,
+};
+
+export class YieldChartApi extends ChartApi<number> implements IYieldCurveChartApi {
+	public constructor(container: HTMLElement, options?: DeepPartial<YieldCurveChartOptions>) {
+		const fullOptions = merge(
+			defaultOptions,
+			options || {}
+		) as YieldCurveChartOptions;
+		const horzBehaviour = new YieldCurveHorzScaleBehavior();
+		super(container, horzBehaviour, fullOptions);
+		horzBehaviour.setOptions(this.options() as YieldCurveChartOptions);
+		this._initWhitespaceSeries();
+	}
+
+	public override addLineSeries(options?: DeepPartial<LineStyleOptions & SeriesOptionsCommon> | undefined, paneIndex?: number | undefined): ISeriesApi<'Line', number, WhitespaceData<number> | LineData<number>, LineSeriesOptions, DeepPartial<LineStyleOptions & SeriesOptionsCommon>> {
+		const optionOverrides = {
+			...lineStyleDefaultOptionOverrides,
+			...options,
+		};
+		return super.addLineSeries(optionOverrides, paneIndex);
+	}
+
+	public override addAreaSeries(options?: DeepPartial<AreaStyleOptions & SeriesOptionsCommon> | undefined, paneIndex?: number | undefined): ISeriesApi<'Area', number, AreaData<number> | WhitespaceData<number>, AreaSeriesOptions, DeepPartial<AreaStyleOptions & SeriesOptionsCommon>> {
+		const optionOverrides = {
+			...lineStyleDefaultOptionOverrides,
+			...options,
+		};
+		return super.addAreaSeries(optionOverrides, paneIndex);
+	}
+
+	private _initWhitespaceSeries(): void {
+		const horzBehaviour = this._horzScaleBehavior as YieldCurveHorzScaleBehavior;
+		const whiteSpaceSeries = this.addLineSeries();
+
+		let currentWhitespaceHash: string;
+		function updateWhitespace(lastIndex: number): void {
+			const newWhitespaceState = buildWhitespaceState(
+				horzBehaviour.options().yieldCurve,
+				lastIndex
+			);
+			const newWhitespaceHash = generateWhitespaceHash(newWhitespaceState);
+
+			if (newWhitespaceHash !== currentWhitespaceHash) {
+				currentWhitespaceHash = newWhitespaceHash;
+				whiteSpaceSeries.setData(generateWhitespaceData(newWhitespaceState));
+			}
+		}
+
+		updateWhitespace(0);
+		horzBehaviour.whitespaceInvalidated().subscribe(updateWhitespace);
+	}
+}
diff --git a/src/index.ts b/src/index.ts
index a3442c68a1..16db623fff 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ export const customSeriesDefaultOptions: CustomSeriesOptions = {
 };
 
 export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/create-chart';
+export { createYieldCurveChart } from './api/create-yield-curve-chart';
 
 /**
  * Returns the current version as a string. For example `'3.3.0'`.
diff --git a/src/model/price-scale.ts b/src/model/price-scale.ts
index a65380d1c0..d2293e4228 100644
--- a/src/model/price-scale.ts
+++ b/src/model/price-scale.ts
@@ -166,7 +166,8 @@ export interface PriceScaleOptions {
 	/**
 	 * Indicates if this price scale visible. Ignored by overlay price scales.
 	 *
-	 * @defaultValue `true` for the right price scale and `false` for the left
+	 * @defaultValue `true` for the right price scale and `false` for the left.
+	 * For the yield curve chart, the default is for the left scale to be visible.
 	 */
 	visible: boolean;
 
diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts
index 75d103b496..ee88fd1b14 100644
--- a/src/model/time-scale.ts
+++ b/src/model/time-scale.ts
@@ -207,6 +207,8 @@ export interface HorzScaleOptions {
 	 * Ignore time scale points containing only whitespace (for all series) when
 	 * drawing grid lines, tick marks, and snapping the crosshair to time scale points.
 	 *
+	 * For the yield curve chart type it defaults to `true`.
+	 *
 	 * @defaultValue false
 	 */
 	ignoreWhitespaceIndices: boolean;
diff --git a/src/model/yield-curve-horz-scale-behavior/yield-curve-chart-options.ts b/src/model/yield-curve-horz-scale-behavior/yield-curve-chart-options.ts
new file mode 100644
index 0000000000..1c58c38b76
--- /dev/null
+++ b/src/model/yield-curve-horz-scale-behavior/yield-curve-chart-options.ts
@@ -0,0 +1,47 @@
+import { ChartOptionsImpl } from '../chart-model';
+
+/**
+ * Options specific to yield curve charts.
+ */
+export interface YieldCurveOptions {
+	/**
+	 * The smallest time unit for the yield curve, typically representing one month.
+	 * This value determines the granularity of the time scale.
+	 * @defaultValue 1
+	 */
+	baseResolution: number;
+
+	/**
+	 * The minimum time range to be displayed on the chart, in units of baseResolution.
+	 * This ensures that the chart always shows at least this much time range, even if there's less data.
+	 * @defaultValue 120 (10 years)
+	 */
+	minimumTimeRange: number;
+
+	/**
+	 * The starting time value for the chart, in units of baseResolution.
+	 * This determines where the time scale begins.
+	 * @defaultValue 0
+	 */
+	startTimeRange: number;
+
+	/**
+	 * Optional custom formatter for time values on the horizontal axis.
+	 * If not provided, a default formatter will be used.
+	 * @param months - The number of months (or baseResolution units) to format
+	 * @returns A string representation of the time value
+	 */
+	formatTime?: (months: number) => string;
+}
+
+/**
+ * Extended chart options that include yield curve specific options.
+ * This interface combines the standard chart options with yield curve options.
+ */
+export interface YieldCurveChartOptions extends ChartOptionsImpl<number> {
+	/**
+	 * Yield curve specific options.
+	 * This object contains all the settings related to how the yield curve is displayed and behaves.
+	 */
+	yieldCurve: YieldCurveOptions;
+}
diff --git a/src/model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior.ts b/src/model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior.ts
new file mode 100644
index 0000000000..cac86abf44
--- /dev/null
+++ b/src/model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior.ts
@@ -0,0 +1,177 @@
+import { Delegate } from '../../helpers/delegate';
+import { ISubscription } from '../../helpers/isubscription';
+import { Mutable } from '../../helpers/mutable';
+
+import { SeriesDataItemTypeMap } from '../data-consumer';
+import {
+	DataItem,
+	HorzScaleItemConverterToInternalObj,
+	IHorzScaleBehavior,
+	InternalHorzScaleItem,
+	InternalHorzScaleItemKey,
+} from '../ihorz-scale-behavior';
+import { LocalizationOptions } from '../localization-options';
+import { SeriesType } from '../series-options';
+import { TickMark } from '../tick-marks';
+import { TickMarkWeightValue, TimeScalePoint } from '../time-data';
+import { TimeMark } from '../time-scale';
+import { YieldCurveChartOptions } from './yield-curve-chart-options';
+
+type EventHandler = (...args: unknown[]) => void;
+function createDebouncedMicroTaskHandler(callback: EventHandler): EventHandler {
+	let scheduled = false;
+
+	return function(...args: unknown[]): void {
+		if (!scheduled) {
+			scheduled = true;
+
+			queueMicrotask((): void => {
+				callback(...args);
+				scheduled = false;
+			});
+		}
+	};
+}
+
+function markWithGreaterWeight(a: TimeMark, b: TimeMark): TimeMark {
+	return a.weight > b.weight ? a : b;
+}
+
+function toInternalHorzScaleItem(
+	item: number | InternalHorzScaleItem
+): InternalHorzScaleItem {
+	return item as unknown as InternalHorzScaleItem;
+}
+
+function fromInternalHorzScaleItem(
+	item: InternalHorzScaleItem | number
+): number {
+	return item as unknown as number;
+}
+
+export class YieldCurveHorzScaleBehavior implements IHorzScaleBehavior<number> {
+	private _options!: YieldCurveChartOptions;
+	private readonly _pointsChangedDelegate: Delegate<number> = new Delegate();
+	private _invalidateWhitespace: EventHandler = createDebouncedMicroTaskHandler(() => this._pointsChangedDelegate.fire(this._largestIndex));
+	private _largestIndex: number = 0;
+
+	/** Data changes might require that the whitespace be generated again */
+	public whitespaceInvalidated(): ISubscription<number> {
+		return this._pointsChangedDelegate;
+	}
+
+	public destroy(): void {
+		this._pointsChangedDelegate.destroy();
+	}
+
+	public options(): YieldCurveChartOptions {
+		return this._options;
+	}
+
+	public setOptions(options: YieldCurveChartOptions): void {
+		this._options = options;
+	}
+
+	public preprocessData(data: DataItem<number> | DataItem<number>[]): void {
+		// No preprocessing needed for yield curve data
+	}
+
+	public updateFormatter(options: LocalizationOptions<number>): void {
+		if (!this._options) {
+			return;
+		}
+		this._options.localization = options;
+	}
+
+	public createConverterToInternalObj(
+		data: SeriesDataItemTypeMap<number>[SeriesType][]
+	): HorzScaleItemConverterToInternalObj<number> {
+		this._invalidateWhitespace();
+		return (time: number) => {
+			if (time > this._largestIndex) {
+				this._largestIndex = time;
+			}
+			return toInternalHorzScaleItem(time);
+		};
+	}
+
+	public key(
+		internalItem: InternalHorzScaleItem | number
+	): InternalHorzScaleItemKey {
+		return internalItem as unknown as InternalHorzScaleItemKey;
+	}
+
+	public cacheKey(internalItem: InternalHorzScaleItem): number {
+		return fromInternalHorzScaleItem(internalItem);
+	}
+
+	public convertHorzItemToInternal(item: number): InternalHorzScaleItem {
+		return toInternalHorzScaleItem(item);
+	}
+
+	public formatHorzItem(item: InternalHorzScaleItem): string {
+		return this._formatTime(item as unknown as number);
+	}
+
+	public formatTickmark(item: TickMark): string {
+		return this._formatTime(item.time as unknown as number);
+	}
+
+	public maxTickMarkWeight(marks: TimeMark[]): TickMarkWeightValue {
+		return marks.reduce(markWithGreaterWeight, marks[0]).weight;
+	}
+
+	public fillWeightsForPoints(
+		sortedTimePoints: readonly Mutable<TimeScalePoint>[],
+		startIndex: number
+	): void {
+		const timeWeight = (time: number) => {
+			if (time % 120 === 0) {
+				return 10;
+			}
+			if (time % 60 === 0) {
+				return 9;
+			}
+			if (time % 36 === 0) {
+				return 8;
+			}
+			if (time % 12 === 0) {
+				return 7;
+			}
+			if (time % 6 === 0) {
+				return 6;
+			}
+			if (time % 3 === 0) {
+				return 5;
+			}
+			if (time % 1 === 0) {
+				return 4;
+			}
+			return 0;
+		};
+
+		for (let index = startIndex; index < sortedTimePoints.length; ++index) {
+			sortedTimePoints[index].timeWeight = timeWeight(
+				fromInternalHorzScaleItem(sortedTimePoints[index].time)
+			) as TickMarkWeightValue;
+		}
+		this._largestIndex = fromInternalHorzScaleItem(sortedTimePoints[sortedTimePoints.length - 1].time);
+		this._invalidateWhitespace();
+	}
+
+	private _formatTime(months: number): string {
+		if (this._options.localization?.timeFormatter) {
+			return this._options.localization.timeFormatter(months);
+		}
+
+		if (months < 12) {
+			return `${months}M`;
+		}
+		const years = Math.floor(months / 12);
+		const remainingMonths = months % 12;
+		if (remainingMonths === 0) {
+			return `${years}Y`;
+		}
+		return `${years}Y${remainingMonths}M`;
+	}
+}

From 1be5dc8fd2e68194d28dbd5bf231b78bf5bce1a8 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 13:25:37 +0100
Subject: [PATCH 04/17] add up down markers primitive plugin

---
 .size-limit.js                                |  10 +-
 src/api/iseries-primitive-api.ts              |   5 +
 src/api/series-api.ts                         |   1 +
 src/api/yield-chart-api.ts                    |   1 +
 src/index.ts                                  |   2 +
 src/model/series-options.ts                   |   4 +-
 .../expiring-markers-manager.ts               |  88 +++++++
 src/plugins/up-down-markers-plugin/options.ts |  29 +++
 .../up-down-markers-plugin/primitive.ts       | 238 ++++++++++++++++++
 .../up-down-markers-plugin/renderer.ts        |  94 +++++++
 src/plugins/up-down-markers-plugin/types.ts   |  48 ++++
 src/plugins/up-down-markers-plugin/view.ts    |  83 ++++++
 src/tsconfig.composite.json                   |   1 +
 .../coverage/test-cases/chart/yield-curve.js  | 114 +++++++++
 .../test-cases/plugins/up-down-markers.js     |  48 ++++
 .../graphics/test-cases/yield-curve-chart.js  |  62 +++++
 16 files changed, 825 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/up-down-markers-plugin/expiring-markers-manager.ts
 create mode 100644 src/plugins/up-down-markers-plugin/options.ts
 create mode 100644 src/plugins/up-down-markers-plugin/primitive.ts
 create mode 100644 src/plugins/up-down-markers-plugin/renderer.ts
 create mode 100644 src/plugins/up-down-markers-plugin/types.ts
 create mode 100644 src/plugins/up-down-markers-plugin/view.ts
 create mode 100644 tests/e2e/coverage/test-cases/chart/yield-curve.js
 create mode 100644 tests/e2e/graphics/test-cases/plugins/up-down-markers.js
 create mode 100644 tests/e2e/graphics/test-cases/yield-curve-chart.js

diff --git a/.size-limit.js b/.size-limit.js
index c420bfa195..3ee1c34e66 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -8,7 +8,7 @@ export default [
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '45.00 KB',
+		limit: '46.00 KB',
 		import: '*',
 		ignore: ['fancy-canvas'],
 		brotli: true,
@@ -50,4 +50,12 @@ export default [
 		limit: '50.00 KB',
 		brotli: true,
 	},
+	{
+		name: 'Plugin: UpDownMarkersPrimitive',
+		path: 'dist/lightweight-charts.production.mjs',
+		limit: '2.50 KB',
+		import: '{ UpDownMarkersPrimitive }',
+		ignore: ['fancy-canvas'],
+		brotli: true,
+	},
 ];
diff --git a/src/api/iseries-primitive-api.ts b/src/api/iseries-primitive-api.ts
index 98e664f2d2..9953014f99 100644
--- a/src/api/iseries-primitive-api.ts
+++ b/src/api/iseries-primitive-api.ts
@@ -1,4 +1,5 @@
 import { Time } from '../model/horz-scale-behavior-time/types';
+import { IHorzScaleBehavior } from '../model/ihorz-scale-behavior';
 import { ISeriesPrimitiveBase } from '../model/iseries-primitive';
 import { SeriesOptionsMap, SeriesType } from '../model/series-options';
 
@@ -25,6 +26,10 @@ export interface SeriesAttachedParameter<
 	 * Request an update (redraw the chart)
 	 */
 	requestUpdate: () => void;
+	/**
+	 * Horizontal Scale Behaviour for the chart.
+	 */
+	horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>;
 }
 
 /**
diff --git a/src/api/series-api.ts b/src/api/series-api.ts
index f21af462b3..663d0ed7c5 100644
--- a/src/api/series-api.ts
+++ b/src/api/series-api.ts
@@ -239,6 +239,7 @@ export class SeriesApi<
 				chart: this._chartApi,
 				series: this,
 				requestUpdate: () => this._series.model().fullUpdate(),
+				horzScaleBehavior: this._horzScaleBehavior,
 			});
 		}
 	}
diff --git a/src/api/yield-chart-api.ts b/src/api/yield-chart-api.ts
index b275322653..32f18e07fb 100644
--- a/src/api/yield-chart-api.ts
+++ b/src/api/yield-chart-api.ts
@@ -73,6 +73,7 @@ const defaultOptions: DeepPartial<YieldCurveChartOptions> = {
 
 const lineStyleDefaultOptionOverrides: DeepPartial<LineStyleOptions & SeriesOptionsCommon & AreaStyleOptions> = {
 	lastValueVisible: false,
+	priceLineVisible: false,
 };
 
 export class YieldChartApi extends ChartApi<number> implements IYieldCurveChartApi {
diff --git a/src/index.ts b/src/index.ts
index 16db623fff..de949e1e87 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,8 @@ export const customSeriesDefaultOptions: CustomSeriesOptions = {
 export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/create-chart';
 export { createYieldCurveChart } from './api/create-yield-curve-chart';
 
+export { UpDownMarkersPrimitive } from './plugins/up-down-markers-plugin/primitive';
+
 /**
  * Returns the current version as a string. For example `'3.3.0'`.
  */
diff --git a/src/model/series-options.ts b/src/model/series-options.ts
index 2bb0a2b1c6..f8fb39bf5f 100644
--- a/src/model/series-options.ts
+++ b/src/model/series-options.ts
@@ -663,7 +663,7 @@ export interface SeriesOptionsCommon {
 	/**
 	 * Visibility of the label with the latest visible price on the price scale.
 	 *
-	 * @defaultValue `true`
+	 * @defaultValue `true`, `false` for yield curve charts
 	 */
 	lastValueVisible: boolean;
 
@@ -698,7 +698,7 @@ export interface SeriesOptionsCommon {
 	/**
 	 * Show the price line. Price line is a horizontal line indicating the last price of the series.
 	 *
-	 * @defaultValue `true`
+	 * @defaultValue `true`, `false` for yield curve charts
 	 */
 	priceLineVisible: boolean;
 
diff --git a/src/plugins/up-down-markers-plugin/expiring-markers-manager.ts b/src/plugins/up-down-markers-plugin/expiring-markers-manager.ts
new file mode 100644
index 0000000000..ab33c15506
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/expiring-markers-manager.ts
@@ -0,0 +1,88 @@
+import { InternalHorzScaleItemKey } from '../../model/ihorz-scale-behavior';
+
+import { SeriesUpDownMarker } from './types';
+
+type MarkerWithTimeout<HorzScaleItem> = SeriesUpDownMarker<HorzScaleItem> & {
+	timeoutId?: number;
+	expiresAt?: number;
+};
+
+export class ExpiringMarkerManager<HorzScaleItem> {
+	private _markers: Map<InternalHorzScaleItemKey, MarkerWithTimeout<HorzScaleItem>> = new Map();
+	private _updateCallback: (() => void);
+
+	public constructor(updateCallback: () => void) {
+		this._updateCallback = updateCallback;
+	}
+
+	public setMarker(marker: SeriesUpDownMarker<HorzScaleItem>, key: InternalHorzScaleItemKey, timeout?: number): void {
+		this.clearMarker(key);
+
+		if (timeout !== undefined) {
+			const timeoutId = window.setTimeout(
+				() => {
+					this._markers.delete(key);
+					this._triggerUpdate();
+				},
+				timeout
+			);
+
+			const markerWithTimeout: MarkerWithTimeout<HorzScaleItem> = {
+				...marker,
+				timeoutId,
+				expiresAt: Date.now() + timeout,
+			};
+
+			this._markers.set(key, markerWithTimeout);
+		} else {
+			// For markers without timeout, we set timeoutId and expiresAt to undefined
+			this._markers.set(key, {
+				...marker,
+				timeoutId: undefined,
+				expiresAt: undefined,
+			});
+		}
+
+		this._triggerUpdate();
+	}
+
+	public clearMarker(key: InternalHorzScaleItemKey): void {
+		const marker = this._markers.get(key);
+		if (marker && marker.timeoutId !== undefined) {
+			window.clearTimeout(marker.timeoutId);
+		}
+		this._markers.delete(key);
+		this._triggerUpdate();
+	}
+
+	public clearAllMarkers(): void {
+		for (const [point] of this._markers) {
+			this.clearMarker(point);
+		}
+	}
+
+	public getMarkers(): SeriesUpDownMarker<HorzScaleItem>[] {
+		const now = Date.now();
+		const activeMarkers: SeriesUpDownMarker<HorzScaleItem>[] = [];
+
+		for (const [time, marker] of this._markers) {
+			if (!marker.expiresAt || marker.expiresAt > now) {
+				activeMarkers.push({ time: marker.time, sign: marker.sign, value: marker.value });
+			} else {
+				this.clearMarker(time);
+			}
+		}
+
+		return activeMarkers;
+	}
+
+	public setUpdateCallback(callback: () => void): void {
+		this._updateCallback = callback;
+	}
+
+	private _triggerUpdate(): void {
+		if (this._updateCallback) {
+			this._updateCallback();
+		}
+	}
+}
diff --git a/src/plugins/up-down-markers-plugin/options.ts b/src/plugins/up-down-markers-plugin/options.ts
new file mode 100644
index 0000000000..6aa3fc6c89
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/options.ts
@@ -0,0 +1,29 @@
+/**
+ * Configuration options for the UpDownMarkers plugin.
+ */
+export interface UpDownMarkersPluginOptions {
+	/**
+	 * The color used for markers indicating a positive price change.
+	 * This color will be applied to markers shown above data points where the price has increased.
+	 */
+	positiveColor: string;
+
+	/**
+	 * The color used for markers indicating a negative price change.
+	 * This color will be applied to markers shown below data points where the price has decreased.
+	 */
+	negativeColor: string;
+
+	/**
+	 * The duration (in milliseconds) for which update markers remain visible on the chart.
+	 * After this duration, the markers will automatically disappear.
+	 * Set to 0 for markers to remain indefinitely until the next update.
+	 */
+	updateVisibilityDuration: number;
+}
+
+export const upDownMarkersPluginOptionDefaults: UpDownMarkersPluginOptions = {
+	positiveColor: '#22AB94',
+	negativeColor: '#F7525F',
+	updateVisibilityDuration: 5000,
+};
diff --git a/src/plugins/up-down-markers-plugin/primitive.ts b/src/plugins/up-down-markers-plugin/primitive.ts
new file mode 100644
index 0000000000..bdb3281d55
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/primitive.ts
@@ -0,0 +1,238 @@
+import { IChartApiBase } from '../../api/ichart-api';
+import { ISeriesApi } from '../../api/iseries-api';
+import { SeriesAttachedParameter } from '../../api/iseries-primitive-api';
+
+import { ensureDefined } from '../../helpers/assertions';
+
+import { isFulfilledData, isWhitespaceData, LineData, SeriesDataItemTypeMap } from '../../model/data-consumer';
+import { IHorzScaleBehavior, InternalHorzScaleItemKey } from '../../model/ihorz-scale-behavior';
+import { ISeriesPrimitivePaneView } from '../../model/iseries-primitive';
+
+import { ExpiringMarkerManager } from './expiring-markers-manager';
+import {
+	upDownMarkersPluginOptionDefaults,
+	UpDownMarkersPluginOptions,
+} from './options';
+import { SeriesUpDownMarker, SupportedSeriesTypes } from './types';
+import { MarkersPrimitivePaneView } from './view';
+
+function isLineData<T>(
+	item: SeriesDataItemTypeMap<T>[SupportedSeriesTypes],
+	type: SupportedSeriesTypes
+): item is LineData<T> {
+	return type === 'Line' || type === 'Area';
+}
+
+/**
+ * UpDownMarkersPrimitive class for showing the direction of price changes on the chart.
+ * This plugin can only be used with Line and Area series types.
+ * 1. Manual control:
+ *
+ * - Use the `setMarkers` method to manually add markers to the chart.
+ * This will replace any existing markers.
+ * - Use `clearMarkers` to remove all markers.
+ *
+ * 2. Automatic updates:
+ *
+ * Use `setData` and `update` from this primitive instead of the those on the series to let the
+ * primitive handle the creation of price change markers automatically.
+ *
+ * - Use `setData` to initialize or replace all data points.
+ * - Use `update` to modify individual data points. This will automatically
+ * create markers for price changes on existing data points.
+ * - The `updateVisibilityDuration` option controls how long markers remain visible.
+ */
+export class UpDownMarkersPrimitive<
+	HorzScaleItem,
+	TData extends SeriesDataItemTypeMap<HorzScaleItem>[SupportedSeriesTypes] = SeriesDataItemTypeMap<HorzScaleItem>['Line']
+> {
+	private _chart: IChartApiBase<HorzScaleItem> | undefined = undefined;
+	private _series: ISeriesApi<SupportedSeriesTypes, HorzScaleItem> | undefined =
+		undefined;
+	private _paneViews: MarkersPrimitivePaneView<
+		HorzScaleItem,
+		SupportedSeriesTypes
+	>[] = [];
+	private _markersManager: ExpiringMarkerManager<HorzScaleItem>;
+	private _requestUpdate?: () => void;
+	private _horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem> | null = null;
+	private _options: UpDownMarkersPluginOptions;
+	private _managedDataPoints: Map<InternalHorzScaleItemKey, number> = new Map();
+
+	public constructor(
+		options: Partial<UpDownMarkersPluginOptions>
+	) {
+		this._markersManager = new ExpiringMarkerManager(() => this.requestUpdate());
+		this._options = {
+			...upDownMarkersPluginOptionDefaults,
+			...options,
+		};
+	}
+
+	/**
+     * Applies new options to the plugin.
+     * @param options - Partial options to apply.
+     */
+	public applyOptions(options: Partial<UpDownMarkersPluginOptions>): void {
+		this._options = {
+			...this._options,
+			...options,
+		};
+		this.requestUpdate();
+	}
+
+	/**
+     * Manually sets markers on the chart.
+     * @param markers - Array of SeriesUpDownMarker to set.
+     */
+	public setMarkers(markers: SeriesUpDownMarker<HorzScaleItem>[]): void {
+		this._markersManager.clearAllMarkers();
+		const horzBehaviour = this._horzScaleBehavior;
+		if (!horzBehaviour) {
+			return;
+		}
+		markers.forEach((marker: SeriesUpDownMarker<HorzScaleItem>) => {
+			this._markersManager.setMarker(marker, horzBehaviour.key(marker.time));
+		});
+	}
+
+	/**
+     * Retrieves the current markers on the chart.
+     * @returns An array of SeriesUpDownMarker.
+     */
+	public markers(): readonly SeriesUpDownMarker<HorzScaleItem>[] {
+		return this._markersManager.getMarkers();
+	}
+
+	/**
+     * Requests an update of the chart.
+     */
+	public requestUpdate(): void {
+		this._requestUpdate?.();
+	}
+
+	/**
+     * Attaches the primitive to the chart and series.
+     * @param params - Parameters for attaching the primitive.
+     */
+	public attached(params: SeriesAttachedParameter<HorzScaleItem>): void {
+		const {
+			chart,
+			series,
+			requestUpdate,
+			horzScaleBehavior,
+		} = params;
+		this._chart = chart;
+		this._series = series as ISeriesApi<SupportedSeriesTypes, HorzScaleItem>;
+		this._horzScaleBehavior = horzScaleBehavior;
+		const seriesType = this._series.seriesType();
+		if (seriesType !== 'Area' && seriesType !== 'Line') {
+			throw new Error(
+				'UpDownMarkersPrimitive is only supported for Area and Line series types'
+			);
+		}
+		this._paneViews = [
+			new MarkersPrimitivePaneView(
+				this._series,
+				this._chart.timeScale(),
+				this._options
+			),
+		];
+		this._requestUpdate = requestUpdate;
+		this.requestUpdate();
+	}
+
+	/**
+     * Detaches the primitive from the chart and series.
+     */
+	public detached(): void {
+		this._chart = undefined;
+		this._series = undefined;
+		this._requestUpdate = undefined;
+	}
+
+	public chart(): IChartApiBase<HorzScaleItem> {
+		return ensureDefined(this._chart);
+	}
+
+	public series(): ISeriesApi<SupportedSeriesTypes, HorzScaleItem> {
+		return ensureDefined(this._series);
+	}
+
+	public updateAllViews(): void {
+		this._paneViews.forEach(
+			(pw: MarkersPrimitivePaneView<HorzScaleItem, SupportedSeriesTypes>) =>
+				pw.update(this.markers())
+		);
+	}
+
+	public paneViews(): readonly ISeriesPrimitivePaneView[] {
+		return this._paneViews;
+	}
+
+	/**
+     * Sets the data for the series and manages data points for marker updates.
+     * @param data - Array of data points to set.
+     */
+	public setData(data: TData[]): void {
+		if (!this._series) {
+			throw new Error('Primitive not attached to series');
+		}
+		const seriesType = this._series.seriesType();
+		this._managedDataPoints.clear();
+		const horzBehaviour = this._horzScaleBehavior;
+		if (horzBehaviour) {
+			data.forEach((d: TData) => {
+				if (isFulfilledData(d) && isLineData(d, seriesType)) {
+					this._managedDataPoints.set(horzBehaviour.key(d.time), d.value);
+				}
+			});
+		}
+		ensureDefined(this._series).setData(data);
+	}
+
+	/**
+     * Updates a single data point and manages marker updates for existing data points.
+     * @param data - The data point to update.
+     * @param historicalUpdate - Optional flag for historical updates.
+     */
+	public update(data: TData, historicalUpdate?: boolean): void {
+		if (!this._series || !this._horzScaleBehavior) {
+			throw new Error('Primitive not attached to series');
+		}
+		const seriesType = this._series.seriesType();
+		const horzKey = this._horzScaleBehavior.key(data.time);
+		if (isWhitespaceData(data)) {
+			this._managedDataPoints.delete(horzKey);
+		}
+		if (isFulfilledData(data) && isLineData(data, seriesType)) {
+			const existingPrice = this._managedDataPoints.get(horzKey);
+			if (existingPrice) {
+				this._markersManager.setMarker(
+					{
+						time: data.time,
+						value: data.value,
+						sign: getSign(data.value, existingPrice),
+					},
+					horzKey,
+					this._options.updateVisibilityDuration
+				);
+			}
+		}
+		ensureDefined(this._series).update(data, historicalUpdate);
+	}
+
+	/**
+     * Clears all markers from the chart.
+     */
+	public clearMarkers(): void {
+		this._markersManager.clearAllMarkers();
+	}
+}
+
+function getSign(newValue: number, oldValue: number): 1 | 0 | -1 {
+	if (newValue === oldValue) {
+		return 0;
+	}
+	return newValue - oldValue > 0 ? 1 : -1;
+}
diff --git a/src/plugins/up-down-markers-plugin/renderer.ts b/src/plugins/up-down-markers-plugin/renderer.ts
new file mode 100644
index 0000000000..08d780bc3f
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/renderer.ts
@@ -0,0 +1,94 @@
+import {
+	BitmapCoordinatesRenderingScope,
+	CanvasRenderingTarget2D,
+} from 'fancy-canvas';
+
+import { ISeriesPrimitivePaneRenderer } from '../../model/iseries-primitive';
+
+import { MarkerCoordinates } from './types';
+
+const enum Constants {
+	Radius = 4,
+	ArrowSize = 4.7,
+	ArrowOffset = 7,
+	ArrowLineWidth = 2,
+	VerticalScale = 0.5,
+}
+
+export class MarkersPrimitiveRenderer implements ISeriesPrimitivePaneRenderer {
+	private _data: MarkerCoordinates[];
+	private readonly _neutralColor: string;
+	private readonly _negativeColor: string;
+	private readonly _positiveColor: string;
+
+	public constructor(
+		data: MarkerCoordinates[],
+		neutralColor: string,
+		negativeColor: string,
+		positiveColor: string
+	) {
+		this._data = data;
+		this._neutralColor = neutralColor;
+		this._negativeColor = negativeColor;
+		this._positiveColor = positiveColor;
+	}
+
+	public draw(target: CanvasRenderingTarget2D): void {
+		target.useBitmapCoordinateSpace(
+			(scope: BitmapCoordinatesRenderingScope) => {
+				const ctx = scope.context;
+				const tickWidth = Math.max(1, Math.floor(scope.horizontalPixelRatio));
+				const correction = (tickWidth % 2) / 2;
+
+				const rad = Constants.Radius * scope.verticalPixelRatio + correction;
+				this._data.forEach((item: MarkerCoordinates) => {
+					const centreX = Math.round(item.x * scope.horizontalPixelRatio) + correction;
+					ctx.beginPath();
+					const color = this._getColor(item.sign);
+					ctx.fillStyle = color;
+					ctx.arc(
+						centreX,
+						item.y * scope.verticalPixelRatio,
+						rad,
+						0,
+						2 * Math.PI,
+						false
+					);
+					ctx.fill();
+					if (item.sign) {
+						ctx.strokeStyle = color;
+						ctx.lineWidth = Math.floor(
+							Constants.ArrowLineWidth * scope.horizontalPixelRatio
+						);
+						ctx.beginPath();
+						ctx.moveTo(
+							(item.x - Constants.ArrowSize) * scope.horizontalPixelRatio + correction,
+							(item.y - Constants.ArrowOffset * item.sign) *
+								scope.verticalPixelRatio
+						);
+						ctx.lineTo(
+							item.x * scope.horizontalPixelRatio + correction,
+							(item.y -
+								Constants.ArrowOffset * item.sign -
+								Constants.ArrowOffset * item.sign * Constants.VerticalScale) *
+								scope.verticalPixelRatio
+						);
+						ctx.lineTo(
+							(item.x + Constants.ArrowSize) * scope.horizontalPixelRatio + correction,
+							(item.y - Constants.ArrowOffset * item.sign) *
+								scope.verticalPixelRatio
+						);
+						ctx.stroke();
+					}
+				});
+			}
+		);
+	}
+
+	private _getColor(sign: number): string {
+		if (sign === 0) {
+			return this._neutralColor;
+		}
+		return sign > 0 ? this._positiveColor : this._negativeColor;
+	}
+}
diff --git a/src/plugins/up-down-markers-plugin/types.ts b/src/plugins/up-down-markers-plugin/types.ts
new file mode 100644
index 0000000000..09cc91e40f
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/types.ts
@@ -0,0 +1,48 @@
+import { Time } from '../../model/horz-scale-behavior-time/types';
+
+/**
+ * Enumeration representing the sign of a marker.
+ */
+export const enum MarkerSign {
+	/** Represents a negative change (-1) */
+	Negative = -1,
+	/** Represents no change (0) */
+	Neutral,
+	/** Represents a positive change (1) */
+	Positive,
+}
+
+/**
+ * Represents a marker drawn above or below a data point to indicate a price change update.
+ * @template T The type of the time value, defaults to Time.
+ */
+export interface SeriesUpDownMarker<T = Time> {
+	/**
+	 * The point on the horizontal scale.
+	 */
+	time: T;
+
+	/**
+	 * The price value for the data point.
+	 */
+	value: number;
+
+	/**
+	 * The direction of the price change.
+	 */
+	sign: MarkerSign;
+}
+
+/**
+ * Represents the coordinates and sign of a marker on the chart.
+ */
+export interface MarkerCoordinates {
+	x: number;
+	y: number;
+	sign: number;
+}
+
+/**
+ * Defines the supported series types for markers.
+ */
+export type SupportedSeriesTypes = 'Line' | 'Area';
diff --git a/src/plugins/up-down-markers-plugin/view.ts b/src/plugins/up-down-markers-plugin/view.ts
new file mode 100644
index 0000000000..d84ac5ea2a
--- /dev/null
+++ b/src/plugins/up-down-markers-plugin/view.ts
@@ -0,0 +1,83 @@
+import { ISeriesApi } from '../../api/iseries-api';
+import { ITimeScaleApi } from '../../api/itime-scale-api';
+
+import { ensureNotNull } from '../../helpers/assertions';
+import { notNull } from '../../helpers/strict-type-checks';
+
+import { ISeriesPrimitivePaneView } from '../../model/iseries-primitive';
+import {
+	AreaSeriesOptions,
+	LineSeriesOptions,
+	SeriesOptionsMap,
+} from '../../model/series-options';
+
+import { UpDownMarkersPluginOptions } from './options';
+import { MarkersPrimitiveRenderer } from './renderer';
+import {
+	MarkerCoordinates,
+	SeriesUpDownMarker,
+	SupportedSeriesTypes,
+} from './types';
+
+function isAreaStyleOptions(opts: SupportedSeriesOptions, seriesType: SupportedSeriesTypes): opts is AreaSeriesOptions {
+	return seriesType === 'Area';
+}
+
+function getNeutralColor<TSeriesType extends SupportedSeriesTypes>(opts: LineSeriesOptions | AreaSeriesOptions, seriesType: TSeriesType): string {
+	if (isAreaStyleOptions(opts, seriesType)) {
+		return opts.lineColor;
+	}
+	return opts.color;
+}
+
+type SupportedSeriesOptions = SeriesOptionsMap[SupportedSeriesTypes];
+
+export class MarkersPrimitivePaneView<
+	HorzScaleItem,
+	TSeriesType extends SupportedSeriesTypes
+> implements ISeriesPrimitivePaneView {
+	private readonly _series: ISeriesApi<SupportedSeriesTypes, HorzScaleItem>;
+	private readonly _timeScale: ITimeScaleApi<HorzScaleItem>;
+	private readonly _options: UpDownMarkersPluginOptions;
+	private _data: MarkerCoordinates[] = [];
+
+	public constructor(
+		series: ISeriesApi<TSeriesType, HorzScaleItem>,
+		timeScale: ITimeScaleApi<HorzScaleItem>,
+		options: UpDownMarkersPluginOptions
+	) {
+		this._series = series;
+		this._timeScale = timeScale;
+		this._options = options;
+	}
+
+	public update(markers: readonly SeriesUpDownMarker<HorzScaleItem>[]): void {
+		this._data = markers.map((marker: SeriesUpDownMarker<HorzScaleItem>) => {
+			const y = this._series.priceToCoordinate(marker.value);
+			if (y === null) {
+				return null;
+			}
+			const x = ensureNotNull(
+				this._timeScale.timeToCoordinate(marker.time)
+			);
+			return {
+				x,
+				y,
+				sign: marker.sign,
+			};
+		})
+		.filter(notNull);
+	}
+
+	public renderer(): MarkersPrimitiveRenderer {
+		const options = this._series.options();
+		const seriesType = this._series.seriesType();
+		const neutralColor = getNeutralColor(options, seriesType);
+		return new MarkersPrimitiveRenderer(
+			this._data,
+			neutralColor,
+			this._options.negativeColor,
+			this._options.positiveColor
+		);
+	}
+}
diff --git a/src/tsconfig.composite.json b/src/tsconfig.composite.json
index 8ca4c042d1..4906c1a091 100644
--- a/src/tsconfig.composite.json
+++ b/src/tsconfig.composite.json
@@ -8,6 +8,7 @@
 		{ "path": "./tsconfig.model.json" }
 	],
 	"include": [
+		"./plugins/**/*.ts",
 		"./index.ts",
 		"./standalone.ts"
 	]
diff --git a/tests/e2e/coverage/test-cases/chart/yield-curve.js b/tests/e2e/coverage/test-cases/chart/yield-curve.js
new file mode 100644
index 0000000000..90e0935159
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/chart/yield-curve.js
@@ -0,0 +1,114 @@
+const options = {
+	yieldCurve: {
+		baseResolution: 1,
+		minimumTimeRange: 10,
+		startTimeRange: 3,
+	},
+	layout: {
+		attributionLogo: false,
+	},
+};
+
+const curve1 = [
+	{ time: 1, value: 5.378 },
+	{ time: 2, value: 5.372 },
+	{ time: 3, value: 5.271 },
+	{ time: 6, value: 5.094 },
+	{ time: 12, value: 4.739 },
+	{ time: 24, value: 4.237 },
+	{ time: 36, value: 4.036 },
+	{ time: 60, value: 3.887 },
+	{ time: 84, value: 3.921 },
+	{ time: 120, value: 4.007 },
+	{ time: 240, value: 4.366 },
+	{ time: 360, value: 4.29 },
+];
+const curve2 = [
+	{ time: 1, value: 5.381 },
+	{ time: 2, value: 5.393 },
+	{ time: 3, value: 5.425 },
+	{ time: 6, value: 5.494 },
+	{ time: 12, value: 5.377 },
+	{ time: 24, value: 4.883 },
+	{ time: 36, value: 4.554 },
+	{ time: 60, value: 4.241 },
+	{ time: 84, value: 4.172 },
+	{ time: 120, value: 4.084 },
+	{ time: 240, value: 4.365 },
+	{ time: 360, value: 4.176 },
+];
+
+function interactionsToPerform() {
+	return [];
+}
+
+let chart;
+
+async function waitNextFrame() {
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function beforeInteractions(container) {
+	chart = LightweightCharts.createYieldCurveChart(container, options);
+
+	const series1 = chart.addAreaSeries({
+		lineType: 2,
+		color: 'red',
+		pointMarkersVisible: true,
+	});
+	series1.setData(curve1);
+	const series2 = chart.addLineSeries({
+		lineType: 2,
+		color: 'green',
+		pointMarkersVisible: true,
+		lineWidth: 1,
+	});
+	series2.setData(curve2);
+
+	chart.timeScale().fitContent();
+
+	return new Promise(resolve => {
+		requestAnimationFrame(async () => {
+			series1.update(
+				{
+					time: 12,
+					value: 4.8,
+				},
+				true
+			);
+			series2.update({
+				time: 420,
+				value: 4,
+			});
+			await waitNextFrame();
+			series1.update({
+				time: 360,
+			});
+			series2.update({
+				time: 420,
+				value: 4,
+			});
+			await waitNextFrame();
+			series1.update({
+				time: 360,
+			});
+			series2.update({
+				time: 420,
+				value: 4,
+			});
+			await waitNextFrame();
+			series1.setData(curve1.slice(0, 10));
+			await waitNextFrame();
+			series2.setData(curve2.slice(0, 9));
+			await waitNextFrame();
+			resolve();
+		});
+	});
+}
+
+function afterInteractions() {
+	chart.takeScreenshot();
+	return Promise.resolve();
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/up-down-markers.js b/tests/e2e/graphics/test-cases/plugins/up-down-markers.js
new file mode 100644
index 0000000000..cdd799e95c
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/up-down-markers.js
@@ -0,0 +1,48 @@
+const options = {
+	yieldCurve: {
+		baseResolution: 1,
+		minimumTimeRange: 10,
+		startTimeRange: 3,
+	},
+	layout: {
+		attributionLogo: false,
+	},
+};
+
+const curve1 = [
+	{ time: 1, value: 5.378 },
+	{ time: 2, value: 5.372 },
+	{ time: 3, value: 5.271 },
+	{ time: 6, value: 5.094 },
+	{ time: 12, value: 4.739 },
+	{ time: 24, value: 4.237 },
+	{ time: 36, value: 4.036 },
+	{ time: 60, value: 3.887 },
+	{ time: 84, value: 3.921 },
+	{ time: 120, value: 4.007 },
+	{ time: 240, value: 4.366 },
+	{ time: 360, value: 4.29 },
+];
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createYieldCurveChart(
+		container,
+		options
+	));
+
+	const series1 = chart.addLineSeries({
+		lineType: 2,
+		color: 'black',
+		pointMarkersVisible: true,
+	});
+
+	const primitive = new LightweightCharts.UpDownMarkersPrimitive();
+	series1.attachPrimitive(primitive);
+	primitive.setData(curve1);
+
+	primitive.update({ time: 24, value: 4.3 }, true); // up
+	primitive.update({ time: 36, value: 4.036 }, true); // neutral
+	primitive.update({ time: 60, value: 3.8 }, true); // down
+
+	chart.timeScale().fitContent();
+}
diff --git a/tests/e2e/graphics/test-cases/yield-curve-chart.js b/tests/e2e/graphics/test-cases/yield-curve-chart.js
new file mode 100644
index 0000000000..8a67f554dd
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/yield-curve-chart.js
@@ -0,0 +1,62 @@
+const options = {
+	yieldCurve: {
+		baseResolution: 1,
+		minimumTimeRange: 10,
+		startTimeRange: 3,
+	},
+	layout: {
+		attributionLogo: false,
+	},
+};
+
+const curve1 = [
+	{ time: 1, value: 5.378 },
+	{ time: 2, value: 5.372 },
+	{ time: 3, value: 5.271 },
+	{ time: 6, value: 5.094 },
+	{ time: 12, value: 4.739 },
+	{ time: 24, value: 4.237 },
+	{ time: 36, value: 4.036 },
+	{ time: 60, value: 3.887 },
+	{ time: 84, value: 3.921 },
+	{ time: 120, value: 4.007 },
+	{ time: 240, value: 4.366 },
+	{ time: 360, value: 4.29 },
+];
+const curve2 = [
+	{ time: 1, value: 5.381 },
+	{ time: 2, value: 5.393 },
+	{ time: 3, value: 5.425 },
+	{ time: 6, value: 5.494 },
+	{ time: 12, value: 5.377 },
+	{ time: 24, value: 4.883 },
+	{ time: 36, value: 4.554 },
+	{ time: 60, value: 4.241 },
+	{ time: 84, value: 4.172 },
+	{ time: 120, value: 4.084 },
+	{ time: 240, value: 4.365 },
+	{ time: 360, value: 4.176 },
+];
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createYieldCurveChart(
+		container,
+		options
+	));
+
+	const series1 = chart.addLineSeries({
+		lineType: 2,
+		color: 'red',
+		pointMarkersVisible: true,
+	});
+	series1.setData(curve1);
+	const series2 = chart.addLineSeries({
+		lineType: 2,
+		color: 'green',
+		pointMarkersVisible: true,
+		lineWidth: 1,
+	});
+	series2.setData(curve2);
+
+	chart.timeScale().fitContent();
+}

From a8bc394f7d962aa60f27fe32dd115bcf0707515d Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 13:56:13 +0100
Subject: [PATCH 05/17] add options chart type

---
 .size-limit.js                                |   8 ++
 src/api/create-options-chart.ts               |  25 ++++
 src/index.ts                                  |   1 +
 .../horz-scale-behaviour-price.ts             | 122 ++++++++++++++++++
 .../horz-scale-behavior-price/options.ts      |  26 ++++
 src/model/horz-scale-behavior-price/types.ts  |   1 +
 .../e2e/graphics/test-cases/options-chart.js  |  20 +++
 7 files changed, 203 insertions(+)
 create mode 100644 src/api/create-options-chart.ts
 create mode 100644 src/model/horz-scale-behavior-price/horz-scale-behaviour-price.ts
 create mode 100644 src/model/horz-scale-behavior-price/options.ts
 create mode 100644 src/model/horz-scale-behavior-price/types.ts
 create mode 100644 tests/e2e/graphics/test-cases/options-chart.js

diff --git a/.size-limit.js b/.size-limit.js
index 3ee1c34e66..8bde49a04b 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -37,6 +37,14 @@ export default [
 		ignore: ['fancy-canvas'],
 		brotli: true,
 	},
+	{
+		name: 'ESM createOptionsChart',
+		path: 'dist/lightweight-charts.production.mjs',
+		limit: '45.00 KB',
+		import: '{ createOptionsChart }',
+		ignore: ['fancy-canvas'],
+		brotli: true,
+	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
diff --git a/src/api/create-options-chart.ts b/src/api/create-options-chart.ts
new file mode 100644
index 0000000000..45a7790398
--- /dev/null
+++ b/src/api/create-options-chart.ts
@@ -0,0 +1,25 @@
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+import { HorzScaleBehaviorPrice } from '../model/horz-scale-behavior-price/horz-scale-behaviour-price';
+import { PriceChartOptions } from '../model/horz-scale-behavior-price/options';
+
+import { createChartEx } from './create-chart';
+import { IChartApiBase } from './ichart-api';
+
+/**
+ * Creates an 'options' chart with price values on the horizontal scale.
+ *
+ * This function is used to create a specialized chart type where the horizontal scale
+ * represents price values instead of time. It's particularly useful for visualizing
+ * option chains, price distributions, or any data where price is the primary x-axis metric.
+ *
+ * @param container - The DOM element or its id where the chart will be rendered.
+ * @param options - Optional configuration options for the price chart.
+ * @returns An instance of IChartApiBase configured for price-based horizontal scaling.
+ */
+export function createOptionsChart(
+	container: string | HTMLElement,
+	options?: DeepPartial<PriceChartOptions>
+): IChartApiBase<number> {
+	return createChartEx(container, new HorzScaleBehaviorPrice(), options);
+}
diff --git a/src/index.ts b/src/index.ts
index de949e1e87..08a5a70f7c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ export const customSeriesDefaultOptions: CustomSeriesOptions = {
 
 export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/create-chart';
 export { createYieldCurveChart } from './api/create-yield-curve-chart';
+export { createOptionsChart } from './api/create-options-chart';
 
 export { UpDownMarkersPrimitive } from './plugins/up-down-markers-plugin/primitive';
 
diff --git a/src/model/horz-scale-behavior-price/horz-scale-behaviour-price.ts b/src/model/horz-scale-behavior-price/horz-scale-behaviour-price.ts
new file mode 100644
index 0000000000..eedd3523b2
--- /dev/null
+++ b/src/model/horz-scale-behavior-price/horz-scale-behaviour-price.ts
@@ -0,0 +1,122 @@
+import { Mutable } from '../../helpers/mutable';
+
+import { ChartOptionsImpl } from '../chart-model';
+import { SeriesDataItemTypeMap } from '../data-consumer';
+import {
+	DataItem,
+	HorzScaleItemConverterToInternalObj,
+	IHorzScaleBehavior,
+	InternalHorzScaleItem,
+	InternalHorzScaleItemKey,
+} from '../ihorz-scale-behavior';
+import { LocalizationOptions } from '../localization-options';
+import { SeriesType } from '../series-options';
+import { TickMark } from '../tick-marks';
+import { TickMarkWeightValue, TimeScalePoint } from '../time-data';
+import { TimeMark } from '../time-scale';
+import { PriceChartLocalizationOptions } from './options';
+import { HorzScalePriceItem } from './types';
+
+function markWithGreaterWeight(a: TimeMark, b: TimeMark): TimeMark {
+	return a.weight > b.weight ? a : b;
+}
+
+export class HorzScaleBehaviorPrice implements IHorzScaleBehavior<HorzScalePriceItem> {
+	private _options!: ChartOptionsImpl<HorzScalePriceItem>;
+
+	public options(): ChartOptionsImpl<HorzScalePriceItem> {
+		return this._options;
+	}
+
+	public setOptions(options: ChartOptionsImpl<HorzScalePriceItem>): void {
+		this._options = options;
+	}
+
+	public preprocessData(
+		data: DataItem<HorzScalePriceItem> | DataItem<HorzScalePriceItem>[]
+	): void {}
+
+	public updateFormatter(options: PriceChartLocalizationOptions): void {
+		if (!this._options) {
+			return;
+		}
+		this._options.localization = options;
+	}
+
+	public createConverterToInternalObj(
+		data: SeriesDataItemTypeMap<HorzScalePriceItem>[SeriesType][]
+	): HorzScaleItemConverterToInternalObj<HorzScalePriceItem> {
+		return (price: number) => price as unknown as InternalHorzScaleItem;
+	}
+
+	public key(
+		internalItem: InternalHorzScaleItem | HorzScalePriceItem
+	): InternalHorzScaleItemKey {
+		return internalItem as InternalHorzScaleItemKey;
+	}
+
+	public cacheKey(internalItem: InternalHorzScaleItem): number {
+		return internalItem as unknown as number;
+	}
+
+	public convertHorzItemToInternal(
+		item: HorzScalePriceItem
+	): InternalHorzScaleItem {
+		return item as unknown as InternalHorzScaleItem;
+	}
+
+	public formatHorzItem(item: InternalHorzScaleItem): string {
+		return (item as unknown as number).toFixed(this._precision());
+	}
+
+	public formatTickmark(
+		item: TickMark,
+		localizationOptions: LocalizationOptions<HorzScalePriceItem>
+	): string {
+		return (item.time as unknown as number).toFixed(this._precision());
+	}
+
+	public maxTickMarkWeight(marks: TimeMark[]): TickMarkWeightValue {
+		return marks.reduce(markWithGreaterWeight, marks[0]).weight;
+	}
+
+	public fillWeightsForPoints(
+		sortedTimePoints: readonly Mutable<TimeScalePoint>[],
+		startIndex: number
+	): void {
+		const priceWeight = (price: number) => {
+			if (price === Math.ceil(price / 100) * 100) {
+				return 8;
+			}
+			if (price === Math.ceil(price / 50) * 50) {
+				return 7;
+			}
+			if (price === Math.ceil(price / 25) * 25) {
+				return 6;
+			}
+			if (price === Math.ceil(price / 10) * 10) {
+				return 5;
+			}
+			if (price === Math.ceil(price / 5) * 5) {
+				return 4;
+			}
+			if (price === Math.ceil(price)) {
+				return 3;
+			}
+			if (price * 2 === Math.ceil(price * 2)) {
+				return 1;
+			}
+			return 0;
+		};
+		for (let index = startIndex; index < sortedTimePoints.length; ++index) {
+			sortedTimePoints[index].timeWeight = priceWeight(
+				sortedTimePoints[index].time as unknown as number
+			) as TickMarkWeightValue;
+		}
+	}
+
+	private _precision(): number {
+		return (this._options.localization as PriceChartLocalizationOptions)
+			.precision;
+	}
+}
diff --git a/src/model/horz-scale-behavior-price/options.ts b/src/model/horz-scale-behavior-price/options.ts
new file mode 100644
index 0000000000..ebc4c3b109
--- /dev/null
+++ b/src/model/horz-scale-behavior-price/options.ts
@@ -0,0 +1,26 @@
+import { ChartOptionsImpl } from '../chart-model';
+import { LocalizationOptions } from '../localization-options';
+import { HorzScalePriceItem } from './types';
+
+/**
+ * Extends LocalizationOptions for price-based charts.
+ * Includes settings specific to formatting price values on the horizontal scale.
+ */
+export interface PriceChartLocalizationOptions
+	extends LocalizationOptions<HorzScalePriceItem> {
+	/**
+     * The number of decimal places to display for price values on the horizontal scale.
+     */
+	precision: number;
+}
+
+/**
+ * Configuration options specific to price-based charts.
+ * Extends the base chart options and includes localization settings for price formatting.
+ */
+export interface PriceChartOptions extends ChartOptionsImpl<number> {
+	/**
+     * Localization options for formatting price values and other chart elements.
+     */
+	localization: PriceChartLocalizationOptions;
+}
diff --git a/src/model/horz-scale-behavior-price/types.ts b/src/model/horz-scale-behavior-price/types.ts
new file mode 100644
index 0000000000..42bc90912c
--- /dev/null
+++ b/src/model/horz-scale-behavior-price/types.ts
@@ -0,0 +1 @@
+export type HorzScalePriceItem = number;
diff --git a/tests/e2e/graphics/test-cases/options-chart.js b/tests/e2e/graphics/test-cases/options-chart.js
new file mode 100644
index 0000000000..e2e15a605b
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/options-chart.js
@@ -0,0 +1,20 @@
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createOptionsChart(
+		container,
+		{ layout: { attributionLogo: false }, localization: { precision: 1 } }
+	));
+
+	const lineSeries = chart.addLineSeries({ color: 'blue' });
+
+	const data = [];
+	for (let i = 0; i < 1000; i++) {
+		data.push({
+			time: i * 0.25,
+			value: Math.sin(i / 100) + i / 500,
+		});
+	}
+
+	lineSeries.setData(data);
+
+	chart.timeScale().fitContent();
+}

From e164b1ada51d22e9e23c803e75740d5373ebf180 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 14:29:42 +0100
Subject: [PATCH 06/17] add chart types documentation page

---
 website/docs/chart-types.mdx  | 136 ++++++++++++++++++++++++++++++++++
 website/docs/ios.md           |   2 +-
 website/docs/panes.md         |   2 +-
 website/docs/price-scale.md   |   2 +-
 website/docs/release-notes.md |   2 +-
 website/docs/time-scale.md    |   2 +-
 website/docs/time-zones.md    |   2 +-
 website/sidebars.js           |   1 +
 8 files changed, 143 insertions(+), 6 deletions(-)
 create mode 100644 website/docs/chart-types.mdx

diff --git a/website/docs/chart-types.mdx b/website/docs/chart-types.mdx
new file mode 100644
index 0000000000..445e75e2d2
--- /dev/null
+++ b/website/docs/chart-types.mdx
@@ -0,0 +1,136 @@
+---
+sidebar_position: 2
+---
+
+# Chart types
+
+Lightweight Charts offers different types of charts to suit various data visualization needs. This article provides an overview of the available chart types and how to create them.
+
+## Standard Time-based Chart
+
+The standard time-based chart is the most common type, suitable for displaying time series data.
+
+- **Creation method**: [`createChart`](api/functions/createChart)
+- **Horizontal scale**: Time-based
+- **Use case**: General-purpose charting for financial and time series data
+
+```js
+import { createChart } from 'lightweight-charts';
+
+const chart = createChart(document.getElementById('container'), options);
+```
+
+This chart type uses time values for the horizontal scale and is ideal for most financial and time series data visualizations.
+
+import CodeBlock from '@theme/CodeBlock';
+export const timeBasedExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+const chart = createChart(document.getElementById('container'), chartOptions);
+const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR });
+
+const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];
+
+areaSeries.setData(data);
+
+chart.timeScale().fitContent();`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{timeBasedExample}</CodeBlock>
+
+## Yield Curve Chart
+
+The yield curve chart is specifically designed for displaying yield curves, common in financial analysis.
+
+- **Creation method**: [`createYieldCurveChart`](api/functions/createYieldCurveChart)
+- **Horizontal scale**: Linearly spaced, defined in monthly time duration units
+- **Key differences**:
+  - Whitespace is ignored for crosshair and grid lines
+  - Specialized for yield curve representation
+
+```js
+import { createYieldCurveChart } from 'lightweight-charts';
+
+const chart = createYieldCurveChart(document.getElementById('container'), options);
+```
+
+Use this chart type when you need to visualize yield curves or similar financial data where the horizontal scale represents time durations rather than specific dates.
+
+export const yieldCurveExample = `const chartOptions = {
+    layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } },
+    yieldCurve: { baseResolution: 1, minimumTimeRange: 10, startTimeRange: 3 },
+    handleScroll: false, handleScale: false,
+};
+
+const chart = createYieldCurveChart(document.getElementById('container'), chartOptions);
+const lineSeries = chart.addLineSeries({ color: LINE_LINE_COLOR });
+
+const curve = [{ time: 1, value: 5.378 }, { time: 2, value: 5.372 }, { time: 3, value: 5.271 }, { time: 6, value: 5.094 }, { time: 12, value: 4.739 }, { time: 24, value: 4.237 }, { time: 36, value: 4.036 }, { time: 60, value: 3.887 }, { time: 84, value: 3.921 }, { time: 120, value: 4.007 }, { time: 240, value: 4.366 }, { time: 360, value: 4.290 }];
+
+lineSeries.setData(curve);
+
+chart.timeScale().fitContent();`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{yieldCurveExample}</CodeBlock>
+
+## Options Chart (Price-based)
+
+The options chart is a specialized type that uses price values on the horizontal scale instead of time.
+
+- **Creation method**: [`createOptionsChart`](api/functions/createOptionsChart)
+- **Horizontal scale**: Price-based (numeric)
+- **Use case**: Visualizing option chains, price distributions, or any data where price is the primary x-axis metric
+
+```js
+import { createOptionsChart } from 'lightweight-charts';
+
+const chart = createOptionsChart(document.getElementById('container'), options);
+```
+
+This chart type is particularly useful for financial instruments like options, where the price is a more relevant x-axis metric than time.
+
+export const optionsExample = `const chartOptions = {
+    layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } },
+};
+
+const chart = createOptionsChart(document.getElementById('container'), chartOptions);
+const lineSeries = chart.addLineSeries({ color: LINE_LINE_COLOR });
+
+const data = [];
+for (let i = 0; i < 1000; i++) {
+    data.push({
+        time: i * 0.25,
+        value: Math.sin(i / 100) + i / 500,
+    });
+}
+
+lineSeries.setData(data);
+
+chart.timeScale().fitContent();`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{optionsExample}</CodeBlock>
+
+## Custom Horizontal Scale Chart
+
+For advanced use cases, Lightweight Charts allows creating charts with custom horizontal scale behavior.
+
+- **Creation method**: [`createChartEx`](api/functions/createChartEx)
+- **Horizontal scale**: Custom-defined
+- **Use case**: Specialized charting needs with non-standard horizontal scales
+
+```js
+import { createChartEx, defaultHorzScaleBehavior } from 'lightweight-charts';
+
+const customBehavior = new (defaultHorzScaleBehavior())();
+// Customize the behavior as needed
+
+const chart = createChartEx(document.getElementById('container'), customBehavior, options);
+```
+
+This method provides the flexibility to define custom horizontal scale behavior, allowing for unique and specialized chart types.
+
+## Choosing the Right Chart Type
+
+- Use `createChart` for most standard time-based charting needs.
+- Choose `createYieldCurveChart` when working specifically with yield curves or similar financial data.
+- Opt for `createOptionsChart` when you need to visualize data with price as the primary horizontal axis, such as option chains.
+- Use `createChartEx` when you need a custom horizontal scale behavior that differs from the standard time-based or price-based scales.
+
+Each chart type provides specific functionality and is optimized for different use cases. Consider your data structure and visualization requirements when selecting the appropriate chart type for your application.
diff --git a/website/docs/ios.md b/website/docs/ios.md
index a70b34b661..643187a1de 100644
--- a/website/docs/ios.md
+++ b/website/docs/ios.md
@@ -9,7 +9,7 @@ keywords:
     - charting
     - html5 charts
     - financial charting library
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # iOS wrapper
diff --git a/website/docs/panes.md b/website/docs/panes.md
index 476b1985ca..340fc28b71 100644
--- a/website/docs/panes.md
+++ b/website/docs/panes.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Panes
diff --git a/website/docs/price-scale.md b/website/docs/price-scale.md
index a3ef8527f3..855d1badad 100644
--- a/website/docs/price-scale.md
+++ b/website/docs/price-scale.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # Price scale
diff --git a/website/docs/release-notes.md b/website/docs/release-notes.md
index ff46a4f105..5be92195a0 100644
--- a/website/docs/release-notes.md
+++ b/website/docs/release-notes.md
@@ -9,7 +9,7 @@ keywords:
     - charting
     - html5 charts
     - financial charting library
-sidebar_position: 8
+sidebar_position: 9
 ---
 
 <!-- markdownlint-disable no-emphasis-as-heading -->
diff --git a/website/docs/time-scale.md b/website/docs/time-scale.md
index 8795f4d4fb..e8b5a66fdb 100644
--- a/website/docs/time-scale.md
+++ b/website/docs/time-scale.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Time scale
diff --git a/website/docs/time-zones.md b/website/docs/time-zones.md
index b8c9b7adec..d68c9c5e97 100644
--- a/website/docs/time-zones.md
+++ b/website/docs/time-zones.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 # Working with time zones
 
diff --git a/website/sidebars.js b/website/sidebars.js
index e4726e1bdb..d0682beb92 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -5,6 +5,7 @@ const sidebars = {
 	docsSidebar: [
 		'intro',
 		'series-types',
+		'chart-types',
 		'price-scale',
 		'time-scale',
 		'panes',

From fb56e1e360b4c05d594c5a7ff70f3a907f89550c Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 14:31:52 +0100
Subject: [PATCH 07/17] change docs pages with examples to mdx

---
 website/docs/{intro.md => intro.mdx}               | 0
 website/docs/{series-types.md => series-types.mdx} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename website/docs/{intro.md => intro.mdx} (100%)
 rename website/docs/{series-types.md => series-types.mdx} (100%)

diff --git a/website/docs/intro.md b/website/docs/intro.mdx
similarity index 100%
rename from website/docs/intro.md
rename to website/docs/intro.mdx
diff --git a/website/docs/series-types.md b/website/docs/series-types.mdx
similarity index 100%
rename from website/docs/series-types.md
rename to website/docs/series-types.mdx

From 7b3ea0be54582b04490e4164ec7e926b303fa712 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 14:42:35 +0100
Subject: [PATCH 08/17] fix chart code blocks for new version of docusaurus

---
 website/docs/intro.mdx        | 11 +++++----
 website/docs/series-types.mdx | 43 ++++++++++++++++++++---------------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/website/docs/intro.mdx b/website/docs/intro.mdx
index d313d95a6f..32d70761ab 100644
--- a/website/docs/intro.mdx
+++ b/website/docs/intro.mdx
@@ -101,7 +101,7 @@ const baselineSeries = chart.addBaselineSeries();
 // ... and so on
 ```
 
-Please look at [this page](/series-types.md) for more information about different series types.
+Please look at [this page](/series-types.mdx) for more information about different series types.
 
 Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types.
 
@@ -115,8 +115,8 @@ Note that regardless of the series type, the API calls are the same (the type of
 
 To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) method:
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+import CodeBlock from '@theme/CodeBlock';
+export const example = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const areaSeries = chart.addAreaSeries({
     lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR,
@@ -152,8 +152,9 @@ candlestickSeries.setData([
     { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
 ]);
 
-chart.timeScale().fitContent();
-```
+chart.timeScale().fitContent();`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{example}</CodeBlock>
 
 ### Updating the data in a series
 
diff --git a/website/docs/series-types.mdx b/website/docs/series-types.mdx
index a0fb3c4e5e..adc85e1d72 100644
--- a/website/docs/series-types.mdx
+++ b/website/docs/series-types.mdx
@@ -42,8 +42,8 @@ If you'd like to change any option of a series, you could do this in different w
 
 An area chart is basically a colored area between the line connecting all data points and [the time scale](./time-scale.md):
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+import CodeBlock from '@theme/CodeBlock';
+export const areaExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR });
 
@@ -52,7 +52,9 @@ const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, {
 areaSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{areaExample}</CodeBlock>
 
 ## Bar
 
@@ -65,8 +67,7 @@ A bar chart shows price movements in the form of bars.
 Vertical line length of a bar is limited by the highest and lowest price values.
 Open & Close values are represented by tick marks, on the left & right hand side of the bar respectively:
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+export const barExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const barSeries = chart.addBarSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR });
 
@@ -75,7 +76,9 @@ const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876
 barSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{barExample}</CodeBlock>
 
 ## Baseline
 
@@ -85,8 +88,7 @@ chart.timeScale().fitContent();
 
 A baseline is basically two colored areas (top and bottom) between the line connecting all data points and [the base value line](/api/interfaces/BaselineStyleOptions.md#basevalue):
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+export const baselineExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const baselineSeries = chart.addBaselineSeries({ baseValue: { type: 'price', price: 25 }, topLineColor: BASELINE_TOP_LINE_COLOR, topFillColor1: BASELINE_TOP_FILL_COLOR1, topFillColor2: BASELINE_TOP_FILL_COLOR2, bottomLineColor: BASELINE_BOTTOM_LINE_COLOR, bottomFillColor1: BASELINE_BOTTOM_FILL_COLOR1, bottomFillColor2: BASELINE_BOTTOM_FILL_COLOR2 });
 
@@ -95,7 +97,9 @@ const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, {
 baselineSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{baselineExample}</CodeBlock>
 
 ## Candlestick
 
@@ -106,8 +110,7 @@ chart.timeScale().fitContent();
 A candlestick chart shows price movements in the form of candlesticks.
 On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick's time interval:
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+export const candlestickExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const candlestickSeries = chart.addCandlestickSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR, borderVisible: false, wickUpColor: BAR_UP_COLOR, wickDownColor: BAR_DOWN_COLOR });
 
@@ -116,7 +119,9 @@ const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876
 candlestickSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{candlestickExample}</CodeBlock>
 
 ## Histogram
 
@@ -127,8 +132,7 @@ chart.timeScale().fitContent();
 A histogram series is a graphical representation of the value distribution.
 Histogram creates intervals (columns) and counts how many values fall into each column:
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+export const histogramExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const histogramSeries = chart.addHistogramSeries({ color: HISTOGRAM_COLOR });
 
@@ -137,7 +141,9 @@ const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, {
 histogramSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{histogramExample}</CodeBlock>
 
 ## Line
 
@@ -147,8 +153,7 @@ chart.timeScale().fitContent();
 
 A line chart is a type of chart that displays information as series of the data points connected by straight line segments:
 
-```js chart replaceThemeConstants
-const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
+export const lineExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
 const chart = createChart(document.getElementById('container'), chartOptions);
 const lineSeries = chart.addLineSeries({ color: LINE_LINE_COLOR });
 
@@ -157,7 +162,9 @@ const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, {
 lineSeries.setData(data);
 
 chart.timeScale().fitContent();
-```
+`;
+
+<CodeBlock className="language-js" replaceThemeConstants chart>{lineExample}</CodeBlock>
 
 ## Custom Series (Plugins)
 

From 26042b9a485713739dfa925c4cb012ff4fbf87df Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Sun, 4 Aug 2024 15:01:31 +0100
Subject: [PATCH 09/17] add yield-curve-with-update-markers demo

---
 website/tutorials/demos/.eslintrc.js          |   2 +
 .../demos/yield-curve-with-update-markers.js  | 100 ++++++++++++++++++
 .../demos/yield-curve-with-update-markers.mdx |  54 ++++++++++
 3 files changed, 156 insertions(+)
 create mode 100644 website/tutorials/demos/yield-curve-with-update-markers.js
 create mode 100644 website/tutorials/demos/yield-curve-with-update-markers.mdx

diff --git a/website/tutorials/demos/.eslintrc.js b/website/tutorials/demos/.eslintrc.js
index 5cd6c516c1..ad31afa4f8 100644
--- a/website/tutorials/demos/.eslintrc.js
+++ b/website/tutorials/demos/.eslintrc.js
@@ -2,5 +2,7 @@ module.exports = {
 	globals: {
 		document: false,
 		createChart: false,
+		createYieldCurveChart: false,
+		UpDownMarkersPrimitive: false,
 	},
 };
diff --git a/website/tutorials/demos/yield-curve-with-update-markers.js b/website/tutorials/demos/yield-curve-with-update-markers.js
new file mode 100644
index 0000000000..5e85924fef
--- /dev/null
+++ b/website/tutorials/demos/yield-curve-with-update-markers.js
@@ -0,0 +1,100 @@
+// remove-start
+// Lightweight Charts™ Example: Yield Curve Chart with Update Markers
+// https://tradingview.github.io/lightweight-charts/tutorials/demos/yield-curve-with-update-markers
+
+// remove-end
+
+// hide-start
+const curve1 = [
+	{ time: 1, value: 5.378 },
+	{ time: 2, value: 5.372 },
+	{ time: 3, value: 5.271 },
+	{ time: 6, value: 5.094 },
+	{ time: 12, value: 4.739 },
+	{ time: 24, value: 4.237 },
+	{ time: 36, value: 4.036 },
+	{ time: 60, value: 3.887 },
+	{ time: 84, value: 3.921 },
+	{ time: 120, value: 4.007 },
+	{ time: 240, value: 4.366 },
+	{ time: 360, value: 4.29 },
+];
+const curve2 = [
+	{ time: 1, value: 5.381 },
+	{ time: 2, value: 5.393 },
+	{ time: 3, value: 5.425 },
+	{ time: 6, value: 5.494 },
+	{ time: 12, value: 5.377 },
+	{ time: 24, value: 4.883 },
+	{ time: 36, value: 4.554 },
+	{ time: 60, value: 4.241 },
+	{ time: 84, value: 4.172 },
+	{ time: 120, value: 4.084 },
+	{ time: 240, value: 4.365 },
+	{ time: 360, value: 4.176 },
+];
+// hide-end
+
+const chartOptions = {
+	layout: {
+		textColor: CHART_TEXT_COLOR,
+		background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+	},
+	yieldCurve: {
+		baseResolution: 1,
+		minimumTimeRange: 10,
+		startTimeRange: 3,
+	},
+	handleScroll: false,
+	handleScale: false,
+	grid: {
+		vertLines: {
+			visible: false,
+		},
+		horzLines: {
+			visible: false,
+		},
+	},
+};
+
+const container = document.getElementById('container');
+const chart = createYieldCurveChart(container, chartOptions);
+
+const series1 = chart.addLineSeries({
+	lineType: 2,
+	color: '#26c6da',
+	pointMarkersVisible: true,
+	lineWidth: 2,
+});
+const priceChangeMarkers = new UpDownMarkersPrimitive();
+series1.attachPrimitive(priceChangeMarkers);
+priceChangeMarkers.setData(curve1);
+
+const series2 = chart.addLineSeries({
+	lineType: 2,
+	color: 'rgb(164, 89, 209)',
+	pointMarkersVisible: true,
+	lineWidth: 1,
+});
+series2.setData(curve2);
+
+chart.timeScale().fitContent();
+
+chart.timeScale().subscribeSizeChange(() => {
+	chart.timeScale().fitContent();
+});
+
+setInterval(() => {
+	curve1
+		.filter(() => Math.random() < 0.1)
+		.forEach(data => {
+			const shift = (Math.random() > 0.5 ? -1 : 1) * Math.random() * 0.01 * data.value;
+			priceChangeMarkers.update(
+				{
+					...data,
+					value: data.value + shift,
+				},
+				true
+			);
+		});
+}, 5000);
diff --git a/website/tutorials/demos/yield-curve-with-update-markers.mdx b/website/tutorials/demos/yield-curve-with-update-markers.mdx
new file mode 100644
index 0000000000..2fc8947dc4
--- /dev/null
+++ b/website/tutorials/demos/yield-curve-with-update-markers.mdx
@@ -0,0 +1,54 @@
+---
+title: Yield Curve Chart with Update Markers
+sidebar_label: Yield Curve with Updates
+description:
+  An example of a yield curve chart with real-time updates using markers
+pagination_prev: null
+pagination_next: null
+keywords:
+  - yield curve
+  - realtime updates
+  - markers
+  - plugins
+---
+
+This sample demonstrates how to create a yield curve chart with real-time
+updates using Lightweight Charts™. The chart displays two
+[yield curves](/docs/next/chart-types#yield-curve-chart) and utilizes the
+[UpDownMarkersPrimitive](/docs/next/api/classes/UpDownMarkersPrimitive) plugin
+to show price change markers for updates.
+
+The chart is initialized with historical yield curve data for two series. By
+using the `setInterval` function, we simulate real-time updates to the first
+curve. These updates are applied using the `update` method provided by the
+UpDownMarkersPrimitive, which automatically handles the creation and display of
+markers for price changes.
+
+Key features of this demo:
+
+1. Yield curve chart configuration with custom time range settings.
+2. Two line series representing different yield curves.
+3. Usage of the UpDownMarkersPrimitive plugin for displaying update markers.
+4. Simulated real-time updates to demonstrate dynamic data handling.
+
+The UpDownMarkersPrimitive is attached to the first series using
+`series1.attachPrimitive(priceChangeMarkers)`. We then use
+`priceChangeMarkers.setData(curve1)` to initialize the data and
+`priceChangeMarkers.update(...)` for subsequent updates. This approach allows
+the primitive to manage both the series data and the markers, providing a
+seamless way to visualize price changes.
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./yield-curve-with-update-markers.js';
+
+<CodeBlock
+	replaceThemeConstants
+	chart
+	className="language-js"
+	hideableCode
+	chartOnTop
+	codeUsage={<UsageGuidePartial />}
+>
+	{code}
+</CodeBlock>

From ca35c775afaa1de05ac37d13932c765fbc5ef67e Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Tue, 13 Aug 2024 09:50:00 +0100
Subject: [PATCH 10/17] update types for up down markers plugin

---
 src/plugins/up-down-markers-plugin/primitive.ts | 4 ++--
 src/plugins/up-down-markers-plugin/renderer.ts  | 4 ++--
 src/plugins/up-down-markers-plugin/view.ts      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/plugins/up-down-markers-plugin/primitive.ts b/src/plugins/up-down-markers-plugin/primitive.ts
index bdb3281d55..84be2de552 100644
--- a/src/plugins/up-down-markers-plugin/primitive.ts
+++ b/src/plugins/up-down-markers-plugin/primitive.ts
@@ -6,7 +6,7 @@ import { ensureDefined } from '../../helpers/assertions';
 
 import { isFulfilledData, isWhitespaceData, LineData, SeriesDataItemTypeMap } from '../../model/data-consumer';
 import { IHorzScaleBehavior, InternalHorzScaleItemKey } from '../../model/ihorz-scale-behavior';
-import { ISeriesPrimitivePaneView } from '../../model/iseries-primitive';
+import { IPrimitivePaneView } from '../../model/ipane-primitive';
 
 import { ExpiringMarkerManager } from './expiring-markers-manager';
 import {
@@ -166,7 +166,7 @@ export class UpDownMarkersPrimitive<
 		);
 	}
 
-	public paneViews(): readonly ISeriesPrimitivePaneView[] {
+	public paneViews(): readonly IPrimitivePaneView[] {
 		return this._paneViews;
 	}
 
diff --git a/src/plugins/up-down-markers-plugin/renderer.ts b/src/plugins/up-down-markers-plugin/renderer.ts
index 08d780bc3f..da4f71e9a4 100644
--- a/src/plugins/up-down-markers-plugin/renderer.ts
+++ b/src/plugins/up-down-markers-plugin/renderer.ts
@@ -3,7 +3,7 @@ import {
 	CanvasRenderingTarget2D,
 } from 'fancy-canvas';
 
-import { ISeriesPrimitivePaneRenderer } from '../../model/iseries-primitive';
+import { IPrimitivePaneRenderer } from '../../model/ipane-primitive';
 
 import { MarkerCoordinates } from './types';
 
@@ -15,7 +15,7 @@ const enum Constants {
 	VerticalScale = 0.5,
 }
 
-export class MarkersPrimitiveRenderer implements ISeriesPrimitivePaneRenderer {
+export class MarkersPrimitiveRenderer implements IPrimitivePaneRenderer {
 	private _data: MarkerCoordinates[];
 	private readonly _neutralColor: string;
 	private readonly _negativeColor: string;
diff --git a/src/plugins/up-down-markers-plugin/view.ts b/src/plugins/up-down-markers-plugin/view.ts
index d84ac5ea2a..ba5bdc0f66 100644
--- a/src/plugins/up-down-markers-plugin/view.ts
+++ b/src/plugins/up-down-markers-plugin/view.ts
@@ -4,7 +4,7 @@ import { ITimeScaleApi } from '../../api/itime-scale-api';
 import { ensureNotNull } from '../../helpers/assertions';
 import { notNull } from '../../helpers/strict-type-checks';
 
-import { ISeriesPrimitivePaneView } from '../../model/iseries-primitive';
+import { IPrimitivePaneView } from '../../model/ipane-primitive';
 import {
 	AreaSeriesOptions,
 	LineSeriesOptions,
@@ -35,7 +35,7 @@ type SupportedSeriesOptions = SeriesOptionsMap[SupportedSeriesTypes];
 export class MarkersPrimitivePaneView<
 	HorzScaleItem,
 	TSeriesType extends SupportedSeriesTypes
-> implements ISeriesPrimitivePaneView {
+> implements IPrimitivePaneView {
 	private readonly _series: ISeriesApi<SupportedSeriesTypes, HorzScaleItem>;
 	private readonly _timeScale: ITimeScaleApi<HorzScaleItem>;
 	private readonly _options: UpDownMarkersPluginOptions;

From b86600720ebf74c27587a5f4be595200eb893ba5 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Tue, 13 Aug 2024 09:54:38 +0100
Subject: [PATCH 11/17] add back missing size-limit checks after branch merge

---
 .size-limit.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/.size-limit.js b/.size-limit.js
index 8bde49a04b..bd525c2f8e 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -8,7 +8,7 @@ export default [
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '46.00 KB',
+		limit: '47.00 KB',
 		import: '*',
 		ignore: ['fancy-canvas'],
 		brotli: true,
@@ -58,6 +58,22 @@ export default [
 		limit: '50.00 KB',
 		brotli: true,
 	},
+	{
+		name: 'Plugin: Text Watermark',
+		path: 'dist/lightweight-charts.production.mjs',
+		import: '{ TextWatermark }',
+		ignore: ['fancy-canvas'],
+		limit: '2.00 KB',
+		brotli: true,
+	},
+	{
+		name: 'Plugin: Image Watermark',
+		path: 'dist/lightweight-charts.production.mjs',
+		import: '{ ImageWatermark }',
+		ignore: ['fancy-canvas'],
+		limit: '2.00 KB',
+		brotli: true,
+	},
 	{
 		name: 'Plugin: UpDownMarkersPrimitive',
 		path: 'dist/lightweight-charts.production.mjs',

From 0056e15e8421bdf0aec9656e6e548e3ca64cc87c Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Tue, 13 Aug 2024 11:18:42 +0100
Subject: [PATCH 12/17] fix coverage tests

---
 .../test-cases/plugins/image-watermark.js     | 93 +++++++++++++++++++
 .../test-cases/plugins/up-down-markers.js     | 55 +++++++++++
 .../coverage/test-cases/series/update-data.js |  2 +-
 3 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/coverage/test-cases/plugins/image-watermark.js
 create mode 100644 tests/e2e/coverage/test-cases/plugins/up-down-markers.js

diff --git a/tests/e2e/coverage/test-cases/plugins/image-watermark.js b/tests/e2e/coverage/test-cases/plugins/image-watermark.js
new file mode 100644
index 0000000000..feb80b02a3
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/image-watermark.js
@@ -0,0 +1,93 @@
+function simpleData() {
+	return [
+		{ time: 1663740000, value: 10 },
+		{ time: 1663750000, value: 20 },
+		{ time: 1663760000, value: 30 },
+	];
+}
+
+function interactionsToPerform() {
+	return [];
+}
+
+function svgToDataUrl(svgString) {
+	// Encode the SVG string
+	const encodedSvg = encodeURIComponent(svgString);
+
+	// Create the data URL
+	const dataUrl = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
+
+	return dataUrl;
+}
+
+const svgString = `<svg width="445" height="370" viewBox="0 0 445 370" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_101_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="75" y="15" width="300" height="300">
+<rect x="75" y="15" width="300" height="300" rx="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_101_2)">
+<rect x="74" y="15" width="300" height="300" fill="url(#paint0_linear_101_2)"/>
+<g style="mix-blend-mode:luminosity">
+<path d="M374 15H74V315H374V15Z" fill="white"/>
+<g style="mix-blend-mode:luminosity" opacity="0.42" filter="url(#filter0_f_101_2)">
+<path d="M224.5 282C289.946 282 343 231.408 343 169C343 106.592 289.946 56 224.5 56C159.054 56 106 106.592 106 169C106 231.408 159.054 282 224.5 282Z" fill="#434651" fill-opacity="0.5"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78 47V284.5C78.8333 293.333 85.1 311.2 103.5 312C121.9 312.8 274.833 312.333 349 312C356.333 308.667 371 299.5 371 289.5V44.5C370.333 35.8333 365 18.4 349 18C333 17.6 176.667 17.8333 100.5 18C93 19.6667 78 27.8 78 47ZM220 284.5L100.5 248C86.9 241.6 94.8333 232.667 100.5 229L211.5 174.5C251.167 186.667 332.4 211.6 340 214C347.6 216.4 344.833 225 342.5 229C322.333 242.5 278.3 271.7 263.5 280.5C248.7 289.3 228.333 286.833 220 284.5Z" fill="white"/>
+<path d="M371 289.5C371 299.5 356.333 308.667 349 312C274.833 312.333 121.9 312.8 103.5 312C85.1 311.2 78.8333 293.333 78 284.5V47C78 27.8 93 19.6667 100.5 18C176.667 17.8333 333 17.6 349 18C365 18.4 370.333 35.8333 371 44.5M371 289.5C371 279.5 371 122 371 44.5M371 289.5V44.5M100.5 248L220 284.5C228.333 286.833 248.7 289.3 263.5 280.5C278.3 271.7 322.333 242.5 342.5 229C344.833 225 347.6 216.4 340 214C332.4 211.6 251.167 186.667 211.5 174.5L100.5 229C94.8333 232.667 86.9 241.6 100.5 248Z" stroke="black"/>
+<path d="M136.384 258.757L99.7262 247.673C91.5706 245.206 90.5712 233.98 98.161 230.092L186.39 184.889C198.507 178.681 212.509 177.324 225.579 181.091L337.928 213.47C345.768 215.729 347.265 226.265 340.37 230.65L323.896 241.127M136.384 258.757L104.678 279.13M136.384 258.757L180.091 271.756M180.091 271.756L216.512 282.713C236.049 288.591 257.175 285.321 274.059 273.806L291.067 262.207M180.091 271.756L148.424 292M291.067 262.207L329.188 273.794M291.067 262.207L323.896 241.127M323.896 241.127L362 252.62" stroke="#5D606B" stroke-width="10" stroke-linecap="round"/>
+<rect x="78" y="18" width="293" height="294" rx="27" stroke="#753636" stroke-width="6"/>
+</g>
+</g>
+<path d="M334.887 70.2296C313 128.139 279.557 154.294 254.462 162.621C253.895 166.583 251.927 170.214 248.913 172.857C245.899 175.501 242.037 176.984 238.024 177.039C235.797 177.002 233.599 176.528 231.555 175.644C229.512 174.76 227.663 173.483 226.115 171.887C224.567 170.29 223.349 168.405 222.531 166.339C221.713 164.273 221.312 162.066 221.349 159.845C221.349 157.14 221.939 154.576 223 152.318L199.156 127.621C196.218 129.847 192.607 131.007 188.919 130.909C185.231 130.811 181.687 129.46 178.873 127.08L119.297 172.946C131.278 188.611 146.632 201.477 163.684 209.357L164.274 209.639H165.028C165.328 209.634 165.626 209.619 165.925 209.592C166.538 209.569 167.387 209.475 168.495 209.357C171.579 208.923 174.623 208.246 177.599 207.334C185.747 204.817 193.462 201.074 200.476 196.232C197.736 204.567 192.388 211.805 185.217 216.884L192.057 218.295C221.844 224.458 256.844 215.026 283.943 192.469C309.085 171.535 327.292 141.169 328.401 99.678C336.986 84.5775 343.425 65.3372 346.491 56.1639L346.656 55.717L339.109 59.2452C337.807 62.9571 336.391 66.6281 334.863 70.2531L334.887 70.2296Z" fill="#4994EC"/>
+<path d="M115.476 167.725C108.171 157.222 102.449 145.707 98.4953 133.548L98 132.043L98.7075 130.679C126.231 79.3323 187.316 59.6451 234.557 77.5917L236.349 78.2973L236.608 80.3437C237.472 87.8787 240.01 95.1267 244.038 101.56C246.273 104.705 248.905 107.551 251.868 110.027C244.792 94.668 246.325 82.7193 246.325 82.7193L250.712 85.5418C270.453 97.3965 297.363 100.642 320.288 86.5768C300.17 128.444 274.132 148.555 254.203 155.799C253.394 152.104 251.354 148.792 248.416 146.4C245.479 144.008 241.816 142.679 238.024 142.628C233.887 142.63 229.907 144.202 226.892 147.026L203.448 122.799C205.102 120.058 205.975 116.919 205.972 113.72C206.012 111.499 205.614 109.292 204.799 107.225C203.984 105.157 202.769 103.27 201.223 101.671C199.676 100.073 197.829 98.7932 195.787 97.9063C193.745 97.0194 191.548 96.5425 189.321 96.5027C187.094 96.5425 184.896 97.0194 182.854 97.9063C180.812 98.7932 178.965 100.073 177.419 101.671C175.873 103.27 174.657 105.157 173.843 107.225C173.028 109.292 172.629 111.499 172.67 113.72C172.67 116.754 173.425 119.6 174.769 122.07L115.453 167.725H115.476Z" fill="#4994EC"/>
+<path d="M199.651 113.72C199.651 119.6 195.005 124.352 189.321 124.352C186.541 124.302 183.895 123.155 181.963 121.162C180.03 119.169 178.97 116.492 179.014 113.72C179.014 107.84 183.637 103.065 189.321 103.065C190.699 103.09 192.059 103.385 193.323 103.933C194.587 104.482 195.73 105.274 196.687 106.263C197.644 107.253 198.397 108.421 198.901 109.7C199.406 110.98 199.652 112.346 199.627 113.72H199.651ZM248 159.845C248.083 162.572 247.08 165.221 245.211 167.213C243.341 169.205 240.758 170.378 238.024 170.477C235.285 170.385 232.696 169.214 230.821 167.221C228.947 165.228 227.941 162.576 228.024 159.845C227.935 157.11 228.938 154.452 230.813 152.454C232.688 150.456 235.281 149.282 238.024 149.19C243.236 149.19 248.024 153.659 248.024 159.845H248Z" fill="#4994EC"/>
+<defs>
+<filter id="filter0_f_101_2" x="-14" y="-64" width="477" height="466" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_101_2"/>
+</filter>
+<linearGradient id="paint0_linear_101_2" x1="74" y1="15" x2="372.995" y2="315.998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#88E3FF"/>
+<stop offset="0.19127" stop-color="#C1C9FF"/>
+<stop offset="0.338542" stop-color="#C495FF"/>
+<stop offset="0.510417" stop-color="#E785FF"/>
+<stop offset="0.677083" stop-color="#8B7EFF"/>
+<stop offset="0.833333" stop-color="#4474FF"/>
+<stop offset="0.9999" stop-color="#1251FF"/>
+<stop offset="1" stop-color="#2962FF"/>
+</linearGradient>
+</defs>
+</svg>`;
+
+const imageDataUrl = svgToDataUrl(svgString);
+
+let chart;
+
+function beforeInteractions(container) {
+	chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(simpleData());
+
+	const imageWatermark = new LightweightCharts.ImageWatermark(imageDataUrl, {
+		alpha: 0.5,
+		padding: 20,
+	});
+
+	const pane = chart.panes()[0];
+	pane.attachPrimitive(imageWatermark);
+
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	chart.applyOptions({
+		height: 300,
+		width: 300,
+	});
+
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/up-down-markers.js b/tests/e2e/coverage/test-cases/plugins/up-down-markers.js
new file mode 100644
index 0000000000..6de4359f28
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/up-down-markers.js
@@ -0,0 +1,55 @@
+function interactionsToPerform() {
+	return [];
+}
+
+const curve1 = [
+	{ time: 1, value: 5.378 },
+	{ time: 2, value: 5.372 },
+	{ time: 3, value: 5.271 },
+	{ time: 6, value: 5.094 },
+	{ time: 12, value: 4.739 },
+	{ time: 24, value: 4.237 },
+	{ time: 36, value: 4.036 },
+	{ time: 60, value: 3.887 },
+	{ time: 84, value: 3.921 },
+	{ time: 120, value: 4.007 },
+	{ time: 240, value: 4.366 },
+	{ time: 360, value: 4.29 },
+];
+
+let chart;
+
+function beforeInteractions(container) {
+	chart = LightweightCharts.createYieldCurveChart(container, {
+		yieldCurve: {
+			baseResolution: 1,
+			minimumTimeRange: 10,
+			startTimeRange: 3,
+		},
+		layout: {
+			attributionLogo: false,
+		},
+	});
+
+	const series1 = chart.addLineSeries({
+		lineType: 2,
+		color: 'black',
+		pointMarkersVisible: true,
+	});
+
+	const primitive = new LightweightCharts.UpDownMarkersPrimitive();
+	series1.attachPrimitive(primitive);
+	primitive.setData(curve1);
+
+	primitive.update({ time: 24, value: 4.3 }, true); // up
+	primitive.update({ time: 36, value: 4.036 }, true); // neutral
+	primitive.update({ time: 60, value: 3.8 }, true); // down
+
+	chart.timeScale().fitContent();
+
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/series/update-data.js b/tests/e2e/coverage/test-cases/series/update-data.js
index b38f6d4e17..4fa1b45d32 100644
--- a/tests/e2e/coverage/test-cases/series/update-data.js
+++ b/tests/e2e/coverage/test-cases/series/update-data.js
@@ -100,7 +100,7 @@ async function afterInteractions() {
 	);
 	lineSeries.update(
 		{
-			time: barData[barData.length - 6],
+			time: barData[barData.length - 6].time,
 		},
 		true // historical update
 	);

From 05d7823e7c0c52742a0026e8b9fca668cac0499a Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Tue, 13 Aug 2024 11:52:52 +0100
Subject: [PATCH 13/17] change name for SupportedSeriesTypes type

---
 .../up-down-markers-plugin/primitive.ts        | 18 +++++++++---------
 src/plugins/up-down-markers-plugin/types.ts    |  4 ++--
 src/plugins/up-down-markers-plugin/view.ts     | 12 ++++++------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/plugins/up-down-markers-plugin/primitive.ts b/src/plugins/up-down-markers-plugin/primitive.ts
index 84be2de552..90b974ef69 100644
--- a/src/plugins/up-down-markers-plugin/primitive.ts
+++ b/src/plugins/up-down-markers-plugin/primitive.ts
@@ -13,12 +13,12 @@ import {
 	upDownMarkersPluginOptionDefaults,
 	UpDownMarkersPluginOptions,
 } from './options';
-import { SeriesUpDownMarker, SupportedSeriesTypes } from './types';
+import { SeriesUpDownMarker, UpDownMarkersSupportedSeriesTypes } from './types';
 import { MarkersPrimitivePaneView } from './view';
 
 function isLineData<T>(
-	item: SeriesDataItemTypeMap<T>[SupportedSeriesTypes],
-	type: SupportedSeriesTypes
+	item: SeriesDataItemTypeMap<T>[UpDownMarkersSupportedSeriesTypes],
+	type: UpDownMarkersSupportedSeriesTypes
 ): item is LineData<T> {
 	return type === 'Line' || type === 'Area';
 }
@@ -44,14 +44,14 @@ function isLineData<T>(
  */
 export class UpDownMarkersPrimitive<
 	HorzScaleItem,
-	TData extends SeriesDataItemTypeMap<HorzScaleItem>[SupportedSeriesTypes] = SeriesDataItemTypeMap<HorzScaleItem>['Line']
+	TData extends SeriesDataItemTypeMap<HorzScaleItem>[UpDownMarkersSupportedSeriesTypes] = SeriesDataItemTypeMap<HorzScaleItem>['Line']
 > {
 	private _chart: IChartApiBase<HorzScaleItem> | undefined = undefined;
-	private _series: ISeriesApi<SupportedSeriesTypes, HorzScaleItem> | undefined =
+	private _series: ISeriesApi<UpDownMarkersSupportedSeriesTypes, HorzScaleItem> | undefined =
 		undefined;
 	private _paneViews: MarkersPrimitivePaneView<
 		HorzScaleItem,
-		SupportedSeriesTypes
+		UpDownMarkersSupportedSeriesTypes
 	>[] = [];
 	private _markersManager: ExpiringMarkerManager<HorzScaleItem>;
 	private _requestUpdate?: () => void;
@@ -123,7 +123,7 @@ export class UpDownMarkersPrimitive<
 			horzScaleBehavior,
 		} = params;
 		this._chart = chart;
-		this._series = series as ISeriesApi<SupportedSeriesTypes, HorzScaleItem>;
+		this._series = series as ISeriesApi<UpDownMarkersSupportedSeriesTypes, HorzScaleItem>;
 		this._horzScaleBehavior = horzScaleBehavior;
 		const seriesType = this._series.seriesType();
 		if (seriesType !== 'Area' && seriesType !== 'Line') {
@@ -155,13 +155,13 @@ export class UpDownMarkersPrimitive<
 		return ensureDefined(this._chart);
 	}
 
-	public series(): ISeriesApi<SupportedSeriesTypes, HorzScaleItem> {
+	public series(): ISeriesApi<UpDownMarkersSupportedSeriesTypes, HorzScaleItem> {
 		return ensureDefined(this._series);
 	}
 
 	public updateAllViews(): void {
 		this._paneViews.forEach(
-			(pw: MarkersPrimitivePaneView<HorzScaleItem, SupportedSeriesTypes>) =>
+			(pw: MarkersPrimitivePaneView<HorzScaleItem, UpDownMarkersSupportedSeriesTypes>) =>
 				pw.update(this.markers())
 		);
 	}
diff --git a/src/plugins/up-down-markers-plugin/types.ts b/src/plugins/up-down-markers-plugin/types.ts
index 09cc91e40f..90616ef069 100644
--- a/src/plugins/up-down-markers-plugin/types.ts
+++ b/src/plugins/up-down-markers-plugin/types.ts
@@ -43,6 +43,6 @@ export interface MarkerCoordinates {
 }
 
 /**
- * Defines the supported series types for markers.
+ * Defines the supported series types for up down markers primitive plugin.
  */
-export type SupportedSeriesTypes = 'Line' | 'Area';
+export type UpDownMarkersSupportedSeriesTypes = 'Line' | 'Area';
diff --git a/src/plugins/up-down-markers-plugin/view.ts b/src/plugins/up-down-markers-plugin/view.ts
index ba5bdc0f66..654cd6f7c6 100644
--- a/src/plugins/up-down-markers-plugin/view.ts
+++ b/src/plugins/up-down-markers-plugin/view.ts
@@ -16,27 +16,27 @@ import { MarkersPrimitiveRenderer } from './renderer';
 import {
 	MarkerCoordinates,
 	SeriesUpDownMarker,
-	SupportedSeriesTypes,
+	UpDownMarkersSupportedSeriesTypes,
 } from './types';
 
-function isAreaStyleOptions(opts: SupportedSeriesOptions, seriesType: SupportedSeriesTypes): opts is AreaSeriesOptions {
+function isAreaStyleOptions(opts: SupportedSeriesOptions, seriesType: UpDownMarkersSupportedSeriesTypes): opts is AreaSeriesOptions {
 	return seriesType === 'Area';
 }
 
-function getNeutralColor<TSeriesType extends SupportedSeriesTypes>(opts: LineSeriesOptions | AreaSeriesOptions, seriesType: TSeriesType): string {
+function getNeutralColor<TSeriesType extends UpDownMarkersSupportedSeriesTypes>(opts: LineSeriesOptions | AreaSeriesOptions, seriesType: TSeriesType): string {
 	if (isAreaStyleOptions(opts, seriesType)) {
 		return opts.lineColor;
 	}
 	return opts.color;
 }
 
-type SupportedSeriesOptions = SeriesOptionsMap[SupportedSeriesTypes];
+type SupportedSeriesOptions = SeriesOptionsMap[UpDownMarkersSupportedSeriesTypes];
 
 export class MarkersPrimitivePaneView<
 	HorzScaleItem,
-	TSeriesType extends SupportedSeriesTypes
+	TSeriesType extends UpDownMarkersSupportedSeriesTypes
 > implements IPrimitivePaneView {
-	private readonly _series: ISeriesApi<SupportedSeriesTypes, HorzScaleItem>;
+	private readonly _series: ISeriesApi<UpDownMarkersSupportedSeriesTypes, HorzScaleItem>;
 	private readonly _timeScale: ITimeScaleApi<HorzScaleItem>;
 	private readonly _options: UpDownMarkersPluginOptions;
 	private _data: MarkerCoordinates[] = [];

From 566748e895f779d1310ad718703d85baf1b8e2cd Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Tue, 13 Aug 2024 11:53:26 +0100
Subject: [PATCH 14/17] Update historical-data-updates graphics test case

---
 .../graphics/test-cases/historical-data-updates.js  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/graphics/test-cases/historical-data-updates.js b/tests/e2e/graphics/test-cases/historical-data-updates.js
index 802341b3d8..1828b86ab3 100644
--- a/tests/e2e/graphics/test-cases/historical-data-updates.js
+++ b/tests/e2e/graphics/test-cases/historical-data-updates.js
@@ -37,9 +37,14 @@ function runTestCase(container) {
 	} catch (e) {
 		// passed
 	}
-	mainSeries.update(
-		{ ...thirdLastPoint, value: thirdLastPoint.value - 10 },
-		true
-	);
+	try {
+		mainSeries.update(
+			{ ...thirdLastPoint, value: thirdLastPoint.value - 10 },
+			true
+		);
+	} catch (e) {
+		// would fail on older version of library,
+		// but graphics difference should be visible
+	}
 	chart.timeScale().fitContent();
 }

From a982d7ebd78f4502f4a1b74f29df25ba6ff46fb7 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:05:58 +0000
Subject: [PATCH 15/17] fix broken documentation links

---
 website/tutorials/how_to/series-markers.mdx | 4 ++--
 website/tutorials/how_to/watermark.mdx      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/website/tutorials/how_to/series-markers.mdx b/website/tutorials/how_to/series-markers.mdx
index b591a929ed..a026d89c38 100644
--- a/website/tutorials/how_to/series-markers.mdx
+++ b/website/tutorials/how_to/series-markers.mdx
@@ -16,7 +16,7 @@ This example shows how to add series markers to your chart.
 ## Short answer
 
 You can add markers to a series by passing an array of [`seriesMarker`](/docs/api/interfaces/SeriesMarker)
-objects to the [`createSeriesMarkers`](/docs/api#createSeriesMarkers) method on
+objects to the [`createSeriesMarkers`](/docs/next/api/functions/createSeriesMarkers) method on
 an [`ISeriesApi`](/docs/api/interfaces/ISeriesApi) instance.
 
 ```js
@@ -47,7 +47,7 @@ You can view the related APIs here:
 - [SeriesMarker](/docs/api/interfaces/SeriesMarker) - Series Marker interface.
 - [SeriesMarkerPosition](/docs/api/type-aliases/SeriesMarkerPosition) - Positions that can be set for the marker.
 - [SeriesMarkerShape](/docs/api/type-aliases/SeriesMarkerShape) - Shapes that can be set for the marker.
-- [createSeriesMarkers](/docs/next/api/interfaces/ISeriesApi#setmarkers) - Method for adding markers to a series.
+- [createSeriesMarkers](/docs/next/api/functions/createSeriesMarkers) - Method for adding markers to a series.
 - [Time Types](/docs/api/type-aliases/Time) - Different time formats available to use.
 
 ## Full example
diff --git a/website/tutorials/how_to/watermark.mdx b/website/tutorials/how_to/watermark.mdx
index a956272616..3f5b03c606 100644
--- a/website/tutorials/how_to/watermark.mdx
+++ b/website/tutorials/how_to/watermark.mdx
@@ -16,7 +16,7 @@ included below.
 
 ## Short answer
 
-A simple text watermark can be configured and added by using the [`createTextWatermark`](/docs/next/api#createTextWatermark) function exported
+A simple text watermark can be configured and added by using the [`createTextWatermark`](/docs/next/api/functions/createTextWatermark) function exported
 from the library as follows:
 
 ```js
@@ -43,7 +43,7 @@ You can see full [working examples](#examples) below.
 
 ## Resources
 
-- [`createTextWatermark` function](/docs/next/api#createTextWatermark).
+- [`createTextWatermark` function](/docs/next/api/functions/createTextWatermark).
 - [TextWatermark Options](/docs/next/api/interfaces/TextWatermarkOptions)
 
 ## Examples
@@ -83,7 +83,7 @@ You can see full [working examples](#examples) below.
 
 ## Resources
 
-- [`createImageWatermark` pane primitive](/docs/next/api#createImageWatermark).
+- [`createImageWatermark` pane primitive](/docs/next/api/functions/createTextWatermark).
 - [ImageWatermark Options](/docs/next/api/interfaces/ImageWatermarkOptions)
 
 :::tip

From 03ead852dfe0e458b2a0cdafd8947cee40a8bfdd Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:43:56 +0000
Subject: [PATCH 16/17] fix ignoreWhitespaces option after recent changes to v5

---
 src/api/chart-api.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/api/chart-api.ts b/src/api/chart-api.ts
index f5f1db9429..48a3ebd648 100644
--- a/src/api/chart-api.ts
+++ b/src/api/chart-api.ts
@@ -399,6 +399,7 @@ export class ChartApi<HorzScaleItem> implements IChartApiBase<HorzScaleItem>, Da
 		model.updateTimeScale(update.timeScale.baseIndex, update.timeScale.points, update.timeScale.firstChangedPointIndex);
 		update.series.forEach((value: SeriesChanges, series: Series<SeriesType>) => series.setData(value.data, value.info));
 
+		model.timeScale().recalculateIndicesWithData();
 		model.recalculateAllPanes();
 	}
 

From 7c5edd155cba4481205c1e225e55c48572d97bc8 Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:05:07 +0000
Subject: [PATCH 17/17] fix link within watermark tutorial article

---
 website/tutorials/how_to/watermark.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/tutorials/how_to/watermark.mdx b/website/tutorials/how_to/watermark.mdx
index 3f5b03c606..f8b44326a0 100644
--- a/website/tutorials/how_to/watermark.mdx
+++ b/website/tutorials/how_to/watermark.mdx
@@ -64,7 +64,7 @@ import codeSimple from "!!raw-loader!./watermark-simple.js";
 
 ### Image Watermark Example
 
-If a simple text watermark doesn't meet your requirements then you can use the Image watermark via [`createImageWatermark`](/docs/next/api#createImageWatermark) function exported
+If a simple text watermark doesn't meet your requirements then you can use the Image watermark via [`createImageWatermark`](/docs/next/api/functions/createImageWatermark) function exported
 from the library as follows:
 
 ```js