diff --git a/.circleci/config.yml b/.circleci/config.yml
index 164bb31681..a1bb4255e5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -180,6 +180,13 @@ jobs:
       - store_test_results:
           path: test-results/
 
+  type-tests:
+    executor: node16-executor
+    steps:
+      - checkout-with-deps
+      - run: npm run tsc-verify
+      - run: npm run type-tests
+
   dts-changes:
     executor: node16-executor
     steps:
@@ -334,6 +341,10 @@ workflows:
           filters: *default-filters
           requires:
             - build
+      - type-tests:
+          filters: *default-filters
+          requires:
+            - build
       - dts-changes:
           filters: *merge-based-filters
           requires:
diff --git a/.eslintrc.js b/.eslintrc.js
index 08151466d6..90afb847f8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,7 @@ function getNamingConventionRules(additionalDefaultFormats = []) {
 			format: ['PascalCase'],
 			filter: {
 				match: true,
-				regex: '^(Area|Baseline|Bar|Candlestick|Histogram|Line)$',
+				regex: '^(Area|Baseline|Bar|Candlestick|Histogram|Line|Custom)$',
 			},
 		},
 	];
diff --git a/package.json b/package.json
index 409c6305d5..6e043e4c95 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,8 @@
     "prepare-release": "npm-run-all clean build:release && npm run prepare-package-json-for-release",
     "prepare-package-json-for-release": "node ./scripts/clean-package-json.js",
     "size-limit": "size-limit",
-    "verify": "npm-run-all clean -p build:prod check-markdown-links -p lint check-dts-docs tsc-verify test size-limit",
-    "test": "mocha tests/unittests/**/*.spec.ts"
+    "verify": "npm-run-all clean -p build:prod check-markdown-links -p lint check-dts-docs tsc-verify test size-limit -p type-tests",
+    "test": "mocha tests/unittests/**/*.spec.ts",
+    "type-tests": "tsc -p ./tests/type-checks/tsconfig.composite.json --noEmit"
   }
 }
diff --git a/src/api/chart-api.ts b/src/api/chart-api.ts
index 9c638641b3..2729a00e0d 100644
--- a/src/api/chart-api.ts
+++ b/src/api/chart-api.ts
@@ -1,11 +1,12 @@
 import { ChartWidget, MouseEventParamsImpl, MouseEventParamsImplSupplier } from '../gui/chart-widget';
 
-import { assert, ensureDefined } from '../helpers/assertions';
+import { assert, ensure, ensureDefined } from '../helpers/assertions';
 import { Delegate } from '../helpers/delegate';
 import { warn } from '../helpers/logger';
 import { clone, DeepPartial, isBoolean, merge } from '../helpers/strict-type-checks';
 
 import { ChartOptions, ChartOptionsInternal } from '../model/chart-model';
+import { CustomData, ICustomSeriesPaneView } from '../model/icustom-series';
 import { Series } from '../model/series';
 import { SeriesPlotRow } from '../model/series-data';
 import {
@@ -13,6 +14,8 @@ import {
 	BarSeriesPartialOptions,
 	BaselineSeriesPartialOptions,
 	CandlestickSeriesPartialOptions,
+	CustomSeriesOptions,
+	CustomSeriesPartialOptions,
 	fillUpDownCandlesticksColors,
 	HistogramSeriesPartialOptions,
 	LineSeriesPartialOptions,
@@ -20,13 +23,14 @@ import {
 	PriceFormat,
 	PriceFormatBuiltIn,
 	SeriesOptionsMap,
+	SeriesPartialOptions,
 	SeriesPartialOptionsMap,
 	SeriesStyleOptionsMap,
 	SeriesType,
 } from '../model/series-options';
 import { Logical, Time } from '../model/time-data';
 
-import { DataUpdatesConsumer, isFulfilledData, SeriesDataItemTypeMap } from './data-consumer';
+import { DataUpdatesConsumer, isFulfilledData, SeriesDataItemTypeMap, WhitespaceData } from './data-consumer';
 import { DataLayer, DataUpdateResponse, SeriesChanges } from './data-layer';
 import { getSeriesDataCreator } from './get-series-data-creator';
 import { IChartApi, MouseEventHandler, MouseEventParams } from './ichart-api';
@@ -39,6 +43,7 @@ import {
 	barStyleDefaults,
 	baselineStyleDefaults,
 	candlestickStyleDefaults,
+	customStyleDefaults,
 	histogramStyleDefaults,
 	lineStyleDefaults,
 	seriesOptionsDefaults,
@@ -171,6 +176,27 @@ export class ChartApi implements IChartApi, DataUpdatesConsumer<SeriesType> {
 		this._chartWidget.resize(width, height, forceRepaint);
 	}
 
+	public addCustomSeries<
+		TData extends CustomData,
+		TOptions extends CustomSeriesOptions,
+		TPartialOptions extends CustomSeriesPartialOptions = SeriesPartialOptions<TOptions>
+	>(
+		customPaneView: ICustomSeriesPaneView<TData, TOptions>,
+		options?: SeriesPartialOptions<TOptions>
+	): ISeriesApi<'Custom', TData, TOptions, TPartialOptions> {
+		const paneView = ensure(customPaneView);
+		const defaults = {
+			...customStyleDefaults,
+			...paneView.defaultOptions(),
+		};
+		return this._addSeriesImpl<'Custom', TData, TOptions, TPartialOptions>(
+			'Custom',
+			defaults,
+			options,
+			paneView
+		);
+	}
+
 	public addAreaSeries(options?: AreaSeriesPartialOptions): ISeriesApi<'Area'> {
 		return this._addSeriesImpl('Area', areaStyleDefaults, options);
 	}
@@ -258,17 +284,27 @@ export class ChartApi implements IChartApi, DataUpdatesConsumer<SeriesType> {
 		return this._chartWidget.autoSizeActive();
 	}
 
-	private _addSeriesImpl<TSeries extends SeriesType>(
+	public chartElement(): HTMLDivElement {
+		return this._chartWidget.element();
+	}
+
+	private _addSeriesImpl<
+		TSeries extends SeriesType,
+		TData extends WhitespaceData = SeriesDataItemTypeMap[TSeries],
+		TOptions extends SeriesOptionsMap[TSeries] = SeriesOptionsMap[TSeries],
+		TPartialOptions extends SeriesPartialOptionsMap[TSeries] = SeriesPartialOptionsMap[TSeries]
+	>(
 		type: TSeries,
 		styleDefaults: SeriesStyleOptionsMap[TSeries],
-		options: SeriesPartialOptionsMap[TSeries] = {}
-	): ISeriesApi<TSeries> {
+		options: SeriesPartialOptionsMap[TSeries] = {},
+		customPaneView?: ICustomSeriesPaneView
+	): ISeriesApi<TSeries, TData, TOptions, TPartialOptions> {
 		patchPriceFormat(options.priceFormat);
 
 		const strictOptions = merge(clone(seriesOptionsDefaults), clone(styleDefaults), options) as SeriesOptionsMap[TSeries];
-		const series = this._chartWidget.model().createSeries(type, strictOptions);
+		const series = this._chartWidget.model().createSeries(type, strictOptions, customPaneView);
 
-		const res = new SeriesApi<TSeries>(series, this, this);
+		const res = new SeriesApi<TSeries, TData, TOptions, TPartialOptions>(series, this, this, this);
 		this._seriesMap.set(res, series);
 		this._seriesMapReversed.set(series, res);
 
@@ -291,8 +327,14 @@ export class ChartApi implements IChartApi, DataUpdatesConsumer<SeriesType> {
 	private _convertMouseParams(param: MouseEventParamsImpl): MouseEventParams {
 		const seriesData: MouseEventParams['seriesData'] = new Map();
 		param.seriesData.forEach((plotRow: SeriesPlotRow, series: Series) => {
-			const data = getSeriesDataCreator(series.seriesType())(plotRow);
-			assert(isFulfilledData(data));
+			const seriesType = series.seriesType();
+			const data = getSeriesDataCreator(seriesType)(plotRow);
+			if (seriesType !== 'Custom') {
+				assert(isFulfilledData(data));
+			} else {
+				const customWhitespaceChecker = series.customSeriesWhitespaceCheck();
+				assert(!customWhitespaceChecker || customWhitespaceChecker(data) === false);
+			}
 			seriesData.set(this._mapSeriesToApi(series), data);
 		});
 
diff --git a/src/api/data-consumer.ts b/src/api/data-consumer.ts
index c0bde4b825..be06064699 100644
--- a/src/api/data-consumer.ts
+++ b/src/api/data-consumer.ts
@@ -1,5 +1,6 @@
 import { isNumber, isString } from '../helpers/strict-type-checks';
 
+import { CustomData, CustomSeriesWhitespaceData } from '../model/icustom-series';
 import { Series } from '../model/series';
 import { SeriesType } from '../model/series-options';
 import { BusinessDay, Time, UTCTimestamp } from '../model/time-data';
@@ -45,17 +46,18 @@ export interface WhitespaceData {
 	 * The time of the data.
 	 */
 	time: Time;
+
+	/**
+	 * Additional custom values which will be ignored by the library, but
+	 * could be used by plugins.
+	 */
+	customValues?: Record<string, unknown>;
 }
 
 /**
  * A base interface for a data point of single-value series.
  */
-export interface SingleValueData {
-	/**
-	 * The time of the data.
-	 */
-	time: Time;
-
+export interface SingleValueData extends WhitespaceData {
 	/**
 	 * Price value of the data.
 	 */
@@ -140,12 +142,7 @@ export interface BaselineData extends SingleValueData {
 /**
  * Represents a bar with a {@link Time} and open, high, low, and close prices.
  */
-export interface OhlcData {
-	/**
-	 * The bar time.
-	 */
-	time: Time;
-
+export interface OhlcData extends WhitespaceData {
 	/**
 	 * The open price.
 	 */
@@ -235,6 +232,10 @@ export interface SeriesDataItemTypeMap {
 	 * The types of histogram series data.
 	 */
 	Histogram: HistogramData | WhitespaceData;
+	/**
+	 * The base types of an custom series data.
+	 */
+	Custom: CustomData | CustomSeriesWhitespaceData;
 }
 
 export interface DataUpdatesConsumer<TSeriesType extends SeriesType> {
diff --git a/src/api/data-layer.ts b/src/api/data-layer.ts
index 1fc36a5b63..0ddbfb492c 100644
--- a/src/api/data-layer.ts
+++ b/src/api/data-layer.ts
@@ -207,17 +207,6 @@ function timeScalePointTime(mergedPointData: Map<Series, SeriesPlotRow | Whitesp
 	return ensureDefined(result);
 }
 
-function saveOriginalTime<TSeriesType extends SeriesType>(data: SeriesDataItemWithOriginalTime<TSeriesType>): void {
-	// eslint-disable-next-line @typescript-eslint/tslint/config
-	if (data.originalTime === undefined) {
-		data.originalTime = data.time as unknown as OriginalTime;
-	}
-}
-
-type SeriesDataItemWithOriginalTime<TSeriesType extends SeriesType> = SeriesDataItemTypeMap[TSeriesType] & {
-	originalTime: OriginalTime;
-};
-
 export class DataLayer {
 	// note that _pointDataByTimePoint and _seriesRowsBySeries shares THE SAME objects in their values between each other
 	// it's just different kind of maps to make usages/perf better
@@ -263,15 +252,16 @@ export class DataLayer {
 		let seriesRows: (SeriesPlotRow<TSeriesType> | WhitespacePlotRow)[] = [];
 
 		if (data.length !== 0) {
-			const extendedData = data as SeriesDataItemWithOriginalTime<TSeriesType>[];
-			extendedData.forEach((i: SeriesDataItemWithOriginalTime<TSeriesType>) => saveOriginalTime(i));
+			const originalTimes = data.map((d: SeriesDataItemTypeMap[TSeriesType]) => d.time as unknown as OriginalTime);
 
 			convertStringsToBusinessDays(data);
 
 			const timeConverter = ensureNotNull(selectTimeConverter(data));
 			const createPlotRow = getSeriesPlotRowCreator(series.seriesType());
+			const dataToPlotRow = series.customSeriesPlotValuesBuilder();
+			const customWhitespaceChecker = series.customSeriesWhitespaceCheck();
 
-			seriesRows = extendedData.map((item: SeriesDataItemWithOriginalTime<TSeriesType>) => {
+			seriesRows = data.map((item: SeriesDataItemTypeMap[TSeriesType], index: number) => {
 				const time = timeConverter(item.time);
 
 				let timePointData = this._pointDataByTimePoint.get(time.timestamp);
@@ -282,7 +272,7 @@ export class DataLayer {
 					isTimeScaleAffected = true;
 				}
 
-				const row = createPlotRow(time, timePointData.index, item, item.originalTime);
+				const row = createPlotRow(time, timePointData.index, item, originalTimes[index], dataToPlotRow, customWhitespaceChecker);
 				timePointData.mapping.set(series, row);
 				return row;
 			});
@@ -327,8 +317,7 @@ export class DataLayer {
 	}
 
 	public updateSeriesData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap[TSeriesType]): DataUpdateResponse {
-		const extendedData = data as SeriesDataItemWithOriginalTime<TSeriesType>;
-		saveOriginalTime(extendedData);
+		const originalTime = data.time as unknown as OriginalTime;
 		convertStringToBusinessDay(data);
 
 		const time = ensureNotNull(selectTimeConverter([data]))(data.time);
@@ -351,7 +340,9 @@ export class DataLayer {
 		}
 
 		const createPlotRow = getSeriesPlotRowCreator(series.seriesType());
-		const plotRow = createPlotRow(time, pointDataAtTime.index, data, extendedData.originalTime);
+		const dataToPlotRow = series.customSeriesPlotValuesBuilder();
+		const customWhitespaceChecker = series.customSeriesWhitespaceCheck();
+		const plotRow = createPlotRow(time, pointDataAtTime.index, data, originalTime, dataToPlotRow, customWhitespaceChecker);
 		pointDataAtTime.mapping.set(series, plotRow);
 
 		this._updateLastSeriesRow(series, plotRow);
diff --git a/src/api/data-validators.ts b/src/api/data-validators.ts
index 2dc2ef94aa..d4b56a0066 100644
--- a/src/api/data-validators.ts
+++ b/src/api/data-validators.ts
@@ -45,7 +45,7 @@ export function checkSeriesValuesType(type: SeriesType, data: readonly SeriesDat
 
 type Checker = (item: SeriesDataItemTypeMap[SeriesType]) => void;
 
-function getChecker(type: SeriesType): Checker {
+export function getChecker(type: SeriesType): Checker {
 	switch (type) {
 		case 'Bar':
 		case 'Candlestick':
@@ -56,6 +56,9 @@ function getChecker(type: SeriesType): Checker {
 		case 'Line':
 		case 'Histogram':
 			return checkLineItem.bind(null, type);
+
+		case 'Custom':
+			return checkCustomItem.bind(null, type);
 	}
 }
 
@@ -113,3 +116,11 @@ function checkLineItem(
 		}`
 	);
 }
+
+function checkCustomItem(
+	// type: 'Custom',
+	// customItem: SeriesDataItemTypeMap[typeof type]
+): void {
+	// Nothing to check yet...
+	return;
+}
diff --git a/src/api/get-series-data-creator.ts b/src/api/get-series-data-creator.ts
index 26448936c7..55f6f2873b 100644
--- a/src/api/get-series-data-creator.ts
+++ b/src/api/get-series-data-creator.ts
@@ -1,9 +1,11 @@
+import { CustomData } from '../model/icustom-series';
 import { PlotRow, PlotRowValueIndex } from '../model/plot-data';
 import {
 	AreaPlotRow,
 	BarPlotRow,
 	BaselinePlotRow,
 	CandlestickPlotRow,
+	CustomPlotRow,
 	LinePlotRow,
 	SeriesPlotRow,
 } from '../model/series-data';
@@ -22,14 +24,18 @@ import {
 } from './data-consumer';
 
 type SeriesPlotRowToDataMap = {
-	[T in keyof SeriesDataItemTypeMap]: (plotRow: SeriesPlotRow) => SeriesDataItemTypeMap[T];
+	[T in keyof SeriesDataItemTypeMap]: (plotRow: SeriesPlotRow<T>) => SeriesDataItemTypeMap[T];
 };
 
 function singleValueData(plotRow: PlotRow): SingleValueData {
-	return {
+	const data: SingleValueData = {
 		value: plotRow.value[PlotRowValueIndex.Close],
 		time: plotRow.originalTime as unknown as Time,
 	};
+	if (plotRow.customValues !== undefined) {
+		data.customValues = plotRow.customValues;
+	}
+	return data;
 }
 
 function lineData(plotRow: LinePlotRow): LineData {
@@ -91,13 +97,17 @@ function baselineData(plotRow: BaselinePlotRow): BaselineData {
 }
 
 function ohlcData(plotRow: PlotRow): OhlcData {
-	return {
+	const data: OhlcData = {
 		open: plotRow.value[PlotRowValueIndex.Open],
 		high: plotRow.value[PlotRowValueIndex.High],
 		low: plotRow.value[PlotRowValueIndex.Low],
 		close: plotRow.value[PlotRowValueIndex.Close],
 		time: plotRow.originalTime as unknown as Time,
 	};
+	if (plotRow.customValues !== undefined) {
+		data.customValues = plotRow.customValues;
+	}
+	return data;
 }
 
 function barData(plotRow: BarPlotRow): BarData {
@@ -129,6 +139,14 @@ function candlestickData(plotRow: CandlestickPlotRow): CandlestickData {
 	return result;
 }
 
+function customData(plotRow: CustomPlotRow): CustomData {
+	const time = plotRow.originalTime as unknown as Time;
+	return {
+		...plotRow.data,
+		time,
+	};
+}
+
 const seriesPlotRowToDataMap: SeriesPlotRowToDataMap = {
 	Area: areaData,
 	Line: lineData,
@@ -136,6 +154,7 @@ const seriesPlotRowToDataMap: SeriesPlotRowToDataMap = {
 	Histogram: lineData,
 	Bar: barData,
 	Candlestick: candlestickData,
+	Custom: customData,
 };
 
 export function getSeriesDataCreator<TSeriesType extends SeriesType>(seriesType: TSeriesType): (plotRow: SeriesPlotRow<TSeriesType>) => SeriesDataItemTypeMap[TSeriesType] {
diff --git a/src/api/get-series-plot-row-creator.ts b/src/api/get-series-plot-row-creator.ts
index accb37b002..6ccb4ecac8 100644
--- a/src/api/get-series-plot-row-creator.ts
+++ b/src/api/get-series-plot-row-creator.ts
@@ -1,9 +1,12 @@
-import { PlotRow } from '../model/plot-data';
+import { ensureDefined } from '../helpers/assertions';
+
+import { CustomData } from '../model/icustom-series';
+import { PlotRow, PlotRowValue } from '../model/plot-data';
 import { SeriesPlotRow } from '../model/series-data';
 import { SeriesType } from '../model/series-options';
 import { OriginalTime, TimePoint, TimePointIndex } from '../model/time-data';
 
-import { AreaData, BarData, BaselineData, CandlestickData, HistogramData, isWhitespaceData, LineData, SeriesDataItemTypeMap } from './data-consumer';
+import { AreaData, BarData, BaselineData, CandlestickData, HistogramData, isWhitespaceData, LineData, SeriesDataItemTypeMap, WhitespaceData } from './data-consumer';
 
 function getColoredLineBasedSeriesPlotRow(time: TimePoint, index: TimePointIndex, item: LineData | HistogramData, originalTime: OriginalTime): Mutable<SeriesPlotRow<'Line' | 'Histogram'>> {
 	const val = item.value;
@@ -96,6 +99,19 @@ function getCandlestickSeriesPlotRow(time: TimePoint, index: TimePointIndex, ite
 	return res;
 }
 
+// The returned data is used for scaling the series, and providing the current value for the price scale
+export type CustomDataToPlotRowValueConverter = (item: CustomData | WhitespaceData) => number[];
+
+function getCustomSeriesPlotRow(time: TimePoint, index: TimePointIndex, item: CustomData | WhitespaceData, originalTime: OriginalTime, dataToPlotRow?: CustomDataToPlotRowValueConverter): Mutable<SeriesPlotRow<'Custom'>> {
+	const values = ensureDefined(dataToPlotRow)(item);
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const last = values[values.length - 1];
+	const value: PlotRowValue = [last, max, min, last];
+	const { time: excludedTime, color, ...data } = item as CustomData;
+	return { index, time, value, originalTime, data, color };
+}
+
 export type WhitespacePlotRow = Omit<PlotRow, 'value'>;
 
 export function isSeriesPlotRow(row: SeriesPlotRow | WhitespacePlotRow): row is SeriesPlotRow {
@@ -103,16 +119,31 @@ export function isSeriesPlotRow(row: SeriesPlotRow | WhitespacePlotRow): row is
 }
 
 type SeriesItemValueFnMap = {
-	[T in keyof SeriesDataItemTypeMap]: (time: TimePoint, index: TimePointIndex, item: SeriesDataItemTypeMap[T], originalTime: OriginalTime) => Mutable<SeriesPlotRow<T> | WhitespacePlotRow>;
+	[T in keyof SeriesDataItemTypeMap]: (time: TimePoint, index: TimePointIndex, item: SeriesDataItemTypeMap[T], originalTime: OriginalTime, dataToPlotRow?: CustomDataToPlotRowValueConverter, customIsWhitespace?: WhitespaceCheck) => Mutable<SeriesPlotRow<T> | WhitespacePlotRow>;
 };
 
-function wrapWhitespaceData<TSeriesType extends SeriesType>(createPlotRowFn: (typeof getBaselineSeriesPlotRow) | (typeof getBarSeriesPlotRow) | (typeof getCandlestickSeriesPlotRow)): SeriesItemValueFnMap[TSeriesType] {
-	return (time: TimePoint, index: TimePointIndex, bar: SeriesDataItemTypeMap[SeriesType], originalTime: OriginalTime) => {
-		if (isWhitespaceData(bar)) {
-			return { time, index, originalTime };
+function wrapCustomValues<T extends SeriesPlotRow | WhitespacePlotRow>(plotRow: Mutable<T>, bar: SeriesDataItemTypeMap[SeriesType]): Mutable<T> {
+	if (bar.customValues !== undefined) {
+		plotRow.customValues = bar.customValues;
+	}
+	return plotRow;
+}
+
+export type WhitespaceCheck = (bar: SeriesDataItemTypeMap[SeriesType]) => bar is WhitespaceData;
+function isWhitespaceDataWithCustomCheck(bar: SeriesDataItemTypeMap[SeriesType], customIsWhitespace?: WhitespaceCheck): bar is WhitespaceData {
+	if (customIsWhitespace) {
+		return customIsWhitespace(bar);
+	}
+	return isWhitespaceData(bar);
+}
+
+function wrapWhitespaceData<TSeriesType extends SeriesType>(createPlotRowFn: (typeof getBaselineSeriesPlotRow) | (typeof getBarSeriesPlotRow) | (typeof getCandlestickSeriesPlotRow) | (typeof getCustomSeriesPlotRow)): SeriesItemValueFnMap[TSeriesType] {
+	return (time: TimePoint, index: TimePointIndex, bar: SeriesDataItemTypeMap[SeriesType], originalTime: OriginalTime, dataToPlotRow?: CustomDataToPlotRowValueConverter, customIsWhitespace?: WhitespaceCheck) => {
+		if (isWhitespaceDataWithCustomCheck(bar, customIsWhitespace)) {
+			return wrapCustomValues({ time, index, originalTime }, bar);
 		}
 
-		return createPlotRowFn(time, index, bar, originalTime);
+		return wrapCustomValues(createPlotRowFn(time, index, bar, originalTime, dataToPlotRow), bar);
 	};
 }
 
@@ -123,6 +154,7 @@ const seriesPlotRowFnMap: SeriesItemValueFnMap = {
 	Baseline: wrapWhitespaceData(getBaselineSeriesPlotRow),
 	Histogram: wrapWhitespaceData(getColoredLineBasedSeriesPlotRow),
 	Line: wrapWhitespaceData(getColoredLineBasedSeriesPlotRow),
+	Custom: wrapWhitespaceData(getCustomSeriesPlotRow),
 };
 
 export function getSeriesPlotRowCreator<TSeriesType extends SeriesType>(seriesType: TSeriesType): SeriesItemValueFnMap[TSeriesType] {
diff --git a/src/api/ichart-api.ts b/src/api/ichart-api.ts
index 54562a9358..a16385c1cc 100644
--- a/src/api/ichart-api.ts
+++ b/src/api/ichart-api.ts
@@ -1,20 +1,23 @@
 import { DeepPartial } from '../helpers/strict-type-checks';
 
 import { ChartOptions } from '../model/chart-model';
+import { CustomData, ICustomSeriesPaneView } from '../model/icustom-series';
 import { Point } from '../model/point';
 import {
 	AreaSeriesPartialOptions,
 	BarSeriesPartialOptions,
 	BaselineSeriesPartialOptions,
 	CandlestickSeriesPartialOptions,
+	CustomSeriesOptions,
 	HistogramSeriesPartialOptions,
 	LineSeriesPartialOptions,
+	SeriesPartialOptions,
 	SeriesType,
 } from '../model/series-options';
 import { Logical, Time } from '../model/time-data';
 import { TouchMouseEventData } from '../model/touch-mouse-event-data';
 
-import { BarData, HistogramData, LineData } from './data-consumer';
+import { BarData, HistogramData, LineData, WhitespaceData } from './data-consumer';
 import { IPriceScaleApi } from './iprice-scale-api';
 import { ISeriesApi } from './iseries-api';
 import { ITimeScaleApi } from './itime-scale-api';
@@ -45,7 +48,7 @@ export interface MouseEventParams {
 	 * Keys of the map are {@link ISeriesApi} instances. Values are prices.
 	 * Values of the map are original data items
 	 */
-	seriesData: Map<ISeriesApi<SeriesType>, BarData | LineData | HistogramData>;
+	seriesData: Map<ISeriesApi<SeriesType>, BarData | LineData | HistogramData | CustomData>;
 	/**
 	 * The {@link ISeriesApi} for the series at the point of the mouse event.
 	 */
@@ -86,6 +89,27 @@ export interface IChartApi {
 	 */
 	resize(width: number, height: number, forceRepaint?: boolean): void;
 
+	/**
+	 * Creates a custom series with specified parameters.
+	 *
+	 * A custom series is a generic series which can be extended with a custom renderer to
+	 * implement chart types which the library doesn't support by default.
+	 *
+	 * @param customPaneView - A custom series pane view which implements the custom renderer.
+	 * @param customOptions - Customization parameters of the series being created.
+	 * ```js
+	 * const series = chart.addCustomSeries(myCustomPaneView);
+	 * ```
+	 */
+	addCustomSeries<
+		TData extends CustomData,
+		TOptions extends CustomSeriesOptions,
+		TPartialOptions extends SeriesPartialOptions<TOptions> = SeriesPartialOptions<TOptions>
+	>(
+		customPaneView: ICustomSeriesPaneView<TData, TOptions>,
+		customOptions?: SeriesPartialOptions<TOptions>
+	): ISeriesApi<'Custom', TData | WhitespaceData, TOptions, TPartialOptions>;
+
 	/**
 	 * Creates an area series with specified parameters.
 	 *
@@ -271,4 +295,12 @@ export interface IChartApi {
 	 * @returns Whether the `autoSize` option is enabled and the active.
 	 */
 	autoSizeActive(): boolean;
+
+	/**
+	 * Returns the generated div element containing the chart. This can be used for adding your own additional event listeners, or for measuring the
+	 * elements dimensions and position within the document.
+	 *
+	 * @returns generated div element containing the chart.
+	 */
+	chartElement(): HTMLDivElement;
 }
diff --git a/src/api/iseries-api.ts b/src/api/iseries-api.ts
index 4708e2454a..4dbe85b4c4 100644
--- a/src/api/iseries-api.ts
+++ b/src/api/iseries-api.ts
@@ -15,6 +15,17 @@ import { Range, Time } from '../model/time-data';
 import { SeriesDataItemTypeMap } from './data-consumer';
 import { IPriceLine } from './iprice-line';
 import { IPriceScaleApi } from './iprice-scale-api';
+import { ISeriesPrimitive } from './iseries-primitive-api';
+
+/**
+ * The extent of the data change.
+ */
+export type DataChangedScope = 'full' | 'update';
+
+/**
+ * A custom function use to handle data changed events.
+ */
+export type DataChangedHandler = (scope: DataChangedScope) => void;
 
 /**
  * Represents a range of bars and the number of bars outside the range.
@@ -40,7 +51,12 @@ export interface BarsInfo extends Partial<Range<Time>> {
 /**
  * Represents the interface for interacting with series.
  */
-export interface ISeriesApi<TSeriesType extends SeriesType> {
+export interface ISeriesApi<
+	TSeriesType extends SeriesType,
+	TData = SeriesDataItemTypeMap[TSeriesType],
+	TOptions = SeriesOptionsMap[TSeriesType],
+	TPartialOptions = SeriesPartialOptionsMap[TSeriesType],
+	> {
 	/**
 	 * Returns current price formatter
 	 *
@@ -97,14 +113,14 @@ export interface ISeriesApi<TSeriesType extends SeriesType> {
 	 *
 	 * @param options - Any subset of options.
 	 */
-	applyOptions(options: SeriesPartialOptionsMap[TSeriesType]): void;
+	applyOptions(options: TPartialOptions): void;
 
 	/**
 	 * Returns currently applied options
 	 *
 	 * @returns Full set of currently applied options, including defaults
 	 */
-	options(): Readonly<SeriesOptionsMap[TSeriesType]>;
+	options(): Readonly<TOptions>;
 
 	/**
 	 * Returns interface of the price scale the series is currently attached
@@ -132,7 +148,7 @@ export interface ISeriesApi<TSeriesType extends SeriesType> {
 	 * ]);
 	 * ```
 	 */
-	setData(data: SeriesDataItemTypeMap[TSeriesType][]): void;
+	setData(data: TData[]): void;
 
 	/**
 	 * Adds new data item to the existing set (or updates the latest item if times of the passed/latest items are equal).
@@ -157,7 +173,7 @@ export interface ISeriesApi<TSeriesType extends SeriesType> {
 	 * });
 	 * ```
 	 */
-	update(bar: SeriesDataItemTypeMap[TSeriesType]): void;
+	update(bar: TData): void;
 
 	/**
 	 * Returns a bar data by provided logical index.
@@ -170,7 +186,46 @@ export interface ISeriesApi<TSeriesType extends SeriesType> {
 	 * const originalData = series.dataByIndex(10, LightweightCharts.MismatchDirection.NearestLeft);
 	 * ```
 	 */
-	dataByIndex(logicalIndex: number, mismatchDirection?: MismatchDirection): SeriesDataItemTypeMap[TSeriesType] | null;
+	dataByIndex(logicalIndex: number, mismatchDirection?: MismatchDirection): TData | null;
+
+	/**
+	 * Returns all the bar data for the series.
+	 *
+	 * @returns Original data items provided via setData or update methods.
+	 * @example
+	 * ```js
+	 * const originalData = series.data();
+	 * ```
+	 */
+	data(): readonly TData[];
+
+	/**
+	 * Subscribe to the data changed event. This event is fired whenever the `update` or `setData` method is evoked
+	 * on the series.
+	 *
+	 * @param handler - Handler to be called on a data changed event.
+	 * @example
+	 * ```js
+	 * function myHandler() {
+	 *     const data = series.data();
+	 *     console.log(`The data has changed. New Data length: ${data.length}`);
+	 * }
+	 *
+	 * series.subscribeDataChanged(myHandler);
+	 * ```
+	 */
+	subscribeDataChanged(handler: DataChangedHandler): void;
+
+	/**
+	 * Unsubscribe a handler that was previously subscribed using {@link subscribeDataChanged}.
+	 *
+	 * @param handler - Previously subscribed handler
+	 * @example
+	 * ```js
+	 * chart.unsubscribeDataChanged(myHandler);
+	 * ```
+	 */
+	unsubscribeDataChanged(handler: DataChangedHandler): void;
 
 	/**
 	 * Allows to set/replace all existing series markers with new ones.
@@ -263,4 +318,19 @@ export interface ISeriesApi<TSeriesType extends SeriesType> {
 	 * ```
 	 */
 	seriesType(): TSeriesType;
+
+	/**
+	 * Attaches additional drawing primitive to the series
+	 *
+	 * @param primitive - any implementation of ISeriesPrimitive interface
+	 */
+	attachPrimitive(primitive: ISeriesPrimitive): void;
+
+	/**
+	 * Detaches additional drawing primitive from the series
+	 *
+	 * @param primitive - implementation of ISeriesPrimitive interface attached before
+	 * Does nothing if specified primitive was not attached
+	 */
+	detachPrimitive(primitive: ISeriesPrimitive): void;
 }
diff --git a/src/api/iseries-primitive-api.ts b/src/api/iseries-primitive-api.ts
new file mode 100644
index 0000000000..624fce0cb9
--- /dev/null
+++ b/src/api/iseries-primitive-api.ts
@@ -0,0 +1,33 @@
+import { ISeriesPrimitiveBase } from '../model/iseries-primitive';
+import { SeriesOptionsMap, SeriesType } from '../model/series-options';
+
+import { IChartApi } from './ichart-api';
+import { ISeriesApi } from './iseries-api';
+
+/**
+ * Object containing references to the chart and series instances, and a requestUpdate method for triggering
+ * a refresh of the chart.
+ */
+export interface SeriesAttachedParameter<
+	TSeriesType extends SeriesType = keyof SeriesOptionsMap
+> {
+	/**
+	 * Chart instance.
+	 */
+	chart: IChartApi;
+	/**
+	 * Series to which the Primitive is attached.
+	 */
+	series: ISeriesApi<TSeriesType>;
+	/**
+	 * Request an update (redraw the chart)
+	 */
+	requestUpdate: () => void;
+}
+
+/**
+ * Interface for series primitives. It must be implemented to add some external graphics to series.
+ */
+export type ISeriesPrimitive = ISeriesPrimitiveBase<
+	SeriesAttachedParameter<SeriesType>
+>;
diff --git a/src/api/options/series-options-defaults.ts b/src/api/options/series-options-defaults.ts
index 36bfec967e..0b57034123 100644
--- a/src/api/options/series-options-defaults.ts
+++ b/src/api/options/series-options-defaults.ts
@@ -3,6 +3,7 @@ import {
 	BarStyleOptions,
 	BaselineStyleOptions,
 	CandlestickStyleOptions,
+	CustomStyleOptions,
 	HistogramStyleOptions,
 	LastPriceAnimationMode,
 	LineStyleOptions,
@@ -98,6 +99,10 @@ export const histogramStyleDefaults: HistogramStyleOptions = {
 	base: 0,
 };
 
+export const customStyleDefaults: CustomStyleOptions = {
+	color: '#2196f3',
+};
+
 export const seriesOptionsDefaults: SeriesOptionsCommon = {
 	title: '',
 	visible: true,
diff --git a/src/api/series-api.ts b/src/api/series-api.ts
index 3118106e63..fda9b228b7 100644
--- a/src/api/series-api.ts
+++ b/src/api/series-api.ts
@@ -1,14 +1,18 @@
 import { IPriceFormatter } from '../formatters/iprice-formatter';
 
 import { ensureNotNull } from '../helpers/assertions';
+import { Delegate } from '../helpers/delegate';
+import { IDestroyable } from '../helpers/idestroyable';
 import { clone, merge } from '../helpers/strict-type-checks';
 
 import { BarPrice } from '../model/bar';
 import { Coordinate } from '../model/coordinate';
+import { ISeriesPrimitiveBase } from '../model/iseries-primitive';
 import { MismatchDirection } from '../model/plot-list';
 import { CreatePriceLineOptions, PriceLineOptions } from '../model/price-line-options';
 import { RangeImpl } from '../model/range-impl';
 import { Series } from '../model/series';
+import { SeriesPlotRow } from '../model/series-data';
 import { SeriesMarker } from '../model/series-markers';
 import {
 	SeriesOptionsMap,
@@ -19,26 +23,42 @@ import { Logical, OriginalTime, Range, Time, TimePoint, TimePointIndex } from '.
 import { TimeScaleVisibleRange } from '../model/time-scale-visible-range';
 
 import { IPriceScaleApiProvider } from './chart-api';
-import { DataUpdatesConsumer, SeriesDataItemTypeMap } from './data-consumer';
+import { DataUpdatesConsumer, SeriesDataItemTypeMap, WhitespaceData } from './data-consumer';
 import { convertTime } from './data-layer';
 import { checkItemsAreOrdered, checkPriceLineOptions, checkSeriesValuesType } from './data-validators';
 import { getSeriesDataCreator } from './get-series-data-creator';
+import { type IChartApi } from './ichart-api';
 import { IPriceLine } from './iprice-line';
 import { IPriceScaleApi } from './iprice-scale-api';
-import { BarsInfo, ISeriesApi } from './iseries-api';
+import { BarsInfo, DataChangedHandler, DataChangedScope, ISeriesApi } from './iseries-api';
+import { ISeriesPrimitive } from './iseries-primitive-api';
 import { priceLineOptionsDefaults } from './options/price-line-options-defaults';
 import { PriceLine } from './price-line-api';
 
-export class SeriesApi<TSeriesType extends SeriesType> implements ISeriesApi<TSeriesType> {
+export class SeriesApi<
+	TSeriesType extends SeriesType,
+	TData extends WhitespaceData = SeriesDataItemTypeMap[TSeriesType],
+	TOptions extends SeriesOptionsMap[TSeriesType] = SeriesOptionsMap[TSeriesType],
+	TPartialOptions extends SeriesPartialOptionsMap[TSeriesType] = SeriesPartialOptionsMap[TSeriesType]
+> implements
+		ISeriesApi<TSeriesType, TData, TOptions, TPartialOptions>,
+		IDestroyable {
 	protected _series: Series<TSeriesType>;
 	protected _dataUpdatesConsumer: DataUpdatesConsumer<TSeriesType>;
+	protected readonly _chartApi: IChartApi;
 
 	private readonly _priceScaleApiProvider: IPriceScaleApiProvider;
+	private readonly _dataChangedDelegate: Delegate<DataChangedScope> = new Delegate();
 
-	public constructor(series: Series<TSeriesType>, dataUpdatesConsumer: DataUpdatesConsumer<TSeriesType>, priceScaleApiProvider: IPriceScaleApiProvider) {
+	public constructor(series: Series<TSeriesType>, dataUpdatesConsumer: DataUpdatesConsumer<TSeriesType>, priceScaleApiProvider: IPriceScaleApiProvider, chartApi: IChartApi) {
 		this._series = series;
 		this._dataUpdatesConsumer = dataUpdatesConsumer;
 		this._priceScaleApiProvider = priceScaleApiProvider;
+		this._chartApi = chartApi;
+	}
+
+	public destroy(): void {
+		this._dataChangedDelegate.destroy();
 	}
 
 	public priceFormatter(): IPriceFormatter {
@@ -114,27 +134,43 @@ export class SeriesApi<TSeriesType extends SeriesType> implements ISeriesApi<TSe
 		return result;
 	}
 
-	public setData(data: SeriesDataItemTypeMap[TSeriesType][]): void {
+	public setData(data: TData[]): void {
 		checkItemsAreOrdered(data);
 		checkSeriesValuesType(this._series.seriesType(), data);
 
 		this._dataUpdatesConsumer.applyNewData(this._series, data);
+		this._onDataChanged('full');
 	}
 
-	public update(bar: SeriesDataItemTypeMap[TSeriesType]): void {
+	public update(bar: TData): void {
 		checkSeriesValuesType(this._series.seriesType(), [bar]);
 
 		this._dataUpdatesConsumer.updateData(this._series, bar);
+		this._onDataChanged('update');
 	}
 
-	public dataByIndex(logicalIndex: number, mismatchDirection?: MismatchDirection): SeriesDataItemTypeMap[TSeriesType] | null {
+	public dataByIndex(logicalIndex: number, mismatchDirection?: MismatchDirection): TData | null {
 		const data = this._series.bars().search(logicalIndex as unknown as TimePointIndex, mismatchDirection);
 		if (data === null) {
 			// actually it can be a whitespace
 			return null;
 		}
 
-		return getSeriesDataCreator(this.seriesType())(data);
+		return getSeriesDataCreator(this.seriesType())(data) as TData | null;
+	}
+
+	public data(): readonly TData[] {
+		const seriesCreator = getSeriesDataCreator(this.seriesType());
+		const rows = this._series.bars().rows();
+		return rows.map((row: SeriesPlotRow<TSeriesType>) => seriesCreator(row) as TData);
+	}
+
+	public subscribeDataChanged(handler: DataChangedHandler): void {
+		this._dataChangedDelegate.subscribe(handler);
+	}
+
+	public unsubscribeDataChanged(handler: DataChangedHandler): void {
+		this._dataChangedDelegate.unsubscribe(handler);
 	}
 
 	public setMarkers(data: SeriesMarker<Time>[]): void {
@@ -158,12 +194,12 @@ export class SeriesApi<TSeriesType extends SeriesType> implements ISeriesApi<TSe
 		});
 	}
 
-	public applyOptions(options: SeriesPartialOptionsMap[TSeriesType]): void {
+	public applyOptions(options: TPartialOptions): void {
 		this._series.applyOptions(options);
 	}
 
-	public options(): Readonly<SeriesOptionsMap[TSeriesType]> {
-		return clone(this._series.options());
+	public options(): Readonly<TOptions> {
+		return clone(this._series.options() as TOptions);
 	}
 
 	public priceScale(): IPriceScaleApi {
@@ -185,4 +221,30 @@ export class SeriesApi<TSeriesType extends SeriesType> implements ISeriesApi<TSe
 	public seriesType(): TSeriesType {
 		return this._series.seriesType();
 	}
+
+	public attachPrimitive(primitive: ISeriesPrimitive): void {
+		// at this point we cast the generic to unknown because we
+		// don't want the model to know the types of the API (◑_◑)
+		this._series.attachPrimitive(primitive as ISeriesPrimitiveBase<unknown>);
+		if (primitive.attached) {
+			primitive.attached({
+				chart: this._chartApi,
+				series: this,
+				requestUpdate: () => this._series.model().fullUpdate(),
+			});
+		}
+	}
+
+	public detachPrimitive(primitive: ISeriesPrimitive): void {
+		this._series.detachPrimitive(primitive as ISeriesPrimitiveBase<unknown>);
+		if (primitive.detached) {
+			primitive.detached();
+		}
+	}
+
+	private _onDataChanged(scope: DataChangedScope): void {
+		if (this._dataChangedDelegate.hasListeners()) {
+			this._dataChangedDelegate.fire(scope);
+		}
+	}
 }
diff --git a/src/api/time-scale-api.ts b/src/api/time-scale-api.ts
index 7482ccec58..b82cddf83f 100644
--- a/src/api/time-scale-api.ts
+++ b/src/api/time-scale-api.ts
@@ -5,7 +5,7 @@ import { TimeAxisWidget } from '../gui/time-axis-widget';
 import { assert } from '../helpers/assertions';
 import { Delegate } from '../helpers/delegate';
 import { IDestroyable } from '../helpers/idestroyable';
-import { clone, DeepPartial } from '../helpers/strict-type-checks';
+import { DeepPartial } from '../helpers/strict-type-checks';
 
 import { ChartModel } from '../model/chart-model';
 import { Coordinate } from '../model/coordinate';
@@ -191,7 +191,10 @@ export class TimeScaleApi implements ITimeScaleApi, IDestroyable {
 	}
 
 	public options(): Readonly<TimeScaleOptions> {
-		return clone(this._timeScale.options());
+		return {
+			...this._timeScale.options(),
+			barSpacing: this._timeScale.barSpacing(),
+		};
 	}
 
 	private _onVisibleBarsChanged(): void {
diff --git a/src/gui/chart-widget.ts b/src/gui/chart-widget.ts
index 5cd01d5cd6..da800c45b5 100644
--- a/src/gui/chart-widget.ts
+++ b/src/gui/chart-widget.ts
@@ -53,7 +53,7 @@ export class ChartWidget implements IDestroyable {
 	private _width: number = 0;
 	private _leftPriceAxisWidth: number = 0;
 	private _rightPriceAxisWidth: number = 0;
-	private _element: HTMLElement;
+	private _element: HTMLDivElement;
 	private readonly _tableElement: HTMLElement;
 	private _timeAxisWidget: TimeAxisWidget;
 	private _invalidateMask: InvalidateMask | null = null;
@@ -64,6 +64,7 @@ export class ChartWidget implements IDestroyable {
 	private _observer: ResizeObserver | null = null;
 
 	private _container: HTMLElement;
+	private _cursorStyleOverride: string | null = null;
 
 	public constructor(container: HTMLElement, options: ChartOptionsInternal) {
 		this._container = container;
@@ -280,6 +281,23 @@ export class ChartWidget implements IDestroyable {
 		return this._options.autoSize && this._observer !== null;
 	}
 
+	public element(): HTMLDivElement {
+		return this._element;
+	}
+
+	public setCursorStyle(style: string | null): void {
+		this._cursorStyleOverride = style;
+		if (this._cursorStyleOverride) {
+			this.element().style.setProperty('cursor', style);
+		} else {
+			this.element().style.removeProperty('cursor');
+		}
+	}
+
+	public getCursorOverrideStyle(): string | null {
+		return this._cursorStyleOverride;
+	}
+
 	// eslint-disable-next-line complexity
 	private _applyAutoSizeOptions(options: DeepPartial<ChartOptionsInternal>): void {
 		if (options.autoSize === undefined && this._observer && (options.width !== undefined || options.height !== undefined)) {
@@ -802,6 +820,7 @@ export class ChartWidget implements IDestroyable {
 		if (this._observer !== null) {
 			this._observer.disconnect();
 		}
+		this._observer = null;
 	}
 }
 
diff --git a/src/gui/draw-functions.ts b/src/gui/draw-functions.ts
new file mode 100644
index 0000000000..b03d54455c
--- /dev/null
+++ b/src/gui/draw-functions.ts
@@ -0,0 +1,52 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+import { IDataSource } from '../model/idata-source';
+import { Pane } from '../model/pane';
+import { IPaneRenderer } from '../renderers/ipane-renderer';
+
+import { IPaneViewsGetter } from './ipane-view-getter';
+
+export type DrawFunction = (
+	renderer: IPaneRenderer,
+	target: CanvasRenderingTarget2D,
+	isHovered: boolean,
+	hitTestData?: unknown
+) => void;
+
+export function drawBackground(
+	renderer: IPaneRenderer,
+	target: CanvasRenderingTarget2D,
+	isHovered: boolean,
+	hitTestData?: unknown
+): void {
+	if (renderer.drawBackground) {
+		renderer.drawBackground(target, isHovered, hitTestData);
+	}
+}
+
+export function drawForeground(
+	renderer: IPaneRenderer,
+	target: CanvasRenderingTarget2D,
+	isHovered: boolean,
+	hitTestData?: unknown
+): void {
+	renderer.draw(target, isHovered, hitTestData);
+}
+
+type DrawRendererFn = (renderer: IPaneRenderer) => void;
+
+export function drawSourcePaneViews(
+	paneViewsGetter: IPaneViewsGetter,
+	drawRendererFn: DrawRendererFn,
+	source: IDataSource,
+	pane: Pane
+): void {
+	const paneViews = paneViewsGetter(source, pane);
+
+	for (const paneView of paneViews) {
+		const renderer = paneView.renderer();
+		if (renderer !== null) {
+			drawRendererFn(renderer);
+		}
+	}
+}
diff --git a/src/gui/iaxis-view-getters.ts b/src/gui/iaxis-view-getters.ts
new file mode 100644
index 0000000000..518cae44ce
--- /dev/null
+++ b/src/gui/iaxis-view-getters.ts
@@ -0,0 +1,9 @@
+import { IDataSource } from '../model/idata-source';
+import { IAxisView } from '../views/pane/iaxis-view';
+
+type IAxisViewsGetter = (
+	source: IDataSource
+) => readonly IAxisView[];
+
+export type IPriceAxisViewsGetter = IAxisViewsGetter;
+export type ITimeAxisViewsGetter = IAxisViewsGetter;
diff --git a/src/gui/ipane-view-getter.ts b/src/gui/ipane-view-getter.ts
new file mode 100644
index 0000000000..5c365c56c1
--- /dev/null
+++ b/src/gui/ipane-view-getter.ts
@@ -0,0 +1,10 @@
+import {
+	IDataSource,
+} from '../model/idata-source';
+import { Pane } from '../model/pane';
+import { IPaneView } from '../views/pane/ipane-view';
+
+export type IPaneViewsGetter = (
+	source: IDataSource,
+	pane: Pane
+) => readonly IPaneView[];
diff --git a/src/gui/pane-hit-test.ts b/src/gui/pane-hit-test.ts
new file mode 100644
index 0000000000..e8014139dd
--- /dev/null
+++ b/src/gui/pane-hit-test.ts
@@ -0,0 +1,139 @@
+import { HoveredObject } from '../model/chart-model';
+import { Coordinate } from '../model/coordinate';
+import { IPriceDataSource } from '../model/iprice-data-source';
+import {
+	PrimitiveHoveredItem,
+	SeriesPrimitivePaneViewZOrder,
+} from '../model/iseries-primitive';
+import { Pane } from '../model/pane';
+import { IPaneView } from '../views/pane/ipane-view';
+
+export interface HitTestResult {
+	source: IPriceDataSource;
+	object?: HoveredObject;
+	view?: IPaneView;
+	cursorStyle?: string;
+}
+
+export interface HitTestPaneViewResult {
+	view: IPaneView;
+	object?: HoveredObject;
+}
+
+interface BestPrimitiveHit {
+	hit: PrimitiveHoveredItem;
+	source: IPriceDataSource;
+}
+
+// returns true if item is above reference
+function comparePrimitiveZOrder(
+	item: SeriesPrimitivePaneViewZOrder,
+	reference?: SeriesPrimitivePaneViewZOrder
+): boolean {
+	return (
+		!reference ||
+		(item === 'top' && reference !== 'top') ||
+		(item === 'normal' && reference === 'bottom')
+	);
+}
+
+function findBestPrimitiveHitTest(
+	sources: readonly IPriceDataSource[],
+	x: Coordinate,
+	y: Coordinate
+): BestPrimitiveHit | null {
+	let bestPrimitiveHit: PrimitiveHoveredItem | undefined;
+	let bestHitSource: IPriceDataSource | undefined;
+	for (const source of sources) {
+		const primitiveHitResults = source.primitiveHitTest?.(x, y) ?? [];
+		for (const hitResult of primitiveHitResults) {
+			if (comparePrimitiveZOrder(hitResult.zOrder, bestPrimitiveHit?.zOrder)) {
+				bestPrimitiveHit = hitResult;
+				bestHitSource = source;
+			}
+		}
+	}
+	if (!bestPrimitiveHit || !bestHitSource) {
+		return null;
+	}
+	return {
+		hit: bestPrimitiveHit,
+		source: bestHitSource,
+	};
+}
+
+function convertPrimitiveHitResult(
+	primitiveHit: BestPrimitiveHit
+): HitTestResult {
+	return {
+		source: primitiveHit.source,
+		object: {
+			externalId: primitiveHit.hit.externalId,
+		},
+		cursorStyle: primitiveHit.hit.cursorStyle,
+	};
+}
+
+/**
+ * Performs a hit test on a collection of pane views to determine which view and object
+ * is located at a given coordinate (x, y) and returns the matching pane view and
+ * hit-tested result object, or null if no match is found.
+ */
+function hitTestPaneView(
+	paneViews: readonly IPaneView[],
+	x: Coordinate,
+	y: Coordinate
+): HitTestPaneViewResult | null {
+	for (const paneView of paneViews) {
+		const renderer = paneView.renderer();
+		if (renderer !== null && renderer.hitTest) {
+			const result = renderer.hitTest(x, y);
+			if (result !== null) {
+				return {
+					view: paneView,
+					object: result,
+				};
+			}
+		}
+	}
+
+	return null;
+}
+
+export function hitTestPane(
+	pane: Pane,
+	x: Coordinate,
+	y: Coordinate
+): HitTestResult | null {
+	const sources = pane.orderedSources();
+	const bestPrimitiveHit = findBestPrimitiveHitTest(sources, x, y);
+	if (bestPrimitiveHit?.hit.zOrder === 'top') {
+        // a primitive hit on the 'top' layer will always beat the built-in hit tests
+        // (on normal layer) so we can return early here.
+		return convertPrimitiveHitResult(bestPrimitiveHit);
+	}
+	for (const source of sources) {
+		if (bestPrimitiveHit && bestPrimitiveHit.source === source && bestPrimitiveHit.hit.zOrder !== 'bottom' && !bestPrimitiveHit.hit.isBackground) {
+            // a primitive will be drawn above a built-in item like a series marker
+            // therefore it takes precedence here.
+			return convertPrimitiveHitResult(bestPrimitiveHit);
+		}
+		const sourceResult = hitTestPaneView(source.paneViews(pane), x, y);
+		if (sourceResult !== null) {
+			return {
+				source: source,
+				view: sourceResult.view,
+				object: sourceResult.object,
+			};
+		}
+		if (bestPrimitiveHit && bestPrimitiveHit.source === source && bestPrimitiveHit.hit.zOrder !== 'bottom' && bestPrimitiveHit.hit.isBackground) {
+			return convertPrimitiveHitResult(bestPrimitiveHit);
+		}
+	}
+	if (bestPrimitiveHit?.hit) {
+        // return primitive hits for the 'bottom' layer
+		return convertPrimitiveHitResult(bestPrimitiveHit);
+	}
+
+	return null;
+}
diff --git a/src/gui/pane-widget.ts b/src/gui/pane-widget.ts
index 9c63dadfe4..32820b6dd0 100644
--- a/src/gui/pane-widget.ts
+++ b/src/gui/pane-widget.ts
@@ -14,11 +14,10 @@ import { Delegate } from '../helpers/delegate';
 import { IDestroyable } from '../helpers/idestroyable';
 import { ISubscription } from '../helpers/isubscription';
 
-import { ChartModel, HoveredObject, TrackingModeExitMode } from '../model/chart-model';
+import { ChartModel, TrackingModeExitMode } from '../model/chart-model';
 import { Coordinate } from '../model/coordinate';
 import { IDataSource } from '../model/idata-source';
 import { InvalidationLevel } from '../model/invalidate-mask';
-import { IPriceDataSource } from '../model/iprice-data-source';
 import { KineticAnimation } from '../model/kinetic-animation';
 import { Pane } from '../model/pane';
 import { Point } from '../model/point';
@@ -29,7 +28,10 @@ import { IPaneView } from '../views/pane/ipane-view';
 
 import { createBoundCanvas } from './canvas-utils';
 import { ChartWidget } from './chart-widget';
+import { drawBackground, drawForeground, DrawFunction, drawSourcePaneViews } from './draw-functions';
+import { IPaneViewsGetter } from './ipane-view-getter';
 import { MouseEventHandler, MouseEventHandlerEventBase, MouseEventHandlerMouseEvent, MouseEventHandlers, MouseEventHandlerTouchEvent, Position, TouchMouseEvent } from './mouse-event-handler';
+import { hitTestPane, HitTestResult } from './pane-hit-test';
 import { PriceAxisWidget, PriceAxisWidgetSide } from './price-axis-widget';
 
 const enum KineticScrollConstants {
@@ -39,41 +41,17 @@ const enum KineticScrollConstants {
 	ScrollMinMove = 15,
 }
 
-type DrawFunction = (renderer: IPaneRenderer, target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown) => void;
-
-function drawBackground(renderer: IPaneRenderer, target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void {
-	if (renderer.drawBackground) {
-		renderer.drawBackground(target, isHovered, hitTestData);
-	}
-}
-
-function drawForeground(renderer: IPaneRenderer, target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void {
-	renderer.draw(target, isHovered, hitTestData);
+function sourceBottomPaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
+	return source.bottomPaneViews?.(pane) ?? [];
 }
-
-type PaneViewsGetter = (source: IDataSource, pane: Pane) => readonly IPaneView[];
-
 function sourcePaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
-	return source.paneViews(pane);
+	return source.paneViews?.(pane) ?? [];
 }
-
 function sourceLabelPaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
-	return source.labelPaneViews(pane);
+	return source.labelPaneViews?.(pane) ?? [];
 }
-
 function sourceTopPaneViews(source: IDataSource, pane: Pane): readonly IPaneView[] {
-	return source.topPaneViews !== undefined ? source.topPaneViews(pane) : [];
-}
-
-export interface HitTestResult {
-	source: IPriceDataSource;
-	object?: HoveredObject;
-	view: IPaneView;
-}
-
-interface HitTestPaneViewResult {
-	view: IPaneView;
-	object?: HoveredObject;
+	return source.topPaneViews?.(pane) ?? [];
 }
 
 interface StartScrollPosition extends Point {
@@ -276,6 +254,7 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		const y = event.localY;
 		this._setCrosshairPosition(x, y, event);
 		const hitTest = this.hitTest(x, y);
+		this._chart.setCursorStyle(hitTest?.cursorStyle ?? null);
 		this._model().setHoveredSource(hitTest && { source: hitTest.source, object: hitTest.object });
 	}
 
@@ -397,19 +376,7 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 			return null;
 		}
 
-		const sources = state.orderedSources();
-		for (const source of sources) {
-			const sourceResult = this._hitTestPaneView(source.paneViews(state), x, y);
-			if (sourceResult !== null) {
-				return {
-					source: source,
-					view: sourceResult.view,
-					object: sourceResult.object,
-				};
-			}
-		}
-
-		return null;
+		return hitTestPane(state, x, y);
 	}
 
 	public setPriceAxisSize(width: number, position: PriceAxisWidgetSide): void {
@@ -493,6 +460,7 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 					this._drawBackground(scope);
 				});
 				if (this._state) {
+					this._drawSources(target, sourceBottomPaneViews);
 					this._drawGrid(target);
 					this._drawWatermark(target);
 					this._drawSources(target, sourcePaneViews);
@@ -507,8 +475,8 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 			topTarget.useBitmapCoordinateSpace(({ context: ctx, bitmapSize }: BitmapCoordinatesRenderingScope) => {
 				ctx.clearRect(0, 0, bitmapSize.width, bitmapSize.height);
 			});
-			this._drawSources(topTarget, sourceTopPaneViews);
 			this._drawCrosshair(topTarget);
+			this._drawSources(topTarget, sourceTopPaneViews);
 		}
 	}
 
@@ -520,6 +488,10 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		return this._rightPriceAxisWidget;
 	}
 
+	public drawAdditionalSources(target: CanvasRenderingTarget2D, paneViewsGetter: IPaneViewsGetter): void {
+		this._drawSources(target, paneViewsGetter);
+	}
+
 	private _onStateDestroyed(): void {
 		if (this._state !== null) {
 			this._state.onDestroyed().unsubscribeAll(this);
@@ -569,7 +541,7 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		this._drawSourceImpl(target, sourcePaneViews, drawForeground, this._model().crosshairSource());
 	}
 
-	private _drawSources(target: CanvasRenderingTarget2D, paneViewsGetter: PaneViewsGetter): void {
+	private _drawSources(target: CanvasRenderingTarget2D, paneViewsGetter: IPaneViewsGetter): void {
 		const state = ensureNotNull(this._state);
 		const sources = state.orderedSources();
 
@@ -584,41 +556,19 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 
 	private _drawSourceImpl(
 		target: CanvasRenderingTarget2D,
-		paneViewsGetter: PaneViewsGetter,
+		paneViewsGetter: IPaneViewsGetter,
 		drawFn: DrawFunction,
 		source: IDataSource
 	): void {
 		const state = ensureNotNull(this._state);
-		const paneViews = paneViewsGetter(source, state);
 		const hoveredSource = state.model().hoveredSource();
 		const isHovered = hoveredSource !== null && hoveredSource.source === source;
 		const objecId = hoveredSource !== null && isHovered && hoveredSource.object !== undefined
 			? hoveredSource.object.hitTestData
 			: undefined;
 
-		for (const paneView of paneViews) {
-			const renderer = paneView.renderer();
-			if (renderer !== null) {
-				drawFn(renderer, target, isHovered, objecId);
-			}
-		}
-	}
-
-	private _hitTestPaneView(paneViews: readonly IPaneView[], x: Coordinate, y: Coordinate): HitTestPaneViewResult | null {
-		for (const paneView of paneViews) {
-			const renderer = paneView.renderer();
-			if (renderer !== null && renderer.hitTest) {
-				const result = renderer.hitTest(x, y);
-				if (result !== null) {
-					return {
-						view: paneView,
-						object: result,
-					};
-				}
-			}
-		}
-
-		return null;
+		const drawRendererFn = (renderer: IPaneRenderer) => drawFn(renderer, target, isHovered, objecId);
+		drawSourcePaneViews(paneViewsGetter, drawRendererFn, source, state);
 	}
 
 	private _recreatePriceAxisWidgets(): void {
diff --git a/src/gui/price-axis-widget.ts b/src/gui/price-axis-widget.ts
index 4fb247386c..d026d23444 100644
--- a/src/gui/price-axis-widget.ts
+++ b/src/gui/price-axis-widget.ts
@@ -19,15 +19,18 @@ import { Coordinate } from '../model/coordinate';
 import { IDataSource } from '../model/idata-source';
 import { InvalidationLevel } from '../model/invalidate-mask';
 import { IPriceDataSource } from '../model/iprice-data-source';
+import { SeriesPrimitivePaneViewZOrder } from '../model/iseries-primitive';
 import { LayoutOptions } from '../model/layout-options';
 import { PriceScalePosition } from '../model/pane';
 import { PriceMark, PriceScale } from '../model/price-scale';
 import { TextWidthCache } from '../model/text-width-cache';
 import { PriceAxisViewRendererOptions } from '../renderers/iprice-axis-view-renderer';
 import { PriceAxisRendererOptionsProvider } from '../renderers/price-axis-renderer-options-provider';
+import { IAxisView } from '../views/pane/iaxis-view';
 import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
 
 import { createBoundCanvas } from './canvas-utils';
+import { IPriceAxisViewsGetter } from './iaxis-view-getters';
 import { suggestPriceScaleWidth } from './internal-layout-sizes-hints';
 import { MouseEventHandler, MouseEventHandlers, TouchMouseEvent } from './mouse-event-handler';
 import { PaneWidget } from './pane-widget';
@@ -49,6 +52,20 @@ const enum Constants {
 	LabelOffset = 5,
 }
 
+function buildPriceAxisViewsGetter(
+	zOrder: SeriesPrimitivePaneViewZOrder,
+	priceScaleId: PriceAxisWidgetSide
+): IPriceAxisViewsGetter {
+	return (source: IDataSource): readonly IAxisView[] => {
+		const psId = source.priceScale()?.id() ?? '';
+		if (psId !== priceScaleId) {
+			// exclude if source is using a different price scale.
+			return [];
+		}
+		return source.pricePaneViews?.(zOrder) ?? [];
+	};
+}
+
 export class PriceAxisWidget implements IDestroyable {
 	private readonly _pane: PaneWidget;
 	private readonly _options: Readonly<ChartOptionsInternal>;
@@ -73,6 +90,10 @@ export class PriceAxisWidget implements IDestroyable {
 	private _prevOptimalWidth: number = 0;
 	private _isSettingSize: boolean = false;
 
+	private _sourcePaneViews: IPriceAxisViewsGetter;
+	private _sourceTopPaneViews: IPriceAxisViewsGetter;
+	private _sourceBottomPaneViews: IPriceAxisViewsGetter;
+
 	public constructor(pane: PaneWidget, options: Readonly<ChartOptionsInternal>, rendererOptionsProvider: PriceAxisRendererOptionsProvider, side: PriceAxisWidgetSide) {
 		this._pane = pane;
 		this._options = options;
@@ -80,6 +101,10 @@ export class PriceAxisWidget implements IDestroyable {
 		this._rendererOptionsProvider = rendererOptionsProvider;
 		this._isLeft = side === 'left';
 
+		this._sourcePaneViews = buildPriceAxisViewsGetter('normal', side);
+		this._sourceTopPaneViews = buildPriceAxisViewsGetter('top', side);
+		this._sourceBottomPaneViews = buildPriceAxisViewsGetter('bottom', side);
+
 		this._cell = document.createElement('div');
 		this._cell.style.height = '100%';
 		this._cell.style.overflow = 'hidden';
@@ -275,7 +300,9 @@ export class PriceAxisWidget implements IDestroyable {
 					this._drawBackground(scope);
 					this._drawBorder(scope);
 				});
+				this._pane.drawAdditionalSources(target, this._sourceBottomPaneViews);
 				this._drawTickMarks(target);
+				this._pane.drawAdditionalSources(target, this._sourcePaneViews);
 				this._drawBackLabels(target);
 			}
 		}
@@ -287,6 +314,7 @@ export class PriceAxisWidget implements IDestroyable {
 				ctx.clearRect(0, 0, bitmapSize.width, bitmapSize.height);
 			});
 			this._drawCrosshairLabel(topTarget);
+			this._pane.drawAdditionalSources(topTarget, this._sourceTopPaneViews);
 		}
 	}
 
diff --git a/src/gui/time-axis-widget.ts b/src/gui/time-axis-widget.ts
index a29e3a2131..078c649f7f 100644
--- a/src/gui/time-axis-widget.ts
+++ b/src/gui/time-axis-widget.ts
@@ -17,14 +17,20 @@ import { makeFont } from '../helpers/make-font';
 
 import { IDataSource } from '../model/idata-source';
 import { InvalidationLevel } from '../model/invalidate-mask';
+import { SeriesPrimitivePaneViewZOrder } from '../model/iseries-primitive';
 import { LayoutOptions } from '../model/layout-options';
+import { Pane } from '../model/pane';
 import { TextWidthCache } from '../model/text-width-cache';
 import { TickMarkWeight } from '../model/time-data';
 import { TimeMark } from '../model/time-scale';
+import { IPaneRenderer } from '../renderers/ipane-renderer';
 import { TimeAxisViewRendererOptions } from '../renderers/itime-axis-view-renderer';
+import { IAxisView } from '../views/pane/iaxis-view';
 
 import { createBoundCanvas } from './canvas-utils';
 import { ChartWidget } from './chart-widget';
+import { drawBackground, drawForeground, drawSourcePaneViews } from './draw-functions';
+import { ITimeAxisViewsGetter } from './iaxis-view-getters';
 import { MouseEventHandler, MouseEventHandlers, MouseEventHandlerTouchEvent, TouchMouseEvent } from './mouse-event-handler';
 import { PriceAxisStub, PriceAxisStubParams } from './price-axis-stub';
 
@@ -42,6 +48,13 @@ function markWithGreaterWeight(a: TimeMark, b: TimeMark): TimeMark {
 	return a.weight > b.weight ? a : b;
 }
 
+function buildTimeAxisViewsGetter(zOrder: SeriesPrimitivePaneViewZOrder): ITimeAxisViewsGetter {
+	return (source: IDataSource): readonly IAxisView[] => source.timePaneViews?.(zOrder) ?? [];
+}
+const sourcePaneViews = buildTimeAxisViewsGetter('normal');
+const sourceTopPaneViews = buildTimeAxisViewsGetter('top');
+const sourceBottomPaneViews = buildTimeAxisViewsGetter('bottom');
+
 export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 	private readonly _chart: ChartWidget;
 	private readonly _options: LayoutOptions;
@@ -293,8 +306,10 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 				target.useBitmapCoordinateSpace((scope: BitmapCoordinatesRenderingScope) => {
 					this._drawBackground(scope);
 					this._drawBorder(scope);
+					this._drawAdditionalSources(target, sourceBottomPaneViews);
 				});
 				this._drawTickMarks(target);
+				this._drawAdditionalSources(target, sourcePaneViews);
 				// atm we don't have sources to be drawn on time axis except crosshair which is rendered on top level canvas
 				// so let's don't call this code at all for now
 				// this._drawLabels(this._chart.model().dataSources(), target);
@@ -314,7 +329,30 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 			topTarget.useBitmapCoordinateSpace(({ context: ctx, bitmapSize }: BitmapCoordinatesRenderingScope) => {
 				ctx.clearRect(0, 0, bitmapSize.width, bitmapSize.height);
 			});
-			this._drawLabels([this._chart.model().crosshairSource()], topTarget);
+			this._drawLabels([...this._chart.model().serieses(), this._chart.model().crosshairSource()], topTarget);
+			this._drawAdditionalSources(topTarget, sourceTopPaneViews);
+		}
+	}
+
+	private _drawAdditionalSources(target: CanvasRenderingTarget2D, axisViewsGetter: ITimeAxisViewsGetter): void {
+		const sources = this._chart.model().serieses();
+
+		for (const source of sources) {
+			drawSourcePaneViews(
+				axisViewsGetter,
+				(renderer: IPaneRenderer) => drawBackground(renderer, target, false, undefined),
+				source,
+				undefined as unknown as Pane
+			);
+		}
+
+		for (const source of sources) {
+			drawSourcePaneViews(
+				axisViewsGetter,
+				(renderer: IPaneRenderer) => drawForeground(renderer, target, false, undefined),
+				source,
+				undefined as unknown as Pane
+			);
 		}
 	}
 
diff --git a/src/index.ts b/src/index.ts
index a8c90b8646..0e63ec50d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,8 @@
 /// <reference types="_build-time-constants" />
 
+import { customStyleDefaults, seriesOptionsDefaults } from './api/options/series-options-defaults';
+import { CustomSeriesOptions } from './model/series-options';
+
 export { LineStyle, LineType } from './renderers/draw-line';
 
 export { TrackingModeExitMode } from './model/chart-model';
@@ -15,6 +18,11 @@ export {
 	isUTCTimestamp,
 } from './api/data-consumer';
 
+export const customSeriesDefaultOptions: CustomSeriesOptions = {
+	...seriesOptionsDefaults,
+	...customStyleDefaults,
+};
+
 export { createChart } from './api/create-chart';
 
 /**
diff --git a/src/model/chart-model.ts b/src/model/chart-model.ts
index 44d0c531c4..0d81178585 100644
--- a/src/model/chart-model.ts
+++ b/src/model/chart-model.ts
@@ -14,6 +14,7 @@ import { Coordinate } from './coordinate';
 import { Crosshair, CrosshairOptions } from './crosshair';
 import { DefaultPriceScaleId, isDefaultPriceScale } from './default-price-scale';
 import { GridOptions } from './grid';
+import { ICustomSeriesPaneView } from './icustom-series';
 import { InvalidateMask, InvalidationLevel, ITimeScaleAnimation } from './invalidate-mask';
 import { IPriceDataSource } from './iprice-data-source';
 import { ColorType, LayoutOptions } from './layout-options';
@@ -765,9 +766,9 @@ export class ChartModel implements IDestroyable {
 		return this._priceScalesOptionsChanged;
 	}
 
-	public createSeries<T extends SeriesType>(seriesType: T, options: SeriesOptionsMap[T]): Series<T> {
+	public createSeries<T extends SeriesType>(seriesType: T, options: SeriesOptionsMap[T], customPaneView?: ICustomSeriesPaneView): Series<T> {
 		const pane = this._panes[0];
-		const series = this._createSeries(options, seriesType, pane);
+		const series = this._createSeries(options, seriesType, pane, customPaneView);
 		this._serieses.push(series);
 
 		if (this._serieses.length === 1) {
@@ -925,8 +926,8 @@ export class ChartModel implements IDestroyable {
 		this._panes.forEach((pane: Pane) => pane.grid().paneView().update());
 	}
 
-	private _createSeries<T extends SeriesType>(options: SeriesOptionsInternal<T>, seriesType: T, pane: Pane): Series<T> {
-		const series = new Series<T>(this, options, seriesType);
+	private _createSeries<T extends SeriesType>(options: SeriesOptionsInternal<T>, seriesType: T, pane: Pane, customPaneView?: ICustomSeriesPaneView): Series<T> {
+		const series = new Series<T>(this, options, seriesType, pane, customPaneView);
 
 		const targetScaleId = options.priceScaleId !== undefined ? options.priceScaleId : this.defaultVisiblePriceScaleId();
 		pane.addDataSource(series, targetScaleId);
diff --git a/src/model/icustom-series.ts b/src/model/icustom-series.ts
new file mode 100644
index 0000000000..c2b63ade56
--- /dev/null
+++ b/src/model/icustom-series.ts
@@ -0,0 +1,180 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+import { Coordinate } from './coordinate';
+import { CustomSeriesOptions } from './series-options';
+import { Range, Time } from './time-data';
+
+/**
+ * Represents a whitespace data item, which is a data point without a value.
+ */
+export interface CustomSeriesWhitespaceData {
+	/**
+	 * The time of the data.
+	 */
+	time: Time;
+
+	/**
+	 * Additional custom values which will be ignored by the library, but
+	 * could be used by plugins.
+	 */
+	customValues?: Record<string, unknown>;
+}
+
+/**
+ * Base structure describing a single item of data for a custom series.
+ *
+ * This type allows for any properties to be defined
+ * within the interface. It is recommended that you extend this interface with
+ * the required data structure.
+ */
+export interface CustomData extends CustomSeriesWhitespaceData {
+	/**
+	 * If defined then this color will be used for the price line and price scale line
+	 * for this specific data item of the custom series.
+	 */
+	color?: string;
+}
+
+export type WhitespaceCheck<TData extends CustomData = CustomData> = (bar: TData | CustomSeriesWhitespaceData) => bar is CustomSeriesWhitespaceData;
+
+/**
+ * Renderer data for an item within the custom series.
+ */
+export interface CustomBarItemData<
+	TData extends CustomData = CustomData
+> {
+	/**
+	 * Horizontal coordinate for the item. Measured from the left edge of the pane in pixels.
+	 */
+	x: number;
+	/**
+	 * Time scale index for the item. This isn't the timestamp but rather the logical index.
+	 */
+	time: number;
+	/**
+	 * Original data for the item.
+	 */
+	originalData: TData;
+	/**
+	 * Color assigned for the item, typically used for price line and price scale label.
+	 */
+	barColor: string;
+}
+
+/**
+ * Data provide to the custom series pane view which can be used within the renderer
+ * for drawing the series data.
+ */
+export interface PaneRendererCustomData<
+	TData extends CustomData
+> {
+	/**
+	 * List of all the series' items and their x coordinates.
+	 */
+	bars: readonly CustomBarItemData<TData>[];
+	/**
+	 * Spacing between consecutive bars.
+	 */
+	barSpacing: number;
+	/**
+	 * The current visible range of items on the chart.
+	 */
+	visibleRange: Range<number> | null;
+}
+
+/**
+ * Converter function for changing prices into vertical coordinate values.
+ *
+ * This is provided as a convenience function since the series original data will most likely be defined
+ * in price values, and the renderer needs to draw with coordinates. This returns the same values as
+ * directly using the series' priceToCoordinate method.
+ */
+export type PriceToCoordinateConverter = (price: number) => Coordinate | null;
+
+/**
+ * Renderer for the custom series. This paints on the main chart pane.
+ */
+export interface ICustomSeriesPaneRenderer {
+	/**
+	 * Draw function for the renderer.
+	 *
+	 * @param target - canvas context to draw on, refer to FancyCanvas library for more details about this class.
+	 * @param priceConverter - converter function for changing prices into vertical coordinate values.
+	 * @param isHovered - Whether the series is hovered.
+	 * @param hitTestData - Optional hit test data for the series.
+	 */
+	draw(
+		target: CanvasRenderingTarget2D,
+		priceConverter: PriceToCoordinateConverter,
+		isHovered: boolean,
+		hitTestData?: unknown
+	): void;
+}
+
+/**
+ * Price values for the custom series. This list should include the largest, smallest, and current price values for the data point.
+ * The last value in the array will be used for the current value. You shouldn't need to
+ * have more than 3 values in this array since the library only needs a largest, smallest, and current value.
+ *
+ * Examples:
+ * - For a line series, this would contain a single number representing the current value.
+ * - For a candle series, this would contain the high, low, and close values. Where the last value would be the close value.
+ */
+export type CustomSeriesPricePlotValues = number[];
+
+/**
+ * This interface represents the view for the custom series
+ */
+export interface ICustomSeriesPaneView<
+	TData extends CustomData = CustomData,
+	TSeriesOptions extends CustomSeriesOptions = CustomSeriesOptions
+> {
+	/**
+	 * This method returns a renderer - special object to draw data for the series
+	 * on the main chart pane.
+	 *
+	 * @returns an renderer object to be used for drawing.
+	 */
+	renderer(): ICustomSeriesPaneRenderer;
+
+	/**
+	 * This method will be called with the latest data for the renderer to use
+	 * during the next paint.
+	 */
+	update(
+		data: PaneRendererCustomData<TData>,
+		seriesOptions: TSeriesOptions
+	): void;
+
+	/**
+	 * A function for interpreting the custom series data and returning an array of numbers
+	 * representing the price values for the item. These price values are used
+	 * by the chart to determine the auto-scaling (to ensure the items are in view) and the crosshair
+	 * and price line positions. The last value in the array will be used as the current value. You shouldn't need to
+	 * have more than 3 values in this array since the library only needs a largest, smallest, and current value.
+	 */
+	priceValueBuilder(plotRow: TData): CustomSeriesPricePlotValues;
+
+	/**
+	 * A function for testing whether a data point should be considered fully specified, or if it should
+	 * be considered as whitespace. Should return `true` if is whitespace.
+	 *
+	 * @param data - data point to be tested
+	 */
+	isWhitespace(data: TData | CustomSeriesWhitespaceData): data is CustomSeriesWhitespaceData;
+
+	/**
+	 * Default options
+	 */
+	defaultOptions(): TSeriesOptions;
+
+	/**
+	 * This method will be evoked when the series has been removed from the chart. This method should be used to
+	 * clean up any objects, references, and other items that could potentially cause memory leaks.
+	 *
+	 * This method should contain all the necessary code to clean up the object before it is removed from memory.
+	 * This includes removing any event listeners or timers that are attached to the object, removing any references
+	 * to other objects, and resetting any values or properties that were modified during the lifetime of the object.
+	 */
+	destroy?(): void;
+}
diff --git a/src/model/idata-source.ts b/src/model/idata-source.ts
index 9a90336703..c16b53249e 100644
--- a/src/model/idata-source.ts
+++ b/src/model/idata-source.ts
@@ -1,11 +1,38 @@
+import { IAxisView } from '../views/pane/iaxis-view';
 import { IPaneView } from '../views/pane/ipane-view';
 import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
 import { ITimeAxisView } from '../views/time-axis/itime-axis-view';
 
+import { Coordinate } from './coordinate';
+import { PrimitiveHoveredItem, SeriesPrimitivePaneViewZOrder } from './iseries-primitive';
 import { Pane } from './pane';
 import { PriceScale } from './price-scale';
 
-export interface IDataSource {
+/**
+ * Prefix meanings:
+ * - bottom: Pane views that are painted at the bottom (above background color, below grid lines)
+ * - top: Pane views that are painted on the most top layer and ABOVE the crosshair
+ */
+interface IPluginPaneViews {
+	bottomPaneViews?(pane: Pane): readonly IPaneView[];
+	pricePaneViews?(zOrder: SeriesPrimitivePaneViewZOrder): readonly IAxisView[];
+	timePaneViews?(zOrder: SeriesPrimitivePaneViewZOrder): readonly IAxisView[];
+	primitiveHitTest?(x: Coordinate, y: Coordinate): PrimitiveHoveredItem[];
+}
+
+interface IDataSourcePaneViews extends IPluginPaneViews {
+	paneViews(pane: Pane): readonly IPaneView[];
+	labelPaneViews(pane?: Pane): readonly IPaneView[];
+
+	/**
+	 * Pane views that are painted on the most top layer
+	 */
+	topPaneViews?(pane: Pane): readonly IPaneView[];
+}
+
+export type DataSourcePaneViewGetterNames = keyof IDataSourcePaneViews;
+
+export interface IDataSource extends IDataSourcePaneViews {
 	zorder(): number | null;
 	setZorder(value: number): void;
 	priceScale(): PriceScale | null;
@@ -15,13 +42,6 @@ export interface IDataSource {
 
 	priceAxisViews(pane?: Pane, priceScale?: PriceScale): readonly IPriceAxisView[];
 	timeAxisViews(): readonly ITimeAxisView[];
-	paneViews(pane: Pane): readonly IPaneView[];
-	labelPaneViews(pane?: Pane): readonly IPaneView[];
-
-	/**
-	 * Pane views that are painted on the most top layer
-	 */
-	topPaneViews?(pane: Pane): readonly IPaneView[];
 
 	visible(): boolean;
 
diff --git a/src/model/iseries-primitive.ts b/src/model/iseries-primitive.ts
new file mode 100644
index 0000000000..4732e42ede
--- /dev/null
+++ b/src/model/iseries-primitive.ts
@@ -0,0 +1,228 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+import { AutoscaleInfo } from './series-options';
+import { Logical } from './time-data';
+
+/**
+ * This interface represents a label on the price or time axis
+ */
+export interface ISeriesPrimitiveAxisView {
+	/**
+	 * The desired coordinate for the label. Note that the label will be automatically moved to prevent overlapping with other labels. If you would like the label to be drawn at the
+	 * exact coordinate under all circumstances then rather use `fixedCoordinate`.
+	 * For a price axis the value returned will represent the vertical distance (pixels) from the top. For a time axis the value will represent the horizontal distance from the left.
+	 *
+	 * @returns coordinate. distance from top for price axis, or distance from left for time axis.
+	 */
+	coordinate(): number;
+
+	/**
+	 * fixed coordinate of the label. A label with a fixed coordinate value will always be drawn at the specified coordinate and will appear above any 'unfixed' labels. If you supply
+	 * a fixed coordinate then you should return a large negative number for `coordinate` so that the automatic placement of unfixed labels doesn't leave a blank space for this label.
+	 * For a price axis the value returned will represent the vertical distance (pixels) from the top. For a time axis the value will represent the horizontal distance from the left.
+	 *
+	 * @returns coordinate. distance from top for price axis, or distance from left for time axis.
+	 */
+	fixedCoordinate?(): number | undefined;
+
+	/**
+	 * @returns text of the label
+	 */
+	text(): string;
+
+	/**
+	 * @returns text color of the label
+	 */
+	textColor(): string;
+
+	/**
+	 * @returns background color of the label
+	 */
+	backColor(): string;
+
+	/**
+	 * @returns whether the label should be visible (default: `true`)
+	 */
+	visible?(): boolean;
+
+	/**
+	 * @returns whether the tick mark line should be visible (default: `true`)
+	 */
+	tickVisible?(): boolean;
+}
+
+/**
+ * This interface represents rendering some element on the canvas
+ */
+export interface ISeriesPrimitivePaneRenderer {
+	/**
+	 * Method to draw main content of the element
+	 *
+	 * @param target - canvas context to draw on, refer to FancyCanvas library for more details about this class
+	 *
+	 */
+	draw(target: CanvasRenderingTarget2D): void;
+
+	/**
+	 * Optional method to draw the background.
+	 * Some elements could implement this method to draw on the background of the chart.
+	 * Usually this is some kind of watermarks or time areas highlighting.
+	 *
+	 * @param target - canvas context to draw on, refer FancyCanvas library for more details about this class
+	 */
+	drawBackground?(target: CanvasRenderingTarget2D): void;
+}
+
+/**
+ * Defines where in the visual layer stack the renderer should be executed.
+ *
+ * - `bottom`: Draw below everything except the background.
+ * - `normal`: Draw at the same level as the series.
+ * - `top`: Draw above everything (including the crosshair).
+ */
+export type SeriesPrimitivePaneViewZOrder = 'bottom' | 'normal' | 'top';
+
+/**
+ * This interface represents the primitive for one of the pane of the chart (main chart area, time scale, price scale).
+ */
+export interface ISeriesPrimitivePaneView {
+	/**
+	 * Defines where in the visual layer stack the renderer should be executed. Default is `'normal'`.
+	 *
+	 * @returns the desired position in the visual layer stack. @see {@link SeriesPrimitivePaneViewZOrder}
+	 */
+	zOrder?(): SeriesPrimitivePaneViewZOrder;
+	/**
+	 * This method returns a renderer - special object to draw data
+	 *
+	 * @returns an renderer object to be used for drawing, or `null` if we have nothing to draw.
+	 */
+	renderer(): ISeriesPrimitivePaneRenderer | null;
+}
+
+/**
+ * Data representing the currently hovered object from the Hit test.
+ */
+export interface PrimitiveHoveredItem {
+	/**
+	 * CSS cursor style as defined here: [MDN: CSS Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) or `undefined`
+	 * if you want the library to use the default cursor style instead.
+	 */
+	cursorStyle?: string;
+	/**
+	 * Hovered objects external ID. Can be used to identify the source item within a mouse subscriber event.
+	 */
+	externalId: string;
+	/**
+	 * The zOrder of the hovered item.
+	 */
+	zOrder: SeriesPrimitivePaneViewZOrder;
+	/**
+	 * Set to true if the object is rendered using `drawBackground` instead of `draw`.
+	 */
+	isBackground?: boolean;
+}
+
+/**
+ * Base interface for series primitives. It must be implemented to add some external graphics to series
+ */
+export interface ISeriesPrimitiveBase<TSeriesAttachedParameters = unknown> {
+	/**
+	 * This method is called when viewport has been changed, so primitive have to recalculate / invalidate its data
+	 */
+	updateAllViews?(): void;
+
+	/**
+	 * Returns array of labels to be drawn on the price axis used by the series
+	 *
+	 * @returns array of objects; each of then must implement ISeriesPrimitiveAxisView interface
+	 *
+	 * For performance reasons, the lightweight library uses internal caches based on references to arrays
+	 * So, this method must return new array if set of views has changed and should try to return the same array if nothing changed
+	 */
+	priceAxisViews?(): readonly ISeriesPrimitiveAxisView[];
+
+	/**
+	 * Returns array of labels to be drawn on the time axis
+	 *
+	 * @returns array of objects; each of then must implement ISeriesPrimitiveAxisView interface
+	 *
+	 * For performance reasons, the lightweight library uses internal caches based on references to arrays
+	 * So, this method must return new array if set of views has changed and should try to return the same array if nothing changed
+	 */
+	timeAxisViews?(): readonly ISeriesPrimitiveAxisView[];
+
+	/**
+	 * Returns array of objects representing primitive in the main area of the chart
+	 *
+	 * @returns array of objects; each of then must implement ISeriesPrimitivePaneView interface
+	 *
+	 * For performance reasons, the lightweight library uses internal caches based on references to arrays
+	 * So, this method must return new array if set of views has changed and should try to return the same array if nothing changed
+	 */
+	paneViews?(): readonly ISeriesPrimitivePaneView[];
+
+	/**
+	 * Returns array of objects representing primitive in the price axis area of the chart
+	 *
+	 * @returns array of objects; each of then must implement ISeriesPrimitivePaneView interface
+	 *
+	 * For performance reasons, the lightweight library uses internal caches based on references to arrays
+	 * So, this method must return new array if set of views has changed and should try to return the same array if nothing changed
+	 */
+	priceAxisPaneViews?(): readonly ISeriesPrimitivePaneView[];
+
+	/**
+	 * Returns array of objects representing primitive in the time axis area of the chart
+	 *
+	 * @returns array of objects; each of then must implement ISeriesPrimitivePaneView interface
+	 *
+	 * For performance reasons, the lightweight library uses internal caches based on references to arrays
+	 * So, this method must return new array if set of views has changed and should try to return the same array if nothing changed
+	 */
+	timeAxisPaneViews?(): readonly ISeriesPrimitivePaneView[];
+
+	/**
+	 * Return autoscaleInfo which will be merged with the series base autoscaleInfo. You can use this to expand the autoscale range
+	 * to include visual elements drawn outside of the series' current visible price range.
+	 *
+	 * **Important**: Please note that this method will be evoked very often during scrolling and zooming of the chart, thus it
+	 * is recommended that this method is either simple to execute, or makes use of optimisations such as caching to ensure that
+	 * the chart remains responsive.
+	 *
+	 * @param startTimePoint - start time point for the current visible range
+	 * @param endTimePoint - end time point for the current visible range
+	 * @returns AutoscaleInfo
+	 */
+	autoscaleInfo?(
+		startTimePoint: Logical,
+		endTimePoint: Logical
+	): AutoscaleInfo | null;
+
+	/**
+	 * Attached Lifecycle hook.
+	 *
+	 * @param param - An object containing useful references for the attached primitive to use.
+	 * @returns void
+	 */
+	attached?(param: TSeriesAttachedParameters): void;
+	/**
+	 * Detached Lifecycle hook.
+	 *
+	 * @returns void
+	 */
+	detached?(): void;
+
+	/**
+	 * Hit test method which will be called by the library when the cursor is moved.
+	 * Use this to register object ids being hovered for use within the crosshairMoved
+	 * and click events emitted by the chart. Additionally, the hit test result can
+	 * specify a preferred cursor type to display for the main chart pane. This method
+	 * should return the top most hit for this primitive if more than one object is
+	 * being intersected.
+	 *
+	 * @param x - x Coordinate of mouse event
+	 * @param y - y Coordinate of mouse event
+	 */
+	hitTest?(x: number, y: number): PrimitiveHoveredItem | null;
+}
diff --git a/src/model/plot-data.ts b/src/model/plot-data.ts
index aad5a19dfe..8e7aa98ac5 100644
--- a/src/model/plot-data.ts
+++ b/src/model/plot-data.ts
@@ -22,4 +22,5 @@ export interface PlotRow {
 	readonly time: TimePoint;
 	readonly value: PlotRowValue;
 	readonly originalTime: OriginalTime;
+	readonly customValues?: Record<string, unknown>;
 }
diff --git a/src/model/series-bar-colorer.ts b/src/model/series-bar-colorer.ts
index e9310a850e..76033f8ce4 100644
--- a/src/model/series-bar-colorer.ts
+++ b/src/model/series-bar-colorer.ts
@@ -8,6 +8,7 @@ import {
 	BarStyleOptions,
 	BaselineStyleOptions,
 	CandlestickStyleOptions,
+	CustomStyleOptions,
 	HistogramStyleOptions,
 	LineStyleOptions,
 	SeriesOptionsMap,
@@ -63,6 +64,8 @@ export interface CandlesticksColorerStyle extends CommonBarColorerStyle {
 	barWickColor: string;
 }
 
+export interface CustomBarColorerStyle extends CommonBarColorerStyle {}
+
 export interface BarStylesMap {
 	Bar: BarColorerStyle;
 	Candlestick: CandlesticksColorerStyle;
@@ -70,6 +73,7 @@ export interface BarStylesMap {
 	Baseline: BaselineBarColorerStyle;
 	Line: LineBarColorerStyle;
 	Histogram: HistogramBarColorerStyle;
+	Custom: CustomBarColorerStyle;
 }
 
 type FindBarFn = (barIndex: TimePointIndex, precomputedBars?: PrecomputedBars) => SeriesPlotRow | null;
@@ -118,6 +122,14 @@ const barStyleFnMap: BarStylesFnMap = {
 		};
 	},
 	// eslint-disable-next-line @typescript-eslint/naming-convention
+	Custom: (findBar: FindBarFn, customStyle: CustomStyleOptions, barIndex: TimePointIndex, precomputedBars?: PrecomputedBars): CustomBarColorerStyle => {
+		const currentBar = ensureNotNull(findBar(barIndex, precomputedBars)) as SeriesPlotRow<'Line'>;
+
+		return {
+			barColor: currentBar.color ?? customStyle.color,
+		};
+	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	Area: (findBar: FindBarFn, areaStyle: AreaStyleOptions, barIndex: TimePointIndex, precomputedBars?: PrecomputedBars): AreaBarColorerStyle => {
 		const currentBar = ensureNotNull(findBar(barIndex, precomputedBars)) as SeriesPlotRow<'Area'>;
 		return {
diff --git a/src/model/series-data.ts b/src/model/series-data.ts
index d9d1f06f37..733bb26b2f 100644
--- a/src/model/series-data.ts
+++ b/src/model/series-data.ts
@@ -35,6 +35,12 @@ export interface CandlestickPlotRow extends PlotRow {
 	readonly wickColor?: string;
 }
 
+export interface CustomPlotRow extends PlotRow {
+	// Used to store the original data values
+	data: Record<string, unknown>;
+	readonly color?: string;
+}
+
 export interface SeriesPlotRowTypeAtTypeMap {
 	Bar: BarPlotRow;
 	Candlestick: CandlestickPlotRow;
@@ -42,6 +48,7 @@ export interface SeriesPlotRowTypeAtTypeMap {
 	Baseline: BaselinePlotRow;
 	Line: LinePlotRow;
 	Histogram: HistogramPlotRow;
+	Custom: CustomPlotRow;
 }
 
 export type SeriesPlotRow<T extends SeriesType = SeriesType> = SeriesPlotRowTypeAtTypeMap[T];
diff --git a/src/model/series-options.ts b/src/model/series-options.ts
index 1f54e6ddcb..2bb0a2b1c6 100644
--- a/src/model/series-options.ts
+++ b/src/model/series-options.ts
@@ -511,6 +511,16 @@ export interface HistogramStyleOptions {
 	base: number;
 }
 
+/**
+ * Represents style options for a custom series.
+ */
+export interface CustomStyleOptions {
+	/**
+	 * Color used for the price line and price scale label.
+	 */
+	color: string;
+}
+
 /**
  * Represents series value formatting options.
  * The precision and minMove properties allow wide customization of formatting.
@@ -861,6 +871,15 @@ export type HistogramSeriesOptions = SeriesOptions<HistogramStyleOptions>;
  */
 export type HistogramSeriesPartialOptions = SeriesPartialOptions<HistogramStyleOptions>;
 
+/**
+ * Represents a custom series options.
+ */
+export type CustomSeriesOptions = SeriesOptions<CustomStyleOptions>;
+/**
+ * Represents a custom series options where all properties are optional.
+ */
+export type CustomSeriesPartialOptions = SeriesPartialOptions<CustomStyleOptions>;
+
 /**
  * Represents line series options.
  */
@@ -900,6 +919,10 @@ export interface SeriesStyleOptionsMap {
 	 * The type of histogram style options.
 	 */
 	Histogram: HistogramStyleOptions;
+	/**
+	 * The type of a custom series' style options.
+	 */
+	Custom: CustomStyleOptions;
 }
 
 /**
@@ -932,6 +955,10 @@ export interface SeriesOptionsMap {
 	 * The type of histogram series options.
 	 */
 	Histogram: HistogramSeriesOptions;
+	/**
+	 * The type of a custom series options.
+	 */
+	Custom: CustomSeriesOptions;
 }
 
 /**
@@ -964,6 +991,10 @@ export interface SeriesPartialOptionsMap {
 	 * The type of histogram series partial options.
 	 */
 	Histogram: HistogramSeriesPartialOptions;
+	/**
+	 * The type of a custom series partial options.
+	 */
+	Custom: CustomSeriesPartialOptions;
 }
 
 /**
diff --git a/src/model/series-primitive-wrapper.ts b/src/model/series-primitive-wrapper.ts
new file mode 100644
index 0000000000..84935cf1a4
--- /dev/null
+++ b/src/model/series-primitive-wrapper.ts
@@ -0,0 +1,257 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+import { IPaneRenderer } from '../renderers/ipane-renderer';
+import { PriceAxisViewRendererCommonData, PriceAxisViewRendererData } from '../renderers/iprice-axis-view-renderer';
+import { TimeAxisViewRenderer } from '../renderers/time-axis-view-renderer';
+import { IPaneView } from '../views/pane/ipane-view';
+import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
+import { PriceAxisView } from '../views/price-axis/price-axis-view';
+import { ITimeAxisView } from '../views/time-axis/itime-axis-view';
+
+import { Coordinate } from './coordinate';
+import {
+	ISeriesPrimitiveAxisView,
+	ISeriesPrimitiveBase,
+	ISeriesPrimitivePaneRenderer,
+	ISeriesPrimitivePaneView,
+	PrimitiveHoveredItem,
+	SeriesPrimitivePaneViewZOrder,
+} from './iseries-primitive';
+import { PriceScale } from './price-scale';
+import { Series } from './series';
+import { AutoscaleInfo } from './series-options';
+import { Logical, TimePointIndex } from './time-data';
+import { TimeScale } from './time-scale';
+
+class SeriesPrimitiveRendererWrapper implements IPaneRenderer {
+	private readonly _baseRenderer: ISeriesPrimitivePaneRenderer;
+
+	public constructor(baseRenderer: ISeriesPrimitivePaneRenderer) {
+		this._baseRenderer = baseRenderer;
+	}
+
+	public draw(target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void {
+		this._baseRenderer.draw(target);
+	}
+
+	public drawBackground?(target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void {
+		this._baseRenderer.drawBackground?.(target);
+	}
+}
+
+interface RendererCache<Base, Wrapper> {
+	base: Base;
+	wrapper: Wrapper;
+}
+
+export interface ISeriesPrimitivePaneViewWrapper extends IPaneView {
+	zOrder(): SeriesPrimitivePaneViewZOrder;
+}
+
+class SeriesPrimitivePaneViewWrapper implements IPaneView {
+	private readonly _paneView: ISeriesPrimitivePaneView;
+	private _cache: RendererCache<ISeriesPrimitivePaneRenderer, SeriesPrimitiveRendererWrapper> | null = null;
+
+	public constructor(paneView: ISeriesPrimitivePaneView) {
+		this._paneView = paneView;
+	}
+
+	public renderer(): IPaneRenderer | null {
+		const baseRenderer = this._paneView.renderer();
+		if (baseRenderer === null) {
+			return null;
+		}
+		if (this._cache?.base === baseRenderer) {
+			return this._cache.wrapper;
+		}
+		const wrapper = new SeriesPrimitiveRendererWrapper(baseRenderer);
+		this._cache = {
+			base: baseRenderer,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public zOrder(): SeriesPrimitivePaneViewZOrder {
+		return this._paneView.zOrder?.() ?? 'normal';
+	}
+}
+
+interface AxisViewData {
+	text: string;
+	coordinate: number;
+	fixedCoordinate: number | undefined;
+	color: string;
+	background: string;
+	visible: boolean;
+	tickVisible: boolean;
+}
+
+function getAxisViewData(baseView: ISeriesPrimitiveAxisView): AxisViewData {
+	return {
+		text: baseView.text(),
+		coordinate: baseView.coordinate(),
+		fixedCoordinate: baseView.fixedCoordinate?.(),
+		color: baseView.textColor(),
+		background: baseView.backColor(),
+		visible: baseView.visible?.() ?? true,
+		tickVisible: baseView.tickVisible?.() ?? true,
+	};
+}
+
+class SeriesPrimitiveTimeAxisViewWrapper implements ITimeAxisView {
+	private readonly _baseView: ISeriesPrimitiveAxisView;
+	private readonly _timeScale: TimeScale;
+	private readonly _renderer: TimeAxisViewRenderer = new TimeAxisViewRenderer();
+
+	public constructor(baseView: ISeriesPrimitiveAxisView, timeScale: TimeScale) {
+		this._baseView = baseView;
+		this._timeScale = timeScale;
+	}
+
+	public renderer(): TimeAxisViewRenderer {
+		this._renderer.setData({
+			width: this._timeScale.width(),
+			...getAxisViewData(this._baseView),
+		});
+		return this._renderer;
+	}
+}
+
+class SeriesPrimitivePriceAxisViewWrapper extends PriceAxisView {
+	private readonly _baseView: ISeriesPrimitiveAxisView;
+	private readonly _priceScale: PriceScale;
+
+	public constructor(baseView: ISeriesPrimitiveAxisView, priceScale: PriceScale) {
+		super();
+		this._baseView = baseView;
+		this._priceScale = priceScale;
+	}
+
+	protected override _updateRendererData(
+		axisRendererData: PriceAxisViewRendererData,
+		paneRendererData: PriceAxisViewRendererData,
+		commonRendererData: PriceAxisViewRendererCommonData
+	): void {
+		const data = getAxisViewData(this._baseView);
+		commonRendererData.background = data.background;
+		axisRendererData.color = data.color;
+
+		const additionalPadding = 2 / 12 * this._priceScale.fontSize();
+
+		commonRendererData.additionalPaddingTop = additionalPadding;
+		commonRendererData.additionalPaddingBottom = additionalPadding;
+
+		commonRendererData.coordinate = data.coordinate;
+		commonRendererData.fixedCoordinate = data.fixedCoordinate;
+		axisRendererData.text = data.text;
+		axisRendererData.visible = data.visible;
+		axisRendererData.tickVisible = data.tickVisible;
+	}
+}
+
+export class SeriesPrimitiveWrapper<TSeriesAttachedParameters = unknown> {
+	private readonly _primitive: ISeriesPrimitiveBase<TSeriesAttachedParameters>;
+	private readonly _series: Series;
+	private _paneViewsCache: RendererCache<readonly ISeriesPrimitivePaneView[], readonly SeriesPrimitivePaneViewWrapper[]> | null = null;
+	private _timeAxisViewsCache: RendererCache<readonly ISeriesPrimitiveAxisView[], readonly SeriesPrimitiveTimeAxisViewWrapper[]> | null = null;
+	private _priceAxisViewsCache: RendererCache<readonly ISeriesPrimitiveAxisView[], readonly SeriesPrimitivePriceAxisViewWrapper[]> | null = null;
+	private _priceAxisPaneViewsCache: RendererCache<readonly ISeriesPrimitivePaneView[], readonly SeriesPrimitivePaneViewWrapper[]> | null = null;
+	private _timeAxisPaneViewsCache: RendererCache<readonly ISeriesPrimitivePaneView[], readonly SeriesPrimitivePaneViewWrapper[]> | null = null;
+
+	public constructor(primitive: ISeriesPrimitiveBase<TSeriesAttachedParameters>, series: Series) {
+		this._primitive = primitive;
+		this._series = series;
+	}
+
+	public primitive(): ISeriesPrimitiveBase<TSeriesAttachedParameters> {
+		return this._primitive;
+	}
+
+	public updateAllViews(): void {
+		this._primitive.updateAllViews?.();
+	}
+
+	public paneViews(): readonly ISeriesPrimitivePaneViewWrapper[] {
+		const base = this._primitive.paneViews?.() ?? [];
+		if (this._paneViewsCache?.base === base) {
+			return this._paneViewsCache.wrapper;
+		}
+		const wrapper = base.map((pw: ISeriesPrimitivePaneView) => new SeriesPrimitivePaneViewWrapper(pw));
+		this._paneViewsCache = {
+			base,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public timeAxisViews(): readonly ITimeAxisView[] {
+		const base = this._primitive.timeAxisViews?.() ?? [];
+		if (this._timeAxisViewsCache?.base === base) {
+			return this._timeAxisViewsCache.wrapper;
+		}
+		const timeScale = this._series.model().timeScale();
+		const wrapper = base.map((aw: ISeriesPrimitiveAxisView) => new SeriesPrimitiveTimeAxisViewWrapper(aw, timeScale));
+		this._timeAxisViewsCache = {
+			base,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public priceAxisViews(): readonly IPriceAxisView[] {
+		const base = this._primitive.priceAxisViews?.() ?? [];
+		if (this._priceAxisViewsCache?.base === base) {
+			return this._priceAxisViewsCache.wrapper;
+		}
+		const priceScale = this._series.priceScale();
+		const wrapper = base.map((aw: ISeriesPrimitiveAxisView) => new SeriesPrimitivePriceAxisViewWrapper(aw, priceScale));
+		this._priceAxisViewsCache = {
+			base,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public priceAxisPaneViews(): readonly ISeriesPrimitivePaneViewWrapper[] {
+		const base = this._primitive.priceAxisPaneViews?.() ?? [];
+		if (this._priceAxisPaneViewsCache?.base === base) {
+			return this._priceAxisPaneViewsCache.wrapper;
+		}
+		const wrapper = base.map((pw: ISeriesPrimitivePaneView) => new SeriesPrimitivePaneViewWrapper(pw));
+		this._priceAxisPaneViewsCache = {
+			base,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public timeAxisPaneViews(): readonly ISeriesPrimitivePaneViewWrapper[] {
+		const base = this._primitive.timeAxisPaneViews?.() ?? [];
+		if (this._timeAxisPaneViewsCache?.base === base) {
+			return this._timeAxisPaneViewsCache.wrapper;
+		}
+		const wrapper = base.map((pw: ISeriesPrimitivePaneView) => new SeriesPrimitivePaneViewWrapper(pw));
+		this._timeAxisPaneViewsCache = {
+			base,
+			wrapper,
+		};
+		return wrapper;
+	}
+
+	public autoscaleInfo(
+		startTimePoint: TimePointIndex,
+		endTimePoint: TimePointIndex
+	): AutoscaleInfo | null {
+		return (
+			this._primitive.autoscaleInfo?.(
+				startTimePoint as unknown as Logical,
+				endTimePoint as unknown as Logical
+			) ?? null
+		);
+	}
+
+	public hitTest(x: Coordinate, y: Coordinate): PrimitiveHoveredItem | null {
+		return this._primitive.hitTest?.(x, y) ?? null;
+	}
+}
diff --git a/src/model/series.ts b/src/model/series.ts
index ab2c6e97eb..69d2623d78 100644
--- a/src/model/series.ts
+++ b/src/model/series.ts
@@ -3,7 +3,7 @@ import { PercentageFormatter } from '../formatters/percentage-formatter';
 import { PriceFormatter } from '../formatters/price-formatter';
 import { VolumeFormatter } from '../formatters/volume-formatter';
 
-import { ensureNotNull } from '../helpers/assertions';
+import { ensureDefined, ensureNotNull } from '../helpers/assertions';
 import { IDestroyable } from '../helpers/idestroyable';
 import { isInteger, merge } from '../helpers/strict-type-checks';
 
@@ -11,6 +11,7 @@ import { SeriesAreaPaneView } from '../views/pane/area-pane-view';
 import { SeriesBarsPaneView } from '../views/pane/bars-pane-view';
 import { SeriesBaselinePaneView } from '../views/pane/baseline-pane-view';
 import { SeriesCandlesticksPaneView } from '../views/pane/candlesticks-pane-view';
+import { SeriesCustomPaneView } from '../views/pane/custom-pane-view';
 import { SeriesHistogramPaneView } from '../views/pane/histogram-pane-view';
 import { IPaneView } from '../views/pane/ipane-view';
 import { IUpdatablePaneView } from '../views/pane/iupdatable-pane-view';
@@ -22,14 +23,17 @@ import { SeriesMarkersPaneView } from '../views/pane/series-markers-pane-view';
 import { SeriesPriceLinePaneView } from '../views/pane/series-price-line-pane-view';
 import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
 import { SeriesPriceAxisView } from '../views/price-axis/series-price-axis-view';
+import { ITimeAxisView } from '../views/time-axis/itime-axis-view';
 
-import { AutoscaleInfoImpl } from './autoscale-info-impl';
+import { AutoscaleInfoImpl, AutoScaleMargins } from './autoscale-info-impl';
 import { BarPrice, BarPrices } from './bar';
 import { ChartModel } from './chart-model';
 import { Coordinate } from './coordinate';
 import { CustomPriceLine } from './custom-price-line';
 import { isDefaultPriceScale } from './default-price-scale';
+import { CustomData, CustomSeriesWhitespaceData, ICustomSeriesPaneView, WhitespaceCheck } from './icustom-series';
 import { FirstValue } from './iprice-data-source';
+import { ISeriesPrimitiveBase, PrimitiveHoveredItem, SeriesPrimitivePaneViewZOrder } from './iseries-primitive';
 import { Pane } from './pane';
 import { PlotRowValueIndex } from './plot-data';
 import { MismatchDirection } from './plot-list';
@@ -49,8 +53,38 @@ import {
 	SeriesPartialOptionsMap,
 	SeriesType,
 } from './series-options';
+import { ISeriesPrimitivePaneViewWrapper, SeriesPrimitiveWrapper } from './series-primitive-wrapper';
 import { TimePoint, TimePointIndex } from './time-data';
 
+type PrimitivePaneViewExtractor = (wrapper: SeriesPrimitiveWrapper) => readonly ISeriesPrimitivePaneViewWrapper[];
+function extractPrimitivePaneViews(
+	primitives: SeriesPrimitiveWrapper[],
+	extractor: PrimitivePaneViewExtractor,
+	zOrder: SeriesPrimitivePaneViewZOrder,
+	destination: IPaneView[]
+): void {
+	primitives.forEach((wrapper: SeriesPrimitiveWrapper) => {
+		extractor(wrapper).forEach((paneView: ISeriesPrimitivePaneViewWrapper) => {
+			if (paneView.zOrder() !== zOrder) {
+				return;
+			}
+			destination.push(paneView);
+		});
+	});
+}
+
+function primitivePaneViewsExtractor(wrapper: SeriesPrimitiveWrapper): readonly ISeriesPrimitivePaneViewWrapper[] {
+	return wrapper.paneViews();
+}
+function primitivePricePaneViewsExtractor(wrapper: SeriesPrimitiveWrapper): readonly ISeriesPrimitivePaneViewWrapper[] {
+	return wrapper.priceAxisPaneViews();
+}
+function primitiveTimePaneViewsExtractor(wrapper: SeriesPrimitiveWrapper): readonly ISeriesPrimitivePaneViewWrapper[] {
+	return wrapper.timeAxisPaneViews();
+}
+
+type CustomDataToPlotRowValueConverter = (item: CustomData | CustomSeriesWhitespaceData) => number[];
+
 export interface LastValueDataResultWithoutData {
 	noData: true;
 }
@@ -84,6 +118,7 @@ export interface SeriesDataAtTypeMap {
 	Baseline: BarPrice;
 	Line: BarPrice;
 	Histogram: BarPrice;
+	Custom: BarPrice;
 }
 
 export interface SeriesUpdateInfo {
@@ -103,7 +138,7 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 	private readonly _priceLineView: SeriesPriceLinePaneView = new SeriesPriceLinePaneView(this);
 	private readonly _customPriceLines: CustomPriceLine[] = [];
 	private readonly _baseHorizontalLineView: SeriesHorizontalBaseLinePaneView = new SeriesHorizontalBaseLinePaneView(this);
-	private _paneView!: IUpdatablePaneView;
+	private _paneView!: IUpdatablePaneView | SeriesCustomPaneView;
 	private readonly _lastPriceAnimationPaneView: SeriesLastPriceAnimationPaneView | null = null;
 	private _barColorerCache: SeriesBarColorer<T> | null = null;
 	private readonly _options: SeriesOptionsInternal<T>;
@@ -111,8 +146,9 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 	private _indexedMarkers: InternalSeriesMarker<TimePointIndex>[] = [];
 	private _markersPaneView!: SeriesMarkersPaneView;
 	private _animationTimeoutId: TimerId | null = null;
+	private _primitives: SeriesPrimitiveWrapper[] = [];
 
-	public constructor(model: ChartModel, options: SeriesOptionsInternal<T>, seriesType: T) {
+	public constructor(model: ChartModel, options: SeriesOptionsInternal<T>, seriesType: T, pane?: Pane, customPaneView?: ICustomSeriesPaneView) {
 		super(model);
 		this._options = options;
 		this._seriesType = seriesType;
@@ -128,7 +164,7 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 
 		this._recreateFormatter();
 
-		this._recreatePaneViews();
+		this._recreatePaneViews(customPaneView);
 	}
 
 	public destroy(): void {
@@ -330,7 +366,7 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		if (prices === null) {
 			return null;
 		}
-		if (this._seriesType === 'Bar' || this._seriesType === 'Candlestick') {
+		if (this._seriesType === 'Bar' || this._seriesType === 'Candlestick' || this._seriesType === 'Custom') {
 			return {
 				open: prices.value[PlotRowValueIndex.Open] as BarPrice,
 				high: prices.value[PlotRowValueIndex.High] as BarPrice,
@@ -343,9 +379,11 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 	}
 
 	public topPaneViews(pane: Pane): readonly IPaneView[] {
+		const res: IPaneView[] = [];
+		extractPrimitivePaneViews(this._primitives, primitivePaneViewsExtractor, 'top', res);
 		const animationPaneView = this._lastPriceAnimationPaneView;
 		if (animationPaneView === null || !animationPaneView.visible()) {
-			return [];
+			return res;
 		}
 
 		if (this._animationTimeoutId === null && animationPaneView.animationActive()) {
@@ -359,7 +397,8 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		}
 
 		animationPaneView.invalidateStage();
-		return [animationPaneView];
+		res.push(animationPaneView);
+		return res;
 	}
 
 	public paneViews(): readonly IPaneView[] {
@@ -377,10 +416,32 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 
 		const priceLineViews = this._customPriceLines.map((line: CustomPriceLine) => line.paneView());
 		res.push(...priceLineViews);
+		extractPrimitivePaneViews(this._primitives, primitivePaneViewsExtractor, 'normal', res);
 
 		return res;
 	}
 
+	public bottomPaneViews(): readonly IPaneView[] {
+		return this._extractPaneViews(primitivePaneViewsExtractor, 'bottom');
+	}
+
+	public pricePaneViews(zOrder: SeriesPrimitivePaneViewZOrder): readonly IPaneView[] {
+		return this._extractPaneViews(primitivePricePaneViewsExtractor, zOrder);
+	}
+
+	public timePaneViews(zOrder: SeriesPrimitivePaneViewZOrder): readonly IPaneView[] {
+		return this._extractPaneViews(primitiveTimePaneViewsExtractor, zOrder);
+	}
+
+	public primitiveHitTest(x: Coordinate, y: Coordinate): PrimitiveHoveredItem[] {
+		return this._primitives
+			.map((primitive: SeriesPrimitiveWrapper) => primitive.hitTest(x, y))
+			.filter(
+				(result: PrimitiveHoveredItem | null): result is PrimitiveHoveredItem =>
+					result !== null
+			);
+	}
+
 	public override labelPaneViews(pane?: Pane): readonly IPaneView[] {
 		return [
 			this._panePriceAxisView,
@@ -396,9 +457,20 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		for (const customPriceLine of this._customPriceLines) {
 			result.push(customPriceLine.priceAxisView());
 		}
+		this._primitives.forEach((wrapper: SeriesPrimitiveWrapper) => {
+			result.push(...wrapper.priceAxisViews());
+		});
 		return result;
 	}
 
+	public override timeAxisViews(): readonly ITimeAxisView[] {
+		const res: ITimeAxisView[] = [];
+		this._primitives.forEach((wrapper: SeriesPrimitiveWrapper) => {
+			res.push(...wrapper.timeAxisViews());
+		});
+		return res;
+	}
+
 	public autoscaleInfo(startTimePoint: TimePointIndex, endTimePoint: TimePointIndex): AutoscaleInfoImpl | null {
 		if (this._options.autoscaleInfoProvider !== undefined) {
 			const autoscaleInfo = this._options.autoscaleInfoProvider(() => {
@@ -434,6 +506,8 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		this._priceLineView.update();
 		this._baseHorizontalLineView.update();
 		this._lastPriceAnimationPaneView?.update();
+
+		this._primitives.forEach((wrapper: SeriesPrimitiveWrapper) => wrapper.updateAllViews());
 	}
 
 	public override priceScale(): PriceScale {
@@ -467,6 +541,32 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		return this._options.visible;
 	}
 
+	public attachPrimitive(primitive: ISeriesPrimitiveBase): void {
+		this._primitives.push(new SeriesPrimitiveWrapper(primitive, this));
+	}
+
+	public detachPrimitive(source: ISeriesPrimitiveBase): void {
+		this._primitives = this._primitives.filter((wrapper: SeriesPrimitiveWrapper) => wrapper.primitive() !== source);
+	}
+
+	public customSeriesPlotValuesBuilder(): CustomDataToPlotRowValueConverter | undefined {
+		if (this._paneView instanceof SeriesCustomPaneView === false) {
+			return undefined;
+		}
+		return (data: CustomData | CustomSeriesWhitespaceData) => {
+			return (this._paneView as SeriesCustomPaneView).priceValueBuilder(data);
+		};
+	}
+
+	public customSeriesWhitespaceCheck(): WhitespaceCheck | undefined {
+		if (this._paneView instanceof SeriesCustomPaneView === false) {
+			return undefined;
+		}
+		return (data: CustomData | CustomSeriesWhitespaceData): data is CustomSeriesWhitespaceData => {
+			return (this._paneView as SeriesCustomPaneView).isWhitespace(data);
+		};
+	}
+
 	private _isOverlay(): boolean {
 		const priceScale = this.priceScale();
 		return !isDefaultPriceScale(priceScale.id());
@@ -493,7 +593,26 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 			range = range !== null ? range.merge(rangeWithBase) : rangeWithBase;
 		}
 
-		return new AutoscaleInfoImpl(range,	this._markersPaneView.autoScaleMargins());
+		let margins = this._markersPaneView.autoScaleMargins();
+		this._primitives.forEach((primitive: SeriesPrimitiveWrapper) => {
+			const primitiveAutoscale = primitive.autoscaleInfo(
+				startTimePoint,
+				endTimePoint
+			);
+
+			if (primitiveAutoscale?.priceRange) {
+				const primitiveRange = new PriceRangeImpl(
+					primitiveAutoscale.priceRange.minValue,
+					primitiveAutoscale.priceRange.maxValue
+				);
+				range = range !== null ? range.merge(primitiveRange) : primitiveRange;
+			}
+			if (primitiveAutoscale?.margins) {
+				margins = mergeMargins(margins, primitiveAutoscale.margins);
+			}
+		});
+
+		return new AutoscaleInfoImpl(range,	margins);
 	}
 
 	private _markerRadius(): number {
@@ -605,7 +724,7 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		});
 	}
 
-	private _recreatePaneViews(): void {
+	private _recreatePaneViews(customPaneView?: ICustomSeriesPaneView): void {
 		this._markersPaneView = new SeriesMarkersPaneView(this, this.model());
 
 		switch (this._seriesType) {
@@ -624,6 +743,11 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 				break;
 			}
 
+			case 'Custom': {
+				this._paneView = new SeriesCustomPaneView(this as Series<'Custom'>, this.model(), ensureDefined(customPaneView));
+				break;
+			}
+
 			case 'Area': {
 				this._paneView = new SeriesAreaPaneView(this as Series<'Area'>, this.model());
 				break;
@@ -642,4 +766,17 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 			default: throw Error('Unknown chart style assigned: ' + this._seriesType);
 		}
 	}
+
+	private _extractPaneViews(extractor: PrimitivePaneViewExtractor, zOrder: SeriesPrimitivePaneViewZOrder): readonly IPaneView[] {
+		const res: IPaneView[] = [];
+		extractPrimitivePaneViews(this._primitives, extractor, zOrder, res);
+		return res;
+	}
+}
+
+function mergeMargins(source: AutoScaleMargins | null, additionalMargin: AutoScaleMargins): AutoScaleMargins {
+	return {
+		above: Math.max(source?.above ?? 0, additionalMargin.above),
+		below: Math.max(source?.below ?? 0, additionalMargin.below),
+	};
 }
diff --git a/src/renderers/iaxis-view-renderer.ts b/src/renderers/iaxis-view-renderer.ts
new file mode 100644
index 0000000000..992adf532a
--- /dev/null
+++ b/src/renderers/iaxis-view-renderer.ts
@@ -0,0 +1,6 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+export interface IAxisRenderer {
+	draw(target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void;
+	drawBackground?(target: CanvasRenderingTarget2D, isHovered: boolean, hitTestData?: unknown): void;
+}
diff --git a/src/views/pane/custom-pane-view.ts b/src/views/pane/custom-pane-view.ts
new file mode 100644
index 0000000000..c48e152688
--- /dev/null
+++ b/src/views/pane/custom-pane-view.ts
@@ -0,0 +1,133 @@
+import { CanvasRenderingTarget2D } from 'fancy-canvas';
+
+import { undefinedIfNull } from '../../helpers/strict-type-checks';
+
+import { ChartModel } from '../../model/chart-model';
+import { Coordinate } from '../../model/coordinate';
+import {
+	CustomBarItemData,
+	CustomData,
+	CustomSeriesPricePlotValues,
+	CustomSeriesWhitespaceData,
+	ICustomSeriesPaneRenderer,
+	ICustomSeriesPaneView,
+	PriceToCoordinateConverter,
+} from '../../model/icustom-series';
+import { PriceScale } from '../../model/price-scale';
+import { Series } from '../../model/series';
+import { SeriesPlotRow } from '../../model/series-data';
+import { TimedValue } from '../../model/time-data';
+import { TimeScale } from '../../model/time-scale';
+import { IPaneRenderer } from '../../renderers/ipane-renderer';
+
+import { SeriesPaneViewBase } from './series-pane-view-base';
+
+type CustomBarItemBase = TimedValue;
+
+interface CustomBarItem extends CustomBarItemBase {
+	barColor: string;
+	originalData?: Record<string, unknown>;
+}
+
+class CustomSeriesPaneRendererWrapper implements IPaneRenderer {
+	private _sourceRenderer: ICustomSeriesPaneRenderer;
+	private _priceScale: PriceToCoordinateConverter;
+	public constructor(
+		sourceRenderer: ICustomSeriesPaneRenderer,
+		priceScale: PriceToCoordinateConverter
+	) {
+		this._sourceRenderer = sourceRenderer;
+		this._priceScale = priceScale;
+	}
+
+	public draw(
+		target: CanvasRenderingTarget2D,
+		isHovered: boolean,
+		hitTestData?: unknown
+	): void {
+		this._sourceRenderer.draw(target, this._priceScale, isHovered, hitTestData);
+	}
+}
+
+export class SeriesCustomPaneView extends SeriesPaneViewBase<
+	'Custom',
+	CustomBarItem,
+	CustomSeriesPaneRendererWrapper
+> {
+	protected readonly _renderer: CustomSeriesPaneRendererWrapper;
+	private readonly _paneView: ICustomSeriesPaneView;
+
+	public constructor(
+		series: Series<'Custom'>,
+		model: ChartModel,
+		paneView: ICustomSeriesPaneView
+	) {
+		super(series, model, false);
+		this._paneView = paneView;
+		this._renderer = new CustomSeriesPaneRendererWrapper(
+			this._paneView.renderer(),
+			(price: number) => {
+				const firstValue = series.firstValue();
+				if (firstValue === null) {
+					return null;
+				}
+				return series.priceScale().priceToCoordinate(price, firstValue.value);
+			}
+		);
+	}
+
+	public priceValueBuilder(plotRow: CustomData | CustomSeriesWhitespaceData): CustomSeriesPricePlotValues {
+		return this._paneView.priceValueBuilder(plotRow);
+	}
+
+	public isWhitespace(data: CustomData | CustomSeriesWhitespaceData): data is CustomSeriesWhitespaceData {
+		return this._paneView.isWhitespace(data);
+	}
+
+	protected _fillRawPoints(): void {
+		const colorer = this._series.barColorer();
+		this._items = this._series
+			.bars()
+			.rows()
+			.map((row: SeriesPlotRow<'Custom'>) => {
+				return {
+					time: row.index,
+					x: NaN as Coordinate,
+					...colorer.barStyle(row.index),
+					originalData: row.data,
+				};
+			});
+	}
+
+	protected override _convertToCoordinates(
+		priceScale: PriceScale,
+		timeScale: TimeScale
+	): void {
+		timeScale.indexesToCoordinates(
+			this._items,
+			undefinedIfNull(this._itemsVisibleRange)
+		);
+	}
+
+	protected _prepareRendererData(): void {
+		this._paneView.update(
+			{
+				bars: this._items.map(unwrapItemData) as CustomBarItemData[],
+				barSpacing: this._model.timeScale().barSpacing(),
+				visibleRange: this._itemsVisibleRange,
+			},
+			this._series.options()
+		);
+	}
+}
+
+function unwrapItemData(
+	item: CustomBarItem
+): Record<keyof CustomBarItem, unknown> {
+	return {
+		x: item.x,
+		time: item.time,
+		originalData: item.originalData,
+		barColor: item.barColor,
+	};
+}
diff --git a/src/views/pane/iaxis-view.ts b/src/views/pane/iaxis-view.ts
new file mode 100644
index 0000000000..e141fc3e5c
--- /dev/null
+++ b/src/views/pane/iaxis-view.ts
@@ -0,0 +1,5 @@
+import { IAxisRenderer } from '../../renderers/iaxis-view-renderer';
+
+export interface IAxisView {
+	renderer(): IAxisRenderer | null;
+}
diff --git a/tests/e2e/coverage/test-cases/chart/plugins.js b/tests/e2e/coverage/test-cases/chart/plugins.js
new file mode 100644
index 0000000000..0deffce5c5
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/chart/plugins.js
@@ -0,0 +1,157 @@
+function interactionsToPerform() {
+	return [];
+}
+
+function beforeInteractions(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+
+	chart.timeScale().applyOptions({
+		barSpacing: 50,
+		rightOffset: 5,
+	});
+	const s1 = chart.addLineSeries({
+		color: 'red',
+	});
+	s1.setData([
+		{ time: '2019-04-11', value: 80.01 },
+		{ time: '2019-04-12', value: 96.63 },
+		{ time: '2019-04-13', value: 76.64 },
+		{ time: '2019-04-14', value: 81.89 },
+		{ time: '2019-04-15', value: 74.43 },
+		{ time: '2019-04-16', value: 80.01 },
+	]);
+
+	const rect = new Rectangle(
+		chart,
+		s1,
+		{ time: '2019-04-11', price: 70.01 },
+		{ time: '2019-04-16', price: 90.01 }
+	);
+	s1.attachPrimitive(rect);
+
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
+
+class RectanglePaneRenderer {
+	constructor(p1, p2) {
+		this._p1 = p1;
+		this._p2 = p2;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const x1Scaled = Math.round(this._p1.x * scope.horizontalPixelRatio);
+			const y1Scaled = Math.round(this._p1.y * scope.verticalPixelRatio);
+			const x2Scaled = Math.round(this._p2.x * scope.horizontalPixelRatio);
+			const y2Scaled = Math.round(this._p2.y * scope.verticalPixelRatio);
+			const width = x2Scaled - x1Scaled + 1;
+			const height = y2Scaled - y1Scaled + 1;
+			ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
+			ctx.fillRect(x1Scaled, y1Scaled, width, height);
+		});
+	}
+}
+
+class RectanglePaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const series = this._source._series;
+		const y1 = series.priceToCoordinate(this._source._p1.price);
+		const y2 = series.priceToCoordinate(this._source._p2.price);
+		const timeScale = this._source._chart.timeScale();
+		const x1 = timeScale.timeToCoordinate(this._source._p1.time);
+		const x2 = timeScale.timeToCoordinate(this._source._p2.time);
+		this._p1 = { x: x1, y: y1 };
+		this._p2 = { x: x2, y: y2 };
+	}
+	renderer() {
+		return new RectanglePaneRenderer(this._p1, this._p2, this._source._color);
+	}
+}
+
+class RectangleTimeAxisView {
+	constructor(source, p) {
+		this._source = source;
+		this._p = p;
+	}
+	update() {
+		const timeScale = this._source._chart.timeScale();
+		this._x = timeScale.timeToCoordinate(this._p.time);
+	}
+	coordinate() {
+		return this._x;
+	}
+	text() {
+		return this._p.time;
+	}
+	textColor() {
+		return 'white';
+	}
+	backColor() {
+		return 'blue';
+	}
+}
+
+class RectanglePriceAxisView {
+	constructor(source, p) {
+		this._source = source;
+		this._p = p;
+	}
+	update() {
+		const series = this._source._series;
+		this._y = series.priceToCoordinate(this._p.price);
+	}
+	coordinate() {
+		return this._y;
+	}
+	text() {
+		return '' + this._p.price;
+	}
+	textColor() {
+		return 'white';
+	}
+	backColor() {
+		return 'blue';
+	}
+}
+
+class Rectangle {
+	constructor(chart, series, p1, p2, color) {
+		this._chart = chart;
+		this._series = series;
+		this._p1 = p1;
+		this._p2 = p2;
+		this._color = color;
+		this._paneViews = [new RectanglePaneView(this)];
+		this._timeAxisViews = [
+			new RectangleTimeAxisView(this, p1),
+			new RectangleTimeAxisView(this, p2),
+		];
+		this._priceAxisViews = [
+			new RectanglePriceAxisView(this, p1),
+			new RectanglePriceAxisView(this, p2),
+		];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+		this._timeAxisViews.forEach(pw => pw.update());
+		this._priceAxisViews.forEach(pw => pw.update());
+	}
+	priceAxisViews() {
+		return this._priceAxisViews;
+	}
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/auto-scale.js b/tests/e2e/coverage/test-cases/plugins/auto-scale.js
new file mode 100644
index 0000000000..b946b65ab8
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/auto-scale.js
@@ -0,0 +1,208 @@
+function interactionsToPerform() {
+	return [
+		{ action: 'moveMouseCenter', target: 'container' },
+		{ action: 'moveMouseCenter', target: 'pane' },
+		{ action: 'tap', target: 'pane' },
+		{ action: 'click', target: 'pane' },
+	];
+}
+
+class BandsIndicatorPaneRenderer {
+	constructor(data) {
+		this._viewData = data;
+	}
+	draw() {}
+	drawBackground(target) {
+		const points = this._viewData.data;
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			ctx.scale(scope.horizontalPixelRatio, scope.verticalPixelRatio);
+
+			ctx.strokeStyle = this._viewData.options.lineColor;
+			ctx.lineWidth = this._viewData.options.lineWidth;
+			ctx.beginPath();
+			const region = new Path2D();
+			const lines = new Path2D();
+			region.moveTo(points[0].x, points[0].upper);
+			lines.moveTo(points[0].x, points[0].upper);
+			for (const point of points) {
+				region.lineTo(point.x, point.upper);
+				lines.lineTo(point.x, point.upper);
+			}
+			const end = points.length - 1;
+			region.lineTo(points[end].x, points[end].lower);
+			lines.moveTo(points[end].x, points[end].lower);
+			for (let i = points.length - 2; i >= 0; i--) {
+				region.lineTo(points[i].x, points[i].lower);
+				lines.lineTo(points[i].x, points[i].lower);
+			}
+			region.lineTo(points[0].x, points[0].upper);
+			region.closePath();
+			ctx.stroke(lines);
+			ctx.fillStyle = this._viewData.options.fillColor;
+			ctx.fill(region);
+
+			ctx.restore();
+		});
+	}
+}
+
+class BandsIndicatorPaneView {
+	constructor(source) {
+		this._source = source;
+		this._data = {
+			data: [],
+			options: this._source._options,
+		};
+	}
+
+	update() {
+		const series = this._source.series;
+		const timeScale = this._source.chart.timeScale();
+		this._data.data = this._source._bandsData.map(d => ({
+			x: timeScale.timeToCoordinate(d.time) ?? -100,
+			upper: series.priceToCoordinate(d.upper) ?? -100,
+			lower: series.priceToCoordinate(d.lower) ?? -100,
+		}));
+	}
+
+	renderer() {
+		return new BandsIndicatorPaneRenderer(this._data);
+	}
+}
+
+function extractPrice(dataPoint) {
+	if (dataPoint.close) {return dataPoint.close;}
+	if (dataPoint.value) {return dataPoint.value;}
+	return undefined;
+}
+
+class PluginBase {
+	requestUpdate() {
+		if (this._requestUpdate) {
+			this._requestUpdate();
+		}
+	}
+	constructor() {
+		this._chart = undefined;
+		this._series = undefined;
+	}
+
+	attached({ chart, series, requestUpdate }) {
+		this._chart = chart;
+		this._series = series;
+		this._series.subscribeDataChanged(this._fireDataUpdated);
+		this._requestUpdate = requestUpdate;
+		this.requestUpdate();
+	}
+
+	detached() {
+		this._chart = undefined;
+		this._series = undefined;
+		this._requestUpdate = undefined;
+	}
+
+	get chart() {
+		return this._chart;
+	}
+
+	get series() {
+		return this._series;
+	}
+
+	_fireDataUpdated(scope) {
+		if (this.dataUpdated) {
+			this.dataUpdated(scope);
+		}
+	}
+}
+
+const defaults = {
+	lineColor: 'rgb(25, 200, 100)',
+	fillColor: 'rgba(25, 200, 100, 0.25)',
+	lineWidth: 1,
+};
+
+class BandsIndicator extends PluginBase {
+	constructor(options = {}) {
+		super();
+		this._options = { ...defaults, ...options };
+		this._paneViews = [new BandsIndicatorPaneView(this)];
+		this._minValue = Number.POSITIVE_INFINITY;
+		this._maxValue = Number.NEGATIVE_INFINITY;
+		this._seriesData = [];
+		this._bandsData = [];
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	attached(p) {
+		super.attached(p);
+		this.dataUpdated('full');
+	}
+
+	dataUpdated() {
+		this._seriesData = JSON.parse(JSON.stringify(this.series.data()));
+		this.calculateBands();
+	}
+
+	calculateBands() {
+		const bandData = new Array(this._seriesData.length);
+		let index = 0;
+		this._minValue = Number.POSITIVE_INFINITY;
+		this._maxValue = Number.NEGATIVE_INFINITY;
+		this._seriesData.forEach(d => {
+			const price = extractPrice(d);
+			if (price === undefined) {
+				return;
+			}
+			const upper = price * 2;
+			const lower = price * 0.5;
+			if (upper > this._maxValue) {
+				this._maxValue = upper;
+			}
+			if (lower < this._minValue) {
+				this._minValue = lower;
+			}
+			bandData[index] = {
+				upper,
+				lower,
+				time: d.time,
+			};
+			index += 1;
+		});
+		bandData.length = index;
+		this._bandsData = bandData;
+	}
+
+	autoscaleInfo() {
+		return {
+			priceRange: {
+				minValue: this._minValue,
+				maxValue: this._maxValue,
+			},
+		};
+	}
+}
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateLineData());
+
+	mainSeries.attachPrimitive(new BandsIndicator());
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/custom-series.js b/tests/e2e/coverage/test-cases/plugins/custom-series.js
new file mode 100644
index 0000000000..b4f05f264a
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/custom-series.js
@@ -0,0 +1,362 @@
+const dayLength = 24 * 60 * 60;
+
+function quartileDataPoint(q0, q1, q2, q3, q4, basePoint) {
+	return [
+		basePoint + q0,
+		basePoint + q1,
+		basePoint + q2,
+		basePoint + q3,
+		basePoint + q4,
+	];
+}
+
+function whiskerDataSection(startDate, basePoint) {
+	return [
+		{ quartiles: quartileDataPoint(55, 70, 80, 85, 95, basePoint) },
+		{ quartiles: quartileDataPoint(50, 70, 78, 83, 90, basePoint) },
+		{
+			quartiles: quartileDataPoint(58, 68, 75, 85, 90, basePoint),
+			outliers: [45 + basePoint, 50 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(55, 65, 70, 80, 88, basePoint) },
+		{ quartiles: quartileDataPoint(52, 63, 68, 77, 85, basePoint) },
+		{
+			quartiles: quartileDataPoint(50, 65, 72, 76, 88, basePoint),
+			outliers: [45 + basePoint, 95 + basePoint, 100 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(40, 60, 78, 85, 90, basePoint) },
+		{ quartiles: quartileDataPoint(45, 72, 80, 88, 95, basePoint) },
+		{ quartiles: quartileDataPoint(47, 70, 82, 86, 97, basePoint) },
+		{
+			quartiles: quartileDataPoint(53, 68, 83, 87, 92, basePoint),
+			outliers: [45 + basePoint, 100 + basePoint],
+		},
+	].map((d, index) => ({
+		...d,
+		time: startDate + index * dayLength,
+	}));
+}
+
+function sampleWhiskerData() {
+	return [
+		...whiskerDataSection(1677628800, 0),
+		...whiskerDataSection(1677628800 + 1 * 10 * dayLength, 20),
+		...whiskerDataSection(1677628800 + 2 * 10 * dayLength, 40),
+		...whiskerDataSection(1677628800 + (3 * 10 + 1) * dayLength, 30),
+	];
+}
+
+function determinePadding(halfWidth) {
+	if (halfWidth < 2) {return 0;}
+	if (halfWidth < 5) {return 1;}
+	return Math.ceil(halfWidth / 3);
+}
+
+function determineBodyWidth(remainingWidth) {
+	if (remainingWidth < 1) {return 0.5;}
+	return remainingWidth;
+}
+
+function determineLineWidths(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth <= 3) {return bodyWidth;}
+	return Math.ceil(bodyWidth / 2);
+}
+
+function determineMedianWidth(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth < 4) {return bodyWidth;}
+	return bodyWidth + 2;
+}
+
+function determineOutlierRadius(lineWidth) {
+	if (lineWidth > 6) {return 6;}
+	if (lineWidth < 1) {return 0;}
+	return lineWidth;
+}
+
+function desiredWidths(barSpacing) {
+	const widthExcludingWhisker = barSpacing - 1;
+	const halfWidth = Math.floor(widthExcludingWhisker / 2);
+
+	const padding = determinePadding(halfWidth);
+	const bodyWidth = determineBodyWidth(halfWidth - padding);
+	const medianWidth = determineMedianWidth(bodyWidth);
+	const lineWidth = determineLineWidths(bodyWidth);
+	const outlierRadius = determineOutlierRadius(bodyWidth);
+
+	return {
+		body: Math.ceil(bodyWidth),
+		medianLine: Math.round(medianWidth),
+		extremeLines: Math.round(lineWidth),
+		outlierRadius: Math.floor(outlierRadius),
+	};
+}
+
+class WhiskerBoxSeriesRenderer {
+	constructor() {
+		this._data = null;
+		this._options = null;
+	}
+
+	draw(
+		target,
+		priceConverter
+	) {
+		target.useMediaCoordinateSpace(scope =>
+			this._drawImpl(scope, priceConverter)
+		);
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._data = data;
+		this._options = options;
+	}
+
+	_drawImpl(
+		renderingScope,
+		priceToCoordinate
+	) {
+		if (
+			this._data === null ||
+			this._data.bars.length === 0 ||
+			this._data.visibleRange === null ||
+			this._options === null
+		) {
+			return;
+		}
+		const options = this._options;
+		const bars = this._data.bars.map(bar => ({
+			quartilesY: bar.originalData.quartiles.map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			outliers: (bar.originalData.outliers || []).map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			x: bar.x,
+		}));
+
+		const widths = desiredWidths(this._data.barSpacing);
+
+		renderingScope.context.save();
+		for (
+			let i = this._data.visibleRange.from;
+			i < this._data.visibleRange.to;
+			i++
+		) {
+			const bar = bars[i];
+			this._drawOutliers(
+				renderingScope.context,
+				bar,
+				widths.outlierRadius,
+				options
+			);
+			this._drawWhisker(
+				renderingScope.context,
+				bar,
+				widths.extremeLines,
+				options
+			);
+			this._drawBox(renderingScope.context, bar, widths.body, options);
+			this._drawMedianLine(
+				renderingScope.context,
+				bar,
+				widths.medianLine,
+				options
+			);
+		}
+		renderingScope.context.restore();
+	}
+
+	_drawWhisker(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x, bar.quartilesY[0]);
+		ctx.lineTo(bar.x, bar.quartilesY[1]);
+		ctx.moveTo(bar.x, bar.quartilesY[3]);
+		ctx.lineTo(bar.x, bar.quartilesY[4]);
+
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[0]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[0]);
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[4]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[4]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawBox(
+		ctx,
+		bar,
+		bodyWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.lowerQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[1],
+			bodyWidth * 2,
+			bar.quartilesY[2] - bar.quartilesY[1]
+		);
+		ctx.fillStyle = options.upperQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[2],
+			bodyWidth * 2,
+			bar.quartilesY[3] - bar.quartilesY[2]
+		);
+		ctx.restore();
+	}
+
+	_drawMedianLine(
+		ctx,
+		bar,
+		medianLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x - medianLineWidth, bar.quartilesY[2]);
+		ctx.lineTo(bar.x + medianLineWidth, bar.quartilesY[2]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawOutliers(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.outlierColor;
+		ctx.lineWidth = 0;
+		bar.outliers.forEach(outlier => {
+			ctx.beginPath();
+			ctx.arc(bar.x, outlier, extremeLineWidth, 0, 2 * Math.PI);
+			ctx.fill();
+			ctx.closePath();
+		});
+		ctx.restore();
+	}
+}
+
+const defaultOptions = {
+	...LightweightCharts.customSeriesDefaultOptions,
+	whiskerColor: '#456599',
+	lowerQuartileFill: '#846ED4',
+	upperQuartileFill: '#C44760',
+	outlierColor: '#777777',
+};
+
+class WhiskerBoxSeries {
+	constructor() {
+		this._renderer = new WhiskerBoxSeriesRenderer();
+	}
+
+	priceValueBuilder(plotRow) {
+		// we don't consider outliers here
+		return [plotRow.quartiles[4], plotRow.quartiles[0], plotRow.quartiles[2]];
+	}
+
+	isWhitespace(data) {
+		return (data).quartiles === undefined;
+	}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._renderer.update(data, options);
+	}
+
+	defaultOptions() {
+		return defaultOptions;
+	}
+}
+
+function interactionsToPerform() {
+	return [
+		{ action: 'moveMouseCenter', target: 'container' },
+		{ action: 'moveMouseCenter', target: 'pane' },
+		{ action: 'tap', target: 'pane' },
+		{ action: 'click', target: 'pane' },
+		{ action: 'scrollLeft', target: 'pane' },
+		{ action: 'scrollUp', target: 'pane' },
+		{ action: 'scrollDown', target: 'pane' },
+		{ action: 'scrollRight', target: 'pane' },
+		{ action: 'scrollUpRight', target: 'pane' },
+		{ action: 'scrollDownLeft', target: 'pane' },
+	];
+}
+
+function testSeriesApi(series) {
+	series.options();
+	series.coordinateToPrice(300);
+	series.priceToCoordinate(300);
+	series.priceScale();
+	series.applyOptions({
+		priceFormatter: a => a.toFixed(2),
+	});
+	series.priceFormatter();
+	series.seriesType();
+	series.markers();
+	series.dataByIndex(10);
+	series.dataByIndex(-5);
+	series.dataByIndex(-5, LightweightCharts.MismatchDirection.NearestRight);
+	series.dataByIndex(1500, LightweightCharts.MismatchDirection.NearestLeft);
+	series.dataByIndex(1500, LightweightCharts.MismatchDirection.None);
+}
+
+let myCustomSeries;
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const customSeriesView = new WhiskerBoxSeries();
+	myCustomSeries = chart.addCustomSeries(customSeriesView, {
+		baseLineColor: '',
+		priceLineVisible: false,
+		lastValueVisible: false,
+	});
+
+	const data = sampleWhiskerData();
+	data[data.length - 3] = { time: data[data.length - 3].time }; // test whitespace data
+	const lastPoint = data[data.length - 1];
+	myCustomSeries.setData(data.slice(0, -1));
+
+	chart.subscribeClick(p => {
+		console.log(p);
+	});
+	chart.subscribeCrosshairMove(p => {
+		console.log(p);
+	});
+
+	testSeriesApi(myCustomSeries);
+
+	chart.timeScale().fitContent();
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			myCustomSeries.applyOptions({ baseLineColor: 'red' });
+			myCustomSeries.update(lastPoint);
+			resolve();
+		});
+	});
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/hit-test.js b/tests/e2e/coverage/test-cases/plugins/hit-test.js
new file mode 100644
index 0000000000..46780eb427
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/hit-test.js
@@ -0,0 +1,126 @@
+function interactionsToPerform() {
+	return [
+		{ action: 'moveMouseCenter', target: 'container' },
+		{ action: 'moveMouseCenter', target: 'pane' },
+		{ action: 'tap', target: 'pane' },
+		{ action: 'click', target: 'pane' },
+	];
+}
+
+const testLayer = 'normal';
+const drawBackground = false; // whether the renderer is using drawBackground or draw
+
+class HitTestRenderer {
+	_draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			const width = scope.mediaSize.width;
+			const height = scope.mediaSize.height;
+			const boxWidth = Math.round(width / 2);
+			const boxHeight = Math.round(height / 2);
+			const x = Math.round((width - boxWidth) / 2);
+			const y = Math.round((height - boxHeight) / 2);
+
+			ctx.beginPath();
+			ctx.fillStyle = 'rgba(0,0,0,0.5)';
+			ctx.fillRect(x, y, boxWidth, boxHeight);
+			this._hitBox = {
+				x,
+				y,
+				height: boxHeight,
+				width: boxWidth,
+			};
+			ctx.restore();
+		});
+	}
+
+	draw(target) {
+		if (!drawBackground) {this._draw(target);}
+	}
+
+	drawBackground(target) {
+		if (drawBackground) {this._draw(target);}
+	}
+
+	hitTest(x, y) {
+		if (
+			!this._hitBox ||
+						x < this._hitBox.x ||
+						y < this._hitBox.y ||
+						x > this._hitBox.x + this._hitBox.width ||
+						y > this._hitBox.y + this._hitBox.height
+		) {return null;}
+		return {
+			cursorStyle: 'pointer',
+			externalId: 'HitTestID',
+		};
+	}
+}
+
+class HitTestPaneView {
+	constructor() {
+		this._renderer = new HitTestRenderer();
+	}
+
+	update() {}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	hitTest(x, y) {
+		const result = this._renderer.hitTest(x, y);
+		if (result) {
+			return {
+				...result,
+				zOrder: this.zOrder(),
+				isBackground: drawBackground,
+			};
+		}
+		return null;
+	}
+
+	zOrder() {
+		return testLayer;
+	}
+}
+
+class HitTest {
+	constructor() {
+		this._paneViews = [new HitTestPaneView()];
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	hitTest(x, y) {
+		return this._paneViews[0].hitTest(x, y);
+	}
+}
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateLineData());
+
+	mainSeries.attachPrimitive(new HitTest());
+	chart.subscribeClick(p => {
+		console.log(p);
+	});
+	chart.subscribeCrosshairMove(p => {
+		console.log(p);
+	});
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/labels.js b/tests/e2e/coverage/test-cases/plugins/labels.js
new file mode 100644
index 0000000000..5673ae8616
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/labels.js
@@ -0,0 +1,52 @@
+class AxisView {
+	constructor(text, color, position) {
+		this._color = color;
+		this._text = text;
+		this._position = position;
+	}
+	coordinate() {
+		return this._position;
+	}
+	text() {
+		return this._text;
+	}
+	textColor() {
+		return '#FFFFFF';
+	}
+	backColor() {
+		return this._color;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._priceAxisViews = [new AxisView('price label', '#BB3355', 80)];
+		this._timeAxisViews = [new AxisView('time label', '#33AA55', 200)];
+	}
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+
+	priceAxisViews() {
+		return this._priceAxisViews;
+	}
+}
+
+function interactionsToPerform() {
+	return [];
+}
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateLineData());
+	mainSeries.attachPrimitive(new TestPlugin());
+
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/layers.js b/tests/e2e/coverage/test-cases/plugins/layers.js
new file mode 100644
index 0000000000..ce89704525
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/layers.js
@@ -0,0 +1,87 @@
+class TestPaneRenderer {
+	constructor(size, drawBackground, colours) {
+		this._size = size;
+		this._drawBackground = drawBackground;
+		this._colours = colours;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.fillStyle = this._colours[0];
+			ctx.fillRect(0, 0, this._size, this._size);
+		});
+	}
+	drawBackground(target) {
+		if (!this._drawBackground) {
+			return;
+		}
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.fillStyle = this._colours[1];
+			ctx.fillRect(0, 0, this._size + 25, this._size + 25);
+		});
+	}
+}
+
+class TestsPaneView {
+	constructor(zorder, size, drawBackground, colours) {
+		this._zorder = zorder;
+		this._renderer = new TestPaneRenderer(size, drawBackground, colours);
+	}
+	renderer() {
+		return this._renderer;
+	}
+	zOrder() {
+		return this._zorder;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._paneViews = [
+			new TestsPaneView('top', 100, true, ['red', 'blue']),
+			new TestsPaneView('normal', 200, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 300, true, ['orange', 'black']),
+		];
+		this._pricePaneViews = [
+			new TestsPaneView('top', 50, true, ['red', 'blue']),
+			new TestsPaneView('normal', 100, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 150, true, ['orange', 'black']),
+		];
+		this._timePaneViews = [
+			new TestsPaneView('top', 50, true, ['red', 'blue']),
+			new TestsPaneView('normal', 100, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 150, true, ['orange', 'black']),
+		];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function interactionsToPerform() {
+	return [];
+}
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateLineData());
+	mainSeries.attachPrimitive(new TestPlugin());
+
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/panes.js b/tests/e2e/coverage/test-cases/plugins/panes.js
new file mode 100644
index 0000000000..63bd250979
--- /dev/null
+++ b/tests/e2e/coverage/test-cases/plugins/panes.js
@@ -0,0 +1,135 @@
+class LegendPaneRenderer {
+	constructor(sections) {
+		this._sections = Object.values(sections);
+	}
+	draw(target) {
+		const count = this._sections.length;
+		const longestText = this._sections.reduce((longest, section) => {
+			if (section.name.length > longest.length) {
+				return section.name;
+			}
+			return longest;
+		}, '');
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const longestTextMeasurements = ctx.measureText(longestText);
+			ctx.beginPath();
+			ctx.roundRect(
+				20,
+				20,
+				longestTextMeasurements.width + 40,
+				(count + 0) * 20 + 10,
+				8
+			);
+			ctx.globalAlpha = 0.95;
+			ctx.fillStyle = '#FFFFFF';
+			ctx.fill();
+			ctx.globalAlpha = 1;
+			let currentY = 30;
+			this._sections.forEach(section => {
+				ctx.beginPath();
+				ctx.roundRect(30, currentY, 10, 10, 3);
+				ctx.fillStyle = section.color;
+				ctx.fill();
+				ctx.fillStyle = '#000000';
+				ctx.textBaseline = 'bottom';
+				ctx.fillText(section.name, 50, currentY + 10);
+				currentY += 20;
+			});
+		});
+	}
+}
+
+class LegendView {
+	constructor(sections) {
+		this._renderer = new LegendPaneRenderer(sections);
+	}
+	zOrder() {
+		return 'top';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+			ctx.globalAlpha = 0.3;
+			ctx.fillStyle = this._color;
+			ctx.fill();
+			ctx.globalAlpha = 0.6;
+			ctx.lineWidth = 8;
+			ctx.strokeStyle = this._color;
+			ctx.stroke();
+			ctx.globalAlpha = 1;
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'bottom';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this.sections = {
+			pane: { color: '#4cc9f0', name: 'Chart Pane (paneViews)' },
+			price: {
+				color: '#f72585',
+				name: 'Price Pane (priceAxisPaneViews)',
+			},
+			time: { color: '#4361ee', name: 'Time Pane (timeAxisPaneViews)' },
+		};
+		this._paneViews = [
+			new PaneView(this.sections.pane.color),
+			new LegendView(this.sections),
+		];
+		this._pricePaneViews = [new PaneView(this.sections.price.color)];
+		this._timePaneViews = [new PaneView(this.sections.time.color)];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function interactionsToPerform() {
+	return [];
+}
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateLineData());
+	mainSeries.attachPrimitive(new TestPlugin());
+
+	return Promise.resolve();
+}
+
+function afterInteractions() {
+	return Promise.resolve();
+}
diff --git a/tests/e2e/graphics/test-cases/applying-options/re-enable-autosize.js b/tests/e2e/graphics/test-cases/applying-options/re-enable-autosize.js
new file mode 100644
index 0000000000..693e377559
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/applying-options/re-enable-autosize.js
@@ -0,0 +1,45 @@
+window.ignoreMouseMove = true;
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+function runTestCase(container) {
+	const box = document.createElement('div');
+	box.style.position = 'absolute';
+	box.style.top = 0;
+	box.style.left = 0;
+	box.style.width = '200px';
+	box.style.height = '200px';
+	container.appendChild(box);
+
+	const chart = LightweightCharts.createChart(box, { autoSize: true, height: 200, width: 200 });
+	const mainSeries = chart.addAreaSeries();
+
+	mainSeries.setData(generateData());
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			// remove autoSize
+			chart.applyOptions({ autoSize: false });
+			box.style.height = '225px';
+			requestAnimationFrame(() => {
+				// enable autoSize again.
+				// This test case is checking that you can have autoSize enabled, then removed, and then re-added again
+				chart.applyOptions({ autoSize: true });
+				box.style.height = '250px';
+				setTimeout(resolve, 300);
+			});
+		});
+	});
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/autoscaling.js b/tests/e2e/graphics/test-cases/plugins/autoscaling.js
new file mode 100644
index 0000000000..a831849636
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/autoscaling.js
@@ -0,0 +1,208 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class BandsIndicatorPaneRenderer {
+	constructor(data) {
+		this._viewData = data;
+	}
+	draw() {}
+	drawBackground(target) {
+		const points = this._viewData.data;
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			ctx.scale(scope.horizontalPixelRatio, scope.verticalPixelRatio);
+
+			ctx.strokeStyle = this._viewData.options.lineColor;
+			ctx.lineWidth = this._viewData.options.lineWidth;
+			ctx.beginPath();
+			const region = new Path2D();
+			const lines = new Path2D();
+			region.moveTo(points[0].x, points[0].upper);
+			lines.moveTo(points[0].x, points[0].upper);
+			for (const point of points) {
+				region.lineTo(point.x, point.upper);
+				lines.lineTo(point.x, point.upper);
+			}
+			const end = points.length - 1;
+			region.lineTo(points[end].x, points[end].lower);
+			lines.moveTo(points[end].x, points[end].lower);
+			for (let i = points.length - 2; i >= 0; i--) {
+				region.lineTo(points[i].x, points[i].lower);
+				lines.lineTo(points[i].x, points[i].lower);
+			}
+			region.lineTo(points[0].x, points[0].upper);
+			region.closePath();
+			ctx.stroke(lines);
+			ctx.fillStyle = this._viewData.options.fillColor;
+			ctx.fill(region);
+
+			ctx.restore();
+		});
+	}
+}
+
+class BandsIndicatorPaneView {
+	constructor(source) {
+		this._source = source;
+		this._data = {
+			data: [],
+			options: this._source._options,
+		};
+	}
+
+	update() {
+		const series = this._source.series;
+		const timeScale = this._source.chart.timeScale();
+		this._data.data = this._source._bandsData.map(d => ({
+			x: timeScale.timeToCoordinate(d.time) ?? -100,
+			upper: series.priceToCoordinate(d.upper) ?? -100,
+			lower: series.priceToCoordinate(d.lower) ?? -100,
+		}));
+	}
+
+	renderer() {
+		return new BandsIndicatorPaneRenderer(this._data);
+	}
+}
+
+function extractPrice(dataPoint) {
+	if (dataPoint.close) {return dataPoint.close;}
+	if (dataPoint.value) {return dataPoint.value;}
+	return undefined;
+}
+
+class PluginBase {
+	requestUpdate() {
+		if (this._requestUpdate) {
+			this._requestUpdate();
+		}
+	}
+	constructor() {
+		this._chart = undefined;
+		this._series = undefined;
+	}
+
+	attached({ chart, series, requestUpdate }) {
+		this._chart = chart;
+		this._series = series;
+		this._series.subscribeDataChanged(this._fireDataUpdated);
+		this._requestUpdate = requestUpdate;
+		this.requestUpdate();
+	}
+
+	detached() {
+		this._chart = undefined;
+		this._series = undefined;
+		this._requestUpdate = undefined;
+	}
+
+	get chart() {
+		return this._chart;
+	}
+
+	get series() {
+		return this._series;
+	}
+
+	_fireDataUpdated(scope) {
+		if (this.dataUpdated) {
+			this.dataUpdated(scope);
+		}
+	}
+}
+
+const defaults = {
+	lineColor: 'rgb(25, 200, 100)',
+	fillColor: 'rgba(25, 200, 100, 0.25)',
+	lineWidth: 1,
+};
+
+class BandsIndicator extends PluginBase {
+	constructor(options = {}) {
+		super();
+		this._options = { ...defaults, ...options };
+		this._paneViews = [new BandsIndicatorPaneView(this)];
+		this._minValue = Number.POSITIVE_INFINITY;
+		this._maxValue = Number.NEGATIVE_INFINITY;
+		this._seriesData = [];
+		this._bandsData = [];
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	attached(p) {
+		super.attached(p);
+		this.dataUpdated('full');
+	}
+
+	dataUpdated() {
+		this._seriesData = JSON.parse(JSON.stringify(this.series.data()));
+		this.calculateBands();
+	}
+
+	calculateBands() {
+		const bandData = new Array(this._seriesData.length);
+		let index = 0;
+		this._minValue = Number.POSITIVE_INFINITY;
+		this._maxValue = Number.NEGATIVE_INFINITY;
+		this._seriesData.forEach(d => {
+			const price = extractPrice(d);
+			if (price === undefined) {
+				return;
+			}
+			const upper = price * 2;
+			const lower = price * 0.5;
+			if (upper > this._maxValue) {
+				this._maxValue = upper;
+			}
+			if (lower < this._minValue) {
+				this._minValue = lower;
+			}
+			bandData[index] = {
+				upper,
+				lower,
+				time: d.time,
+			};
+			index += 1;
+		});
+		bandData.length = index;
+		this._bandsData = bandData;
+	}
+
+	autoscaleInfo() {
+		return {
+			priceRange: {
+				minValue: this._minValue,
+				maxValue: this._maxValue,
+			},
+		};
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	const data = generateData();
+	mainSeries.setData(data);
+	const bandIndicator = new BandsIndicator();
+	mainSeries.attachPrimitive(bandIndicator);
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/axis-labels.js b/tests/e2e/graphics/test-cases/plugins/axis-labels.js
new file mode 100644
index 0000000000..4d97bdf710
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/axis-labels.js
@@ -0,0 +1,55 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class AxisView {
+	constructor(text, color, position) {
+		this._color = color;
+		this._text = text;
+		this._position = position;
+	}
+	coordinate() {
+		return this._position;
+	}
+	text() {
+		return this._text;
+	}
+	textColor() {
+		return '#FFFFFF';
+	}
+	backColor() {
+		return this._color;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._priceAxisViews = [new AxisView('price label', '#BB3355', 80)];
+		this._timeAxisViews = [new AxisView('time label', '#33AA55', 200)];
+	}
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+
+	priceAxisViews() {
+		return this._priceAxisViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/basic.js b/tests/e2e/graphics/test-cases/plugins/basic.js
new file mode 100644
index 0000000000..3674eff79f
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/basic.js
@@ -0,0 +1,500 @@
+/* eslint-disable max-classes-per-file */
+class VolumeProfileRenderer {
+	constructor(data) {
+		this._data = data;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const scaledX = Math.round(this._data.x * scope.horizontalPixelRatio);
+			const scaledTop = Math.round(this._data.top * scope.verticalPixelRatio);
+			const scaledWidth = Math.round(this._data.width * scope.horizontalPixelRatio);
+			const scaledHeight = Math.round(this._data.columnHeight * this._data.items.length * scope.verticalPixelRatio);
+
+			const scaledRowHeight = Math.round(this._data.columnHeight * scope.verticalPixelRatio);
+
+			ctx.fillStyle = 'rgba(0, 0, 255, 0.2)';
+			ctx.fillRect(scaledX, scaledTop, scaledWidth, -scaledHeight);
+
+			ctx.fillStyle = 'rgba(80, 80, 255, 0.8)';
+			this._data.items.forEach(row => {
+				ctx.fillRect(scaledX, Math.round(row.y * scope.verticalPixelRatio), Math.round(row.width * scope.horizontalPixelRatio), 1 - scaledRowHeight);
+			});
+		});
+	}
+}
+
+class VolumeProfilePaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const data = this._source._vpData;
+		const series = this._source._series;
+		const timeScale = this._source._chart.timeScale();
+		this._x = timeScale.timeToCoordinate(data.time);
+		this._width = timeScale.options().barSpacing;
+
+		const y1 = series.priceToCoordinate(data.profile[0].price);
+		const y2 = series.priceToCoordinate(data.profile[1].price);
+		this._columnHeight = Math.max(1, y1 - y2);
+		const maxVolume = data.profile.reduce((acc, item) => Math.max(acc, item.vol), 0);
+
+		this._top = y1;
+
+		this._items = data.profile.map(row => ({
+			y: series.priceToCoordinate(row.price),
+			width: this._width * row.vol / maxVolume,
+		}));
+	}
+
+	renderer() {
+		return new VolumeProfileRenderer({
+			x: this._x,
+			top: this._top,
+			columnHeight: this._columnHeight,
+			width: this._width,
+			items: this._items,
+		});
+	}
+}
+
+class VolumeProfile {
+	// points - {date, price}
+	constructor(chart, series, vpData) {
+		this._chart = chart;
+		this._series = series;
+		this._vpData = vpData;
+		this._paneViews = [new VolumeProfilePaneView(this)];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+	priceAxisViews() {
+		return [];
+	}
+	timeAxisViews() {
+		return [];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
+
+class VertLinePaneRenderer {
+	constructor(x) {
+		this._x = x;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const xScaled = Math.round(this._x * scope.horizontalPixelRatio) + 0.5;
+			ctx.strokeStyle = 'red';
+			ctx.lineWidth = 3;
+			ctx.beginPath();
+			ctx.moveTo(xScaled, 0);
+			ctx.lineTo(xScaled, scope.bitmapSize.height);
+			ctx.stroke();
+		});
+	}
+}
+
+class VertLinePaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const timeScale = this._source._chart.timeScale();
+		this._x = timeScale.timeToCoordinate(this._source._time);
+	}
+	renderer() {
+		return new VertLinePaneRenderer(this._x);
+	}
+}
+
+class VertLineTimeAxisView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const timeScale = this._source._chart.timeScale();
+		this._x = timeScale.timeToCoordinate(this._source._time);
+	}
+	coordinate() {
+		return this._x;
+	}
+	text() {
+		return this._source._time;
+	}
+	textColor() {
+		return 'white';
+	}
+	backColor() {
+		return 'green';
+	}
+}
+
+class VertLine {
+	// points - {date, price}
+	constructor(chart, series, time) {
+		this._chart = chart;
+		this._series = series;
+		this._time = time;
+		this._paneViews = [new VertLinePaneView(this)];
+		this._timeAxisViews = [new VertLineTimeAxisView(this)];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+		this._timeAxisViews.forEach(tw => tw.update());
+	}
+	priceAxisViews() {
+		return [];
+	}
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
+
+class TrendLinePaneRenderer {
+	constructor(p1, p2, text) {
+		this._p1 = p1;
+		this._p2 = p2;
+		this._text = text;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const x1Scaled = Math.round(this._p1.x * scope.horizontalPixelRatio);
+			const y1Scaled = Math.round(this._p1.y * scope.verticalPixelRatio);
+			const x2Scaled = Math.round(this._p2.x * scope.horizontalPixelRatio);
+			const y2Scaled = Math.round(this._p2.y * scope.verticalPixelRatio);
+			ctx.lineWidth = 2;
+			ctx.strokeStyle = 'blue';
+			ctx.beginPath();
+			ctx.moveTo(x1Scaled, y1Scaled);
+			ctx.lineTo(x2Scaled, y2Scaled);
+			ctx.stroke();
+			ctx.font = '24px Arial';
+			ctx.fillStyle = 'green';
+			ctx.fillText(this._text, x2Scaled, y2Scaled);
+		});
+	}
+}
+class TrendLinePaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const series = this._source._series;
+		const y1 = series.priceToCoordinate(this._source._p1.price);
+		const y2 = series.priceToCoordinate(this._source._p2.price);
+		const timeScale = this._source._chart.timeScale();
+		const x1 = timeScale.timeToCoordinate(this._source._p1.time);
+		const x2 = timeScale.timeToCoordinate(this._source._p2.time);
+		this._p1 = { x: x1, y: y1 };
+		this._p2 = { x: x2, y: y2 };
+	}
+	renderer() {
+		return new TrendLinePaneRenderer(this._p1, this._p2, '' + this._source._p2.price);
+	}
+}
+class TrendLine {
+	// points - {date, price}
+	constructor(chart, series, p1, p2) {
+		this._chart = chart;
+		this._series = series;
+		this._p1 = p1;
+		this._p2 = p2;
+		this._paneViews = [new TrendLinePaneView(this)];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+	priceAxisViews() {
+		return [];
+	}
+	timeAxisViews() {
+		return [];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
+
+class RectanglePaneRenderer {
+	constructor(p1, p2) {
+		this._p1 = p1;
+		this._p2 = p2;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const x1Scaled = Math.round(this._p1.x * scope.horizontalPixelRatio);
+			const y1Scaled = Math.round(this._p1.y * scope.verticalPixelRatio);
+			const x2Scaled = Math.round(this._p2.x * scope.horizontalPixelRatio);
+			const y2Scaled = Math.round(this._p2.y * scope.verticalPixelRatio);
+			const width = x2Scaled - x1Scaled + 1;
+			const height = y2Scaled - y1Scaled + 1;
+			ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
+			ctx.fillRect(x1Scaled, y1Scaled, width, height);
+		});
+	}
+}
+
+class RectanglePaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {
+		const series = this._source._series;
+		const y1 = series.priceToCoordinate(this._source._p1.price);
+		const y2 = series.priceToCoordinate(this._source._p2.price);
+		const timeScale = this._source._chart.timeScale();
+		const x1 = timeScale.timeToCoordinate(this._source._p1.time);
+		const x2 = timeScale.timeToCoordinate(this._source._p2.time);
+		this._p1 = { x: x1, y: y1 };
+		this._p2 = { x: x2, y: y2 };
+	}
+	renderer(height, width) {
+		return new RectanglePaneRenderer(this._p1, this._p2, this._source._color);
+	}
+}
+
+class RectangleTimeAxisView {
+	constructor(source, p) {
+		this._source = source;
+		this._p = p;
+	}
+	update() {
+		const timeScale = this._source._chart.timeScale();
+		this._x = timeScale.timeToCoordinate(this._p.time);
+	}
+	coordinate() {
+		return this._x;
+	}
+	text() {
+		return this._p.time;
+	}
+	textColor() {
+		return 'white';
+	}
+	backColor() {
+		return 'blue';
+	}
+}
+
+class RectanglePriceAxisView {
+	constructor(source, p) {
+		this._source = source;
+		this._p = p;
+	}
+	update() {
+		const series = this._source._series;
+		this._y = series.priceToCoordinate(this._p.price);
+	}
+	coordinate() {
+		return this._y;
+	}
+	text() {
+		return '' + this._p.price;
+	}
+	textColor() {
+		return 'white';
+	}
+	backColor() {
+		return 'blue';
+	}
+}
+
+class Rectangle {
+	// points - {date, price}
+	constructor(chart, series, p1, p2, color) {
+		this._chart = chart;
+		this._series = series;
+		this._p1 = p1;
+		this._p2 = p2;
+		this._color = color;
+		this._paneViews = [new RectanglePaneView(this)];
+		this._timeAxisViews = [new RectangleTimeAxisView(this, p1), new RectangleTimeAxisView(this, p2)];
+		this._priceAxisViews = [new RectanglePriceAxisView(this, p1), new RectanglePriceAxisView(this, p2)];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+		this._timeAxisViews.forEach(pw => pw.update());
+		this._priceAxisViews.forEach(pw => pw.update());
+	}
+	priceAxisViews() {
+		return this._priceAxisViews;
+	}
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
+
+class AnchoredTextRenderer {
+	constructor(data) {
+		this._data = data;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			ctx.font = this._data.font;
+			const textWidth = ctx.measureText(this._data.text).width;
+			ctx.scale(scope.horizontalPixelRatio, scope.verticalPixelRatio);
+			const horzMargin = 20;
+			let x = horzMargin;
+			const width = scope.mediaSize.width;
+			const height = scope.mediaSize.height;
+			switch (this._data.horzAlign) {
+				case 'right': {
+					x = width - horzMargin - textWidth;
+					break;
+				}
+				case 'middle': {
+					x = (width - textWidth / 2);
+					break;
+				}
+			}
+			const vertMargin = 10;
+			let y = vertMargin + this._data.lineHeight;
+			switch (this._data.vertAlign) {
+				case 'middle': {
+					y = (height - this._data.lineHeight) / 2;
+					break;
+				}
+				case 'bottom': {
+					y = height - vertMargin;
+					break;
+				}
+			}
+			ctx.fillStyle = this._data.color;
+			ctx.fillText(this._data.text, x, y);
+			ctx.restore();
+		});
+	}
+}
+
+class AnchoredTextPaneView {
+	constructor(source) {
+		this._source = source;
+	}
+	update() {}
+	renderer() {
+		return new AnchoredTextRenderer(this._source._data);
+	}
+}
+
+class AnchoredText {
+	constructor(chart, series, data) {
+		this._chart = chart;
+		this._series = series;
+		this._data = data;
+		this._paneViews = [new AnchoredTextPaneView(this)];
+	}
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+	priceAxisViews() {
+		return [];
+	}
+	timeAxisViews() {
+		return [];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container);
+
+	chart.timeScale().applyOptions({
+		barSpacing: 50,
+		rightOffset: 5,
+	});
+	const s1 = chart.addLineSeries({
+		color: 'red',
+	});
+	s1.setData([
+		{ time: '2019-04-11', value: 80.01 },
+		{ time: '2019-04-12', value: 96.63 },
+		{ time: '2019-04-13', value: 76.64 },
+		{ time: '2019-04-14', value: 81.89 },
+		{ time: '2019-04-15', value: 74.43 },
+		{ time: '2019-04-16', value: 80.01 },
+	]);
+
+	const rect = new Rectangle(chart, s1, { time: '2019-04-11', price: 70.01 }, { time: '2019-04-16', price: 90.01 });
+	s1.attachPrimitive(rect);
+
+	const trend = new TrendLine(chart, s1, { time: '2019-04-11', price: 70.01 }, { time: '2019-04-16', price: 90.01 }, 'trend');
+	s1.attachPrimitive(trend);
+
+	const vert = new VertLine(chart, s1, '2019-04-14');
+	s1.attachPrimitive(vert);
+
+	const vpData = {
+		time: '2019-04-12',
+		profile: [
+			{
+				price: 90,
+				vol: 4,
+			},
+			{
+				price: 91,
+				vol: 7,
+			},
+			{
+				price: 92,
+				vol: 7,
+			},
+			{
+				price: 93,
+				vol: 11,
+			},
+			{
+				price: 94,
+				vol: 17,
+			},
+			{
+				price: 95,
+				vol: 15,
+			},
+			{
+				price: 96,
+				vol: 10,
+			},
+			{
+				price: 97,
+				vol: 13,
+			},
+			{
+				price: 98,
+				vol: 1,
+			},
+			{
+				price: 99,
+				vol: 6,
+			},
+		],
+	};
+	const vp = new VolumeProfile(chart, s1, vpData);
+	s1.attachPrimitive(vp);
+
+	const anchoredText = new AnchoredText(chart, s1, {
+		vertAlign: 'top',
+		horzAlign: 'right',
+		text: 'My Text',
+		lineHeight: 54,
+		font: 'italic bold 54px Arial',
+		color: 'red',
+	});
+	s1.attachPrimitive(anchoredText);
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/custom-series.js b/tests/e2e/graphics/test-cases/plugins/custom-series.js
new file mode 100644
index 0000000000..7be5370237
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/custom-series.js
@@ -0,0 +1,305 @@
+const dayLength = 24 * 60 * 60;
+
+function quartileDataPoint(q0, q1, q2, q3, q4, basePoint) {
+	return [
+		basePoint + q0,
+		basePoint + q1,
+		basePoint + q2,
+		basePoint + q3,
+		basePoint + q4,
+	];
+}
+
+function whiskerDataSection(startDate, basePoint) {
+	return [
+		{ quartiles: quartileDataPoint(55, 70, 80, 85, 95, basePoint) },
+		{ quartiles: quartileDataPoint(50, 70, 78, 83, 90, basePoint) },
+		{
+			quartiles: quartileDataPoint(58, 68, 75, 85, 90, basePoint),
+			outliers: [45 + basePoint, 50 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(55, 65, 70, 80, 88, basePoint) },
+		{ quartiles: quartileDataPoint(52, 63, 68, 77, 85, basePoint) },
+		{
+			quartiles: quartileDataPoint(50, 65, 72, 76, 88, basePoint),
+			outliers: [45 + basePoint, 95 + basePoint, 100 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(40, 60, 78, 85, 90, basePoint) },
+		{ quartiles: quartileDataPoint(45, 72, 80, 88, 95, basePoint) },
+		{ quartiles: quartileDataPoint(47, 70, 82, 86, 97, basePoint) },
+		{
+			quartiles: quartileDataPoint(53, 68, 83, 87, 92, basePoint),
+			outliers: [45 + basePoint, 100 + basePoint],
+		},
+	].map((d, index) => ({
+		...d,
+		time: startDate + index * dayLength,
+	}));
+}
+
+function sampleWhiskerData() {
+	return [
+		...whiskerDataSection(1677628800, 0),
+		...whiskerDataSection(1677628800 + 1 * 10 * dayLength, 20),
+		...whiskerDataSection(1677628800 + 2 * 10 * dayLength, 40),
+		...whiskerDataSection(1677628800 + (3 * 10 + 1) * dayLength, 30),
+	];
+}
+
+function determinePadding(halfWidth) {
+	if (halfWidth < 2) {return 0;}
+	if (halfWidth < 5) {return 1;}
+	return Math.ceil(halfWidth / 3);
+}
+
+function determineBodyWidth(remainingWidth) {
+	if (remainingWidth < 1) {return 0.5;}
+	return remainingWidth;
+}
+
+function determineLineWidths(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth <= 3) {return bodyWidth;}
+	return Math.ceil(bodyWidth / 2);
+}
+
+function determineMedianWidth(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth < 4) {return bodyWidth;}
+	return bodyWidth + 2;
+}
+
+function determineOutlierRadius(lineWidth) {
+	if (lineWidth > 6) {return 6;}
+	if (lineWidth < 1) {return 0;}
+	return lineWidth;
+}
+
+function desiredWidths(barSpacing) {
+	const widthExcludingWhisker = barSpacing - 1;
+	const halfWidth = Math.floor(widthExcludingWhisker / 2);
+
+	const padding = determinePadding(halfWidth);
+	const bodyWidth = determineBodyWidth(halfWidth - padding);
+	const medianWidth = determineMedianWidth(bodyWidth);
+	const lineWidth = determineLineWidths(bodyWidth);
+	const outlierRadius = determineOutlierRadius(bodyWidth);
+
+	return {
+		body: Math.ceil(bodyWidth),
+		medianLine: Math.round(medianWidth),
+		extremeLines: Math.round(lineWidth),
+		outlierRadius: Math.floor(outlierRadius),
+	};
+}
+
+class WhiskerBoxSeriesRenderer {
+	constructor() {
+		this._data = null;
+		this._options = null;
+	}
+
+	draw(
+		target,
+		priceConverter
+	) {
+		target.useMediaCoordinateSpace(scope =>
+			this._drawImpl(scope, priceConverter)
+		);
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._data = data;
+		this._options = options;
+	}
+
+	_drawImpl(
+		renderingScope,
+		priceToCoordinate
+	) {
+		if (
+			this._data === null ||
+			this._data.bars.length === 0 ||
+			this._data.visibleRange === null ||
+			this._options === null
+		) {
+			return;
+		}
+		const options = this._options;
+		const bars = this._data.bars.map(bar => ({
+			quartilesY: bar.originalData.quartiles.map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			outliers: (bar.originalData.outliers || []).map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			x: bar.x,
+		}));
+
+		const widths = desiredWidths(this._data.barSpacing);
+
+		renderingScope.context.save();
+		for (
+			let i = this._data.visibleRange.from;
+			i < this._data.visibleRange.to;
+			i++
+		) {
+			const bar = bars[i];
+			this._drawOutliers(
+				renderingScope.context,
+				bar,
+				widths.outlierRadius,
+				options
+			);
+			this._drawWhisker(
+				renderingScope.context,
+				bar,
+				widths.extremeLines,
+				options
+			);
+			this._drawBox(renderingScope.context, bar, widths.body, options);
+			this._drawMedianLine(
+				renderingScope.context,
+				bar,
+				widths.medianLine,
+				options
+			);
+		}
+		renderingScope.context.restore();
+	}
+
+	_drawWhisker(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x, bar.quartilesY[0]);
+		ctx.lineTo(bar.x, bar.quartilesY[1]);
+		ctx.moveTo(bar.x, bar.quartilesY[3]);
+		ctx.lineTo(bar.x, bar.quartilesY[4]);
+
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[0]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[0]);
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[4]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[4]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawBox(
+		ctx,
+		bar,
+		bodyWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.lowerQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[1],
+			bodyWidth * 2,
+			bar.quartilesY[2] - bar.quartilesY[1]
+		);
+		ctx.fillStyle = options.upperQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[2],
+			bodyWidth * 2,
+			bar.quartilesY[3] - bar.quartilesY[2]
+		);
+		ctx.restore();
+	}
+
+	_drawMedianLine(
+		ctx,
+		bar,
+		medianLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x - medianLineWidth, bar.quartilesY[2]);
+		ctx.lineTo(bar.x + medianLineWidth, bar.quartilesY[2]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawOutliers(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.outlierColor;
+		ctx.lineWidth = 0;
+		bar.outliers.forEach(outlier => {
+			ctx.beginPath();
+			ctx.arc(bar.x, outlier, extremeLineWidth, 0, 2 * Math.PI);
+			ctx.fill();
+			ctx.closePath();
+		});
+		ctx.restore();
+	}
+}
+
+const defaultOptions = {
+	...LightweightCharts.customSeriesDefaultOptions,
+	whiskerColor: '#456599',
+	lowerQuartileFill: '#846ED4',
+	upperQuartileFill: '#C44760',
+	outlierColor: '#777777',
+};
+
+class WhiskerBoxSeries {
+	constructor() {
+		this._renderer = new WhiskerBoxSeriesRenderer();
+	}
+
+	priceValueBuilder(plotRow) {
+		// we don't consider outliers here
+		return [plotRow.quartiles[4], plotRow.quartiles[0], plotRow.quartiles[2]];
+	}
+
+	isWhitespace(data) {
+		return (data).quartiles === undefined;
+	}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._renderer.update(data, options);
+	}
+
+	defaultOptions() {
+		return defaultOptions;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+
+	const customSeriesView = new WhiskerBoxSeries();
+	const myCustomSeries = chart.addCustomSeries(customSeriesView, {
+		baseLineColor: '',
+		priceLineVisible: false,
+		lastValueVisible: false,
+	});
+
+	const data = sampleWhiskerData();
+	data[data.length - 2] = { time: data[data.length - 2].time }; // test whitespace data
+	myCustomSeries.setData(data);
+
+	chart.timeScale().fitContent();
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/layer-bottom.js b/tests/e2e/graphics/test-cases/plugins/layer-bottom.js
new file mode 100644
index 0000000000..725d49a1dd
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/layer-bottom.js
@@ -0,0 +1,86 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				Math.round(scope.mediaSize.width / 2) - 1,
+				0,
+				scope.mediaSize.width,
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+	drawBackground(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				0,
+				0,
+				Math.round(scope.mediaSize.width / 2),
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'bottom';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._paneViews = [new PaneView('#4361ee')];
+		this._pricePaneViews = [new PaneView('#f72585')];
+		this._timePaneViews = [new PaneView('#4cc9f0')];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/layer-normal.js b/tests/e2e/graphics/test-cases/plugins/layer-normal.js
new file mode 100644
index 0000000000..4cb81f24ca
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/layer-normal.js
@@ -0,0 +1,86 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				Math.round(scope.mediaSize.width / 2) - 1,
+				0,
+				scope.mediaSize.width,
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+	drawBackground(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				0,
+				0,
+				Math.round(scope.mediaSize.width / 2),
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'normal';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._paneViews = [new PaneView('#4361ee')];
+		this._pricePaneViews = [new PaneView('#f72585')];
+		this._timePaneViews = [new PaneView('#4cc9f0')];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/layer-top.js b/tests/e2e/graphics/test-cases/plugins/layer-top.js
new file mode 100644
index 0000000000..7d3ac57a88
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/layer-top.js
@@ -0,0 +1,86 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				Math.round(scope.mediaSize.width / 2) - 1,
+				0,
+				scope.mediaSize.width,
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+	drawBackground(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(
+				0,
+				0,
+				Math.round(scope.mediaSize.width / 2),
+				scope.mediaSize.height
+			);
+			ctx.fillStyle = this._color;
+			ctx.fill();
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'top';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._paneViews = [new PaneView('#4361ee')];
+		this._pricePaneViews = [new PaneView('#f72585')];
+		this._timePaneViews = [new PaneView('#4cc9f0')];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/layers.js b/tests/e2e/graphics/test-cases/plugins/layers.js
new file mode 100644
index 0000000000..ab246b4bb4
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/layers.js
@@ -0,0 +1,90 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class TestPaneRenderer {
+	constructor(size, drawBackground, colours) {
+		this._size = size;
+		this._drawBackground = drawBackground;
+		this._colours = colours;
+	}
+	draw(target) {
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.fillStyle = this._colours[0];
+			ctx.fillRect(0, 0, this._size, this._size);
+		});
+	}
+	drawBackground(target) {
+		if (!this._drawBackground) {
+			return;
+		}
+		target.useBitmapCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.fillStyle = this._colours[1];
+			ctx.fillRect(0, 0, this._size + 25, this._size + 25);
+		});
+	}
+}
+
+class TestsPaneView {
+	constructor(zorder, size, drawBackground, colours) {
+		this._zorder = zorder;
+		this._renderer = new TestPaneRenderer(size, drawBackground, colours);
+	}
+	renderer() {
+		return this._renderer;
+	}
+	zOrder() {
+		return this._zorder;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this._paneViews = [
+			new TestsPaneView('top', 100, true, ['red', 'blue']),
+			new TestsPaneView('normal', 200, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 300, true, ['orange', 'black']),
+		];
+		this._pricePaneViews = [
+			new TestsPaneView('top', 50, true, ['red', 'blue']),
+			new TestsPaneView('normal', 100, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 150, true, ['orange', 'black']),
+		];
+		this._timePaneViews = [
+			new TestsPaneView('top', 50, true, ['red', 'blue']),
+			new TestsPaneView('normal', 100, true, ['green', 'yellow']),
+			new TestsPaneView('bottom', 150, true, ['orange', 'black']),
+		];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/graphics/test-cases/plugins/panes.js b/tests/e2e/graphics/test-cases/plugins/panes.js
new file mode 100644
index 0000000000..6dc1fc8afd
--- /dev/null
+++ b/tests/e2e/graphics/test-cases/plugins/panes.js
@@ -0,0 +1,138 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 1; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+class LegendPaneRenderer {
+	constructor(sections) {
+		this._sections = Object.values(sections);
+	}
+	draw(target) {
+		const count = this._sections.length;
+		const longestText = this._sections.reduce((longest, section) => {
+			if (section.name.length > longest.length) {
+				return section.name;
+			}
+			return longest;
+		}, '');
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const longestTextMeasurements = ctx.measureText(longestText);
+			ctx.beginPath();
+			ctx.roundRect(
+				20,
+				20,
+				longestTextMeasurements.width + 40,
+				(count + 0) * 20 + 10,
+				8
+			);
+			ctx.globalAlpha = 0.95;
+			ctx.fillStyle = '#FFFFFF';
+			ctx.fill();
+			ctx.globalAlpha = 1;
+			let currentY = 30;
+			this._sections.forEach(section => {
+				ctx.beginPath();
+				ctx.roundRect(30, currentY, 10, 10, 3);
+				ctx.fillStyle = section.color;
+				ctx.fill();
+				ctx.fillStyle = '#000000';
+				ctx.textBaseline = 'bottom';
+				ctx.fillText(section.name, 50, currentY + 10);
+				currentY += 20;
+			});
+		});
+	}
+}
+
+class LegendView {
+	constructor(sections) {
+		this._renderer = new LegendPaneRenderer(sections);
+	}
+	zOrder() {
+		return 'top';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+			ctx.globalAlpha = 0.3;
+			ctx.fillStyle = this._color;
+			ctx.fill();
+			ctx.globalAlpha = 0.6;
+			ctx.lineWidth = 8;
+			ctx.strokeStyle = this._color;
+			ctx.stroke();
+			ctx.globalAlpha = 1;
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'bottom';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class TestPlugin {
+	constructor() {
+		this.sections = {
+			pane: { color: '#4cc9f0', name: 'Chart Pane (paneViews)' },
+			price: {
+				color: '#f72585',
+				name: 'Price Pane (priceAxisPaneViews)',
+			},
+			time: { color: '#4361ee', name: 'Time Pane (timeAxisPaneViews)' },
+		};
+		this._paneViews = [
+			new PaneView(this.sections.pane.color),
+			new LegendView(this.sections),
+		];
+		this._pricePaneViews = [new PaneView(this.sections.price.color)];
+		this._timePaneViews = [new PaneView(this.sections.time.color)];
+	}
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+function runTestCase(container) {
+	const chart = (window.chart = LightweightCharts.createChart(container));
+	const mainSeries = chart.addLineSeries();
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new TestPlugin());
+}
diff --git a/tests/e2e/interactions/test-cases/plugins/custom-series-mouse-params.js b/tests/e2e/interactions/test-cases/plugins/custom-series-mouse-params.js
new file mode 100644
index 0000000000..00e57d6f96
--- /dev/null
+++ b/tests/e2e/interactions/test-cases/plugins/custom-series-mouse-params.js
@@ -0,0 +1,345 @@
+const dayLength = 24 * 60 * 60;
+
+function quartileDataPoint(q0, q1, q2, q3, q4, basePoint) {
+	return [
+		basePoint + q0,
+		basePoint + q1,
+		basePoint + q2,
+		basePoint + q3,
+		basePoint + q4,
+	];
+}
+
+function whiskerDataSection(startDate, basePoint) {
+	return [
+		{ quartiles: quartileDataPoint(55, 70, 80, 85, 95, basePoint) },
+		{ quartiles: quartileDataPoint(50, 70, 78, 83, 90, basePoint) },
+		{
+			quartiles: quartileDataPoint(58, 68, 75, 85, 90, basePoint),
+			outliers: [45 + basePoint, 50 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(55, 65, 70, 80, 88, basePoint) },
+		{ quartiles: quartileDataPoint(52, 63, 68, 77, 85, basePoint) },
+		{
+			quartiles: quartileDataPoint(50, 65, 72, 76, 88, basePoint),
+			outliers: [45 + basePoint, 95 + basePoint, 100 + basePoint],
+		},
+		{ quartiles: quartileDataPoint(40, 60, 78, 85, 90, basePoint) },
+		{ quartiles: quartileDataPoint(45, 72, 80, 88, 95, basePoint) },
+		{ quartiles: quartileDataPoint(47, 70, 82, 86, 97, basePoint) },
+		{
+			quartiles: quartileDataPoint(53, 68, 83, 87, 92, basePoint),
+			outliers: [45 + basePoint, 100 + basePoint],
+		},
+	].map((d, index) => ({
+		...d,
+		time: startDate + index * dayLength,
+	}));
+}
+
+function sampleWhiskerData() {
+	return [
+		...whiskerDataSection(1677628800, 0),
+		...whiskerDataSection(1677628800 + 1 * 10 * dayLength, 20),
+		...whiskerDataSection(1677628800 + 2 * 10 * dayLength, 40),
+		...whiskerDataSection(1677628800 + (3 * 10 + 1) * dayLength, 30),
+	];
+}
+
+function determinePadding(halfWidth) {
+	if (halfWidth < 2) {return 0;}
+	if (halfWidth < 5) {return 1;}
+	return Math.ceil(halfWidth / 3);
+}
+
+function determineBodyWidth(remainingWidth) {
+	if (remainingWidth < 1) {return 0.5;}
+	return remainingWidth;
+}
+
+function determineLineWidths(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth <= 3) {return bodyWidth;}
+	return Math.ceil(bodyWidth / 2);
+}
+
+function determineMedianWidth(bodyWidth) {
+	if (bodyWidth < 1) {return 0;}
+	if (bodyWidth < 4) {return bodyWidth;}
+	return bodyWidth + 2;
+}
+
+function determineOutlierRadius(lineWidth) {
+	if (lineWidth > 6) {return 6;}
+	if (lineWidth < 1) {return 0;}
+	return lineWidth;
+}
+
+function desiredWidths(barSpacing) {
+	const widthExcludingWhisker = barSpacing - 1;
+	const halfWidth = Math.floor(widthExcludingWhisker / 2);
+
+	const padding = determinePadding(halfWidth);
+	const bodyWidth = determineBodyWidth(halfWidth - padding);
+	const medianWidth = determineMedianWidth(bodyWidth);
+	const lineWidth = determineLineWidths(bodyWidth);
+	const outlierRadius = determineOutlierRadius(bodyWidth);
+
+	return {
+		body: Math.ceil(bodyWidth),
+		medianLine: Math.round(medianWidth),
+		extremeLines: Math.round(lineWidth),
+		outlierRadius: Math.floor(outlierRadius),
+	};
+}
+
+class WhiskerBoxSeriesRenderer {
+	constructor() {
+		this._data = null;
+		this._options = null;
+	}
+
+	draw(
+		target,
+		priceConverter
+	) {
+		target.useMediaCoordinateSpace(scope =>
+			this._drawImpl(scope, priceConverter)
+		);
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._data = data;
+		this._options = options;
+	}
+
+	_drawImpl(
+		renderingScope,
+		priceToCoordinate
+	) {
+		if (
+			this._data === null ||
+			this._data.bars.length === 0 ||
+			this._data.visibleRange === null ||
+			this._options === null
+		) {
+			return;
+		}
+		const options = this._options;
+		const bars = this._data.bars.map(bar => ({
+			quartilesY: bar.originalData.quartiles.map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			outliers: (bar.originalData.outliers || []).map(price => Math.round((priceToCoordinate(price) ?? 0))),
+			x: bar.x,
+		}));
+
+		const widths = desiredWidths(this._data.barSpacing);
+
+		renderingScope.context.save();
+		for (
+			let i = this._data.visibleRange.from;
+			i < this._data.visibleRange.to;
+			i++
+		) {
+			const bar = bars[i];
+			this._drawOutliers(
+				renderingScope.context,
+				bar,
+				widths.outlierRadius,
+				options
+			);
+			this._drawWhisker(
+				renderingScope.context,
+				bar,
+				widths.extremeLines,
+				options
+			);
+			this._drawBox(renderingScope.context, bar, widths.body, options);
+			this._drawMedianLine(
+				renderingScope.context,
+				bar,
+				widths.medianLine,
+				options
+			);
+		}
+		renderingScope.context.restore();
+	}
+
+	_drawWhisker(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x, bar.quartilesY[0]);
+		ctx.lineTo(bar.x, bar.quartilesY[1]);
+		ctx.moveTo(bar.x, bar.quartilesY[3]);
+		ctx.lineTo(bar.x, bar.quartilesY[4]);
+
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[0]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[0]);
+		ctx.moveTo(bar.x - extremeLineWidth, bar.quartilesY[4]);
+		ctx.lineTo(bar.x + extremeLineWidth, bar.quartilesY[4]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawBox(
+		ctx,
+		bar,
+		bodyWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.lowerQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[1],
+			bodyWidth * 2,
+			bar.quartilesY[2] - bar.quartilesY[1]
+		);
+		ctx.fillStyle = options.upperQuartileFill;
+		ctx.fillRect(
+			bar.x - bodyWidth,
+			bar.quartilesY[2],
+			bodyWidth * 2,
+			bar.quartilesY[3] - bar.quartilesY[2]
+		);
+		ctx.restore();
+	}
+
+	_drawMedianLine(
+		ctx,
+		bar,
+		medianLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = options.whiskerColor;
+		ctx.beginPath();
+		ctx.moveTo(bar.x - medianLineWidth, bar.quartilesY[2]);
+		ctx.lineTo(bar.x + medianLineWidth, bar.quartilesY[2]);
+		ctx.stroke();
+		ctx.restore();
+	}
+
+	_drawOutliers(
+		ctx,
+		bar,
+		extremeLineWidth,
+		options
+	) {
+		ctx.save();
+		ctx.fillStyle = options.outlierColor;
+		ctx.lineWidth = 0;
+		bar.outliers.forEach(outlier => {
+			ctx.beginPath();
+			ctx.arc(bar.x, outlier, extremeLineWidth, 0, 2 * Math.PI);
+			ctx.fill();
+			ctx.closePath();
+		});
+		ctx.restore();
+	}
+}
+
+const defaultOptions = {
+	...LightweightCharts.customSeriesDefaultOptions,
+	whiskerColor: '#456599',
+	lowerQuartileFill: '#846ED4',
+	upperQuartileFill: '#C44760',
+	outlierColor: '#777777',
+};
+
+class WhiskerBoxSeries {
+	constructor() {
+		this._renderer = new WhiskerBoxSeriesRenderer();
+	}
+
+	priceValueBuilder(plotRow) {
+		// we don't consider outliers here
+		return [plotRow.quartiles[4], plotRow.quartiles[0], plotRow.quartiles[2]];
+	}
+
+	isWhitespace(data) {
+		return (data).quartiles === undefined;
+	}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	update(
+		data,
+		options
+	) {
+		this._renderer.update(data, options);
+	}
+
+	defaultOptions() {
+		return defaultOptions;
+	}
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'click' }];
+}
+
+function finalInteractionsToPerform() {
+	return [];
+}
+
+let pass = false;
+
+function beforeInteractions(container) {
+	const chart = LightweightCharts.createChart(container);
+
+	const customSeriesView = new WhiskerBoxSeries();
+	const myCustomSeries = chart.addCustomSeries(customSeriesView, {
+		baseLineColor: '',
+		priceLineVisible: false,
+		lastValueVisible: false,
+	});
+
+	const data = sampleWhiskerData();
+	myCustomSeries.setData(data);
+	chart.timeScale().fitContent();
+
+	chart.subscribeClick(mouseParams => {
+		if (!mouseParams) {
+			return;
+		}
+		const csdata = mouseParams.seriesData.get(myCustomSeries);
+		if (!csdata) {
+			return;
+		}
+		if (csdata.quartiles && csdata.quartiles.length === 5 && csdata.time) {
+			pass = true;
+			return;
+		}
+	});
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return Promise.resolve();
+}
+
+function afterFinalInteractions() {
+	if (!pass) {
+		throw new Error("Expected hoveredObjectId to be equal to 'TEST'.");
+	}
+
+	return Promise.resolve();
+}
diff --git a/tests/e2e/interactions/test-cases/plugins/hit-test-bottom.js b/tests/e2e/interactions/test-cases/plugins/hit-test-bottom.js
new file mode 100644
index 0000000000..8305208ac3
--- /dev/null
+++ b/tests/e2e/interactions/test-cases/plugins/hit-test-bottom.js
@@ -0,0 +1,181 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+const testLayer = 'normal';
+const drawBackground = true; // whether the renderer is using drawBackground or draw
+
+class HitTestRenderer {
+	_draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			const width = scope.mediaSize.width;
+			const height = scope.mediaSize.height;
+			const boxWidth = Math.round(width / 2);
+			const boxHeight = Math.round(height / 2);
+			const x = Math.round((width - boxWidth) / 2);
+			const y = Math.round((height - boxHeight) / 2);
+
+			ctx.beginPath();
+			ctx.fillStyle = 'rgba(0,0,0,0.5)';
+			ctx.fillRect(x, y, boxWidth, boxHeight);
+			this._hitBox = {
+				x,
+				y,
+				height: boxHeight,
+				width: boxWidth,
+			};
+			ctx.restore();
+		});
+	}
+
+	draw(target) {
+		if (!drawBackground) {this._draw(target);}
+	}
+
+	drawBackground(target) {
+		if (drawBackground) {this._draw(target);}
+	}
+
+	hitTest(x, y) {
+		if (
+			!this._hitBox ||
+						x < this._hitBox.x ||
+						y < this._hitBox.y ||
+						x > this._hitBox.x + this._hitBox.width ||
+						y > this._hitBox.y + this._hitBox.height
+		) {return null;}
+		return {
+			cursorStyle: 'pointer',
+			externalId: 'PLUGIN',
+		};
+	}
+}
+
+class HitTestPaneView {
+	constructor() {
+		this._renderer = new HitTestRenderer();
+	}
+
+	update() {}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	hitTest(x, y) {
+		const result = this._renderer.hitTest(x, y);
+		if (result) {
+			return {
+				...result,
+				zOrder: this.zOrder(),
+				isBackground: drawBackground,
+			};
+		}
+		return null;
+	}
+
+	zOrder() {
+		return testLayer;
+	}
+}
+
+class HitTest {
+	constructor() {
+		this._paneViews = [new HitTestPaneView()];
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	hitTest(x, y) {
+		return this._paneViews[0].hitTest(x, y);
+	}
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'click' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'click' }];
+}
+
+let chart;
+let createdPriceLine = false;
+let pass = false;
+
+function beforeInteractions(container) {
+	chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new HitTest());
+
+	chart.subscribeClick(mouseParams => {
+		if (!mouseParams) {
+			return;
+		}
+		if (mouseParams.hoveredObjectId === 'TEST') {
+			pass = true;
+			return;
+		}
+		if (!createdPriceLine) {
+			const price = mainSeries.coordinateToPrice(mouseParams.point.y);
+			const myPriceLine = {
+				price,
+				color: '#000',
+				lineWidth: 2,
+				lineStyle: 2,
+				axisLabelVisible: false,
+				title: '',
+				id: 'TEST',
+			};
+			mainSeries.createPriceLine(myPriceLine);
+			createdPriceLine = true;
+		}
+	});
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			setTimeout(resolve, 500); // large enough so the browser doesn't think it is a double click
+		});
+	});
+}
+
+function afterFinalInteractions() {
+	if (!createdPriceLine) {
+		throw new Error('Expected price line to be created and added to series.');
+	}
+
+	if (!pass) {
+		throw new Error("Expected hoveredObjectId to be equal to 'TEST'.");
+	}
+
+	return Promise.resolve();
+}
diff --git a/tests/e2e/interactions/test-cases/plugins/hit-test-top.js b/tests/e2e/interactions/test-cases/plugins/hit-test-top.js
new file mode 100644
index 0000000000..50ad5d1bba
--- /dev/null
+++ b/tests/e2e/interactions/test-cases/plugins/hit-test-top.js
@@ -0,0 +1,181 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+const testLayer = 'top';
+const drawBackground = false; // whether the renderer is using drawBackground or draw
+
+class HitTestRenderer {
+	_draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			const width = scope.mediaSize.width;
+			const height = scope.mediaSize.height;
+			const boxWidth = Math.round(width / 2);
+			const boxHeight = Math.round(height / 2);
+			const x = Math.round((width - boxWidth) / 2);
+			const y = Math.round((height - boxHeight) / 2);
+
+			ctx.beginPath();
+			ctx.fillStyle = 'rgba(0,0,0,0.5)';
+			ctx.fillRect(x, y, boxWidth, boxHeight);
+			this._hitBox = {
+				x,
+				y,
+				height: boxHeight,
+				width: boxWidth,
+			};
+			ctx.restore();
+		});
+	}
+
+	draw(target) {
+		if (!drawBackground) {this._draw(target);}
+	}
+
+	drawBackground(target) {
+		if (drawBackground) {this._draw(target);}
+	}
+
+	hitTest(x, y) {
+		if (
+			!this._hitBox ||
+						x < this._hitBox.x ||
+						y < this._hitBox.y ||
+						x > this._hitBox.x + this._hitBox.width ||
+						y > this._hitBox.y + this._hitBox.height
+		) {return null;}
+		return {
+			cursorStyle: 'pointer',
+			externalId: 'PLUGIN',
+		};
+	}
+}
+
+class HitTestPaneView {
+	constructor() {
+		this._renderer = new HitTestRenderer();
+	}
+
+	update() {}
+
+	renderer() {
+		return this._renderer;
+	}
+
+	hitTest(x, y) {
+		const result = this._renderer.hitTest(x, y);
+		if (result) {
+			return {
+				...result,
+				zOrder: this.zOrder(),
+				isBackground: drawBackground,
+			};
+		}
+		return null;
+	}
+
+	zOrder() {
+		return testLayer;
+	}
+}
+
+class HitTest {
+	constructor() {
+		this._paneViews = [new HitTestPaneView()];
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	hitTest(x, y) {
+		return this._paneViews[0].hitTest(x, y);
+	}
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'click' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'click' }];
+}
+
+let chart;
+let createdPriceLine = false;
+let pass = false;
+
+function beforeInteractions(container) {
+	chart = LightweightCharts.createChart(container);
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+	mainSeries.attachPrimitive(new HitTest());
+
+	chart.subscribeClick(mouseParams => {
+		if (!mouseParams) {
+			return;
+		}
+		if (createdPriceLine && mouseParams.hoveredObjectId === 'PLUGIN') {
+			pass = true;
+			return;
+		}
+		if (!createdPriceLine) {
+			const price = mainSeries.coordinateToPrice(mouseParams.point.y);
+			const myPriceLine = {
+				price,
+				color: '#000',
+				lineWidth: 2,
+				lineStyle: 2,
+				axisLabelVisible: false,
+				title: '',
+				id: 'TEST',
+			};
+			mainSeries.createPriceLine(myPriceLine);
+			createdPriceLine = true;
+		}
+	});
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			setTimeout(resolve, 500); // large enough so the browser doesn't think it is a double click
+		});
+	});
+}
+
+function afterFinalInteractions() {
+	if (!createdPriceLine) {
+		throw new Error('Expected price line to be created and added to series.');
+	}
+
+	if (!pass) {
+		throw new Error("Expected hoveredObjectId to be equal to 'TEST'.");
+	}
+
+	return Promise.resolve();
+}
diff --git a/tests/type-checks/plugins.ts b/tests/type-checks/plugins.ts
new file mode 100644
index 0000000000..fab06e294a
--- /dev/null
+++ b/tests/type-checks/plugins.ts
@@ -0,0 +1,109 @@
+import { createChart, customSeriesDefaultOptions } from '../../src';
+import { CandlestickData, WhitespaceData } from '../../src/api/data-consumer';
+import { CustomData, CustomSeriesPricePlotValues, ICustomSeriesPaneRenderer, ICustomSeriesPaneView, PaneRendererCustomData } from '../../src/model/icustom-series';
+import { CustomSeriesOptions } from '../../src/model/series-options';
+import { Time } from '../../src/model/time-data';
+
+interface WhiskerBoxSeriesOptions extends CustomSeriesOptions {
+	whiskerColor: string;
+	lowerQuartileFill: string;
+	upperQuartileFill: string;
+	outlierColor: string;
+}
+
+const defaultOptions: WhiskerBoxSeriesOptions = {
+	...customSeriesDefaultOptions,
+	whiskerColor: '',
+	lowerQuartileFill: '',
+	upperQuartileFill: '',
+	outlierColor: '',
+} as const;
+
+interface WhiskerData extends CustomData {
+	quartiles: [
+		number,
+		number,
+		number,
+		number,
+		number
+	];
+	outliers?: number[];
+}
+
+class WhiskerBoxSeries<TData extends WhiskerData>
+	implements ICustomSeriesPaneView<TData, WhiskerBoxSeriesOptions> {
+	public priceValueBuilder(plotRow: TData): CustomSeriesPricePlotValues {
+		return [];
+	}
+
+	public isWhitespace(data: TData | WhitespaceData): data is WhitespaceData {
+		return (data as Partial<TData>).quartiles === undefined;
+	}
+
+	public renderer(): ICustomSeriesPaneRenderer {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		return {} as ICustomSeriesPaneRenderer;
+	}
+
+	public update(
+		data: PaneRendererCustomData<TData>,
+		options: WhiskerBoxSeriesOptions
+	): void {}
+
+	public defaultOptions(): WhiskerBoxSeriesOptions {
+		return defaultOptions;
+	}
+}
+
+const chart = createChart('anything');
+const customSeriesView = new WhiskerBoxSeries();
+
+// @ts-expect-error invalid property
+const failSeries = chart.addCustomSeries(customSeriesView, { badOption: 123 });
+// @ts-expect-error invalid value
+const failSeries2 = chart.addCustomSeries(customSeriesView, { whiskerColor: 123 });
+
+const series = chart.addCustomSeries(customSeriesView, { whiskerColor: 'string' });
+
+const data: (WhiskerData | WhitespaceData)[] = [
+    { time: 12345 as Time }, // whitespace
+    // @ts-expect-error invalid data
+    { time: 12345 as Time, value: 1234 },
+    { time: 12345 as Time, quartiles: [1, 2, 3, 4, 5] },
+];
+
+series.setData(data);
+
+series.update({ time: 12345 as Time });
+// @ts-expect-error invalid data
+series.update({ time: 12345 as Time, value: 1234 });
+series.update({ time: 12345 as Time, quartiles: [1, 2, 3, 4, 5] });
+
+const notGreatData: CandlestickData[] = [{ time: 12345 as Time, open: 1234, high: 1234, low: 1234, close: 1234 }];
+series.setData(notGreatData); // this can still pass because it has time and thus could be whitespace
+
+const badData = [{ open: 1234, high: 1234, low: 1234, close: 1234 }] as const;
+// @ts-expect-error data should have at least `time` property
+series.setData(badData);
+
+const options: Readonly<WhiskerBoxSeriesOptions> = series.options();
+// @ts-expect-error should be readonly
+options.baseLineColor = 'orange';
+
+// @ts-expect-error invalid property
+series.applyOptions({ badOption: 123 });
+// @ts-expect-error invalid value
+series.applyOptions({ whiskerColor: 123 });
+series.applyOptions({ whiskerColor: 'string' });
+
+type ExpectedDataType = WhiskerData | WhitespaceData;
+export const dataPoint: ExpectedDataType | null = series.dataByIndex(1);
+
+const dataSet: readonly ExpectedDataType[] = series.data();
+if (dataSet) {
+    // @ts-expect-error readonly array
+	dataSet[0] = { time: 12 as Time };
+}
+// @ts-expect-error readonly array
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+dataSet.push({ time: 12 as Time });
diff --git a/tests/type-checks/tsconfig.composite.json b/tests/type-checks/tsconfig.composite.json
new file mode 100644
index 0000000000..3919f77650
--- /dev/null
+++ b/tests/type-checks/tsconfig.composite.json
@@ -0,0 +1,13 @@
+{
+	"extends": "../../tsconfig.composite.base.json",
+	"compilerOptions": {
+		"module": "commonjs",
+		"strict": true,
+	},
+	"references": [
+		{ "path": "../../src/tsconfig.composite.json" }
+	],
+	"include": [
+		"./**/*.ts"
+	]
+}
diff --git a/tests/unittests/data-layer.spec.ts b/tests/unittests/data-layer.spec.ts
index 251dcf7d05..c3ab5ac4b1 100644
--- a/tests/unittests/data-layer.spec.ts
+++ b/tests/unittests/data-layer.spec.ts
@@ -21,6 +21,8 @@ function createSeriesMock<T extends SeriesType = SeriesType>(seriesType?: T): Se
 	return {
 		bars: () => data,
 		seriesType: () => seriesType || 'Line',
+		customSeriesPlotValuesBuilder: () => {},
+		customSeriesWhitespaceCheck: () => {},
 	} as Series<T>;
 }
 
@@ -640,6 +642,115 @@ describe('DataLayer', () => {
 		});
 	});
 
+	describe('customValues', () => {
+		it('should be able to store customValues in a data point', () => {
+			const dataLayer = new DataLayer();
+
+			// actually we don't need to use Series, so we just use new Object()
+			const series1 = createSeriesMock();
+
+			const updateResult = dataLayer.setSeriesData(series1, [
+				dataItemAt(1000 as UTCTimestamp),
+				{
+					...dataItemAt(4000 as UTCTimestamp),
+					customValues: {
+						testValue: 1234,
+						testString: 'abc',
+					},
+				},
+			]);
+
+			updateResult.series.forEach((seriesUpdate: SeriesChanges, series: Series) => {
+				expect(seriesUpdate.data.length).to.be.equal(2);
+
+				if (series === series1) {
+					expect(seriesUpdate.data[1].index).to.be.equal(1 as TimePointIndex);
+					expect(seriesUpdate.data[1].time.timestamp).to.be.equal(4000 as UTCTimestamp);
+					expect(seriesUpdate.data[1].customValues).to.not.be.equal(undefined);
+					expect(seriesUpdate.data[1].customValues).to.deep.equal(
+						{ testValue: 1234, testString: 'abc' }
+					);
+				}
+			});
+		});
+
+		it('should be able to remove customValues from last existing point', () => {
+			const dataLayer = new DataLayer();
+
+			// actually we don't need to use Series, so we just use new Object()
+			const series1 = createSeriesMock();
+
+			dataLayer.setSeriesData(series1, [
+				dataItemAt(1000 as UTCTimestamp),
+				{
+					...dataItemAt(4000 as UTCTimestamp),
+					customValues: {
+						testValue: 1234,
+					},
+				},
+			]);
+
+			// change the last point of the first series
+			const updateResult = dataLayer.updateSeriesData(series1, dataItemAt(4000 as UTCTimestamp));
+			updateResult.series.forEach((seriesUpdate: SeriesChanges, series: Series) => {
+				expect(seriesUpdate.data.length).to.be.equal(2);
+
+				if (series === series1) {
+					expect(seriesUpdate.data[1].index).to.be.equal(1 as TimePointIndex);
+					expect(seriesUpdate.data[1].time.timestamp).to.be.equal(4000 as UTCTimestamp);
+					expect(seriesUpdate.data[1].customValues).to.be.equal(undefined);
+				}
+			});
+		});
+
+		it('should be able to replace data including customValues with whitespace', () => {
+			const dataLayer = new DataLayer();
+
+			const series = createSeriesMock();
+
+			dataLayer.setSeriesData(series, [
+				dataItemAt(1000 as UTCTimestamp),
+				dataItemAt(4000 as UTCTimestamp),
+				{
+					...dataItemAt(5000 as UTCTimestamp),
+					customValues: {
+						testValue: 1234,
+					},
+				},
+			]);
+
+			const updateResult = dataLayer.updateSeriesData(series, whitespaceItemAt(5000 as UTCTimestamp));
+
+			expect(updateResult.timeScale.baseIndex).to.be.equal(1 as TimePointIndex);
+			expect(updateResult.timeScale.points).to.be.equal(undefined);
+			expect(updateResult.timeScale.firstChangedPointIndex).to.be.equal(undefined);
+
+			expect(updateResult.series.size).to.be.equal(1);
+
+			const seriesUpdate = updateResult.series.get(series) as SeriesChanges;
+			expect(seriesUpdate).not.to.be.equal(undefined);
+			expect(seriesUpdate.data.length).to.be.equal(2);
+
+			expect(seriesUpdate.data[0].index).to.be.equal(0 as TimePointIndex);
+			expect(seriesUpdate.data[0].time.timestamp).to.be.equal(1000 as UTCTimestamp);
+
+			expect(seriesUpdate.data[1].index).to.be.equal(1 as TimePointIndex);
+			expect(seriesUpdate.data[1].time.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));
+			updateResultTwo.series.forEach((seriesUpdateTwo: SeriesChanges, updatedSeries: Series) => {
+				expect(seriesUpdateTwo.data.length).to.be.equal(3);
+
+				if (updatedSeries === series) {
+					expect(seriesUpdateTwo.data[2].index).to.be.equal(2 as TimePointIndex);
+					expect(seriesUpdateTwo.data[2].time.timestamp).to.be.equal(5000 as UTCTimestamp);
+					expect(seriesUpdateTwo.data[2].customValues).to.be.equal(undefined);
+				}
+			});
+		});
+	});
+
 	describe('whitespaces', () => {
 		it('should allow to set whitespaces to series', () => {
 			const dataLayer = new DataLayer();
diff --git a/website/docs/plugins/.eslintrc.js b/website/docs/plugins/.eslintrc.js
new file mode 100644
index 0000000000..5cd6c516c1
--- /dev/null
+++ b/website/docs/plugins/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+	globals: {
+		document: false,
+		createChart: false,
+	},
+};
diff --git a/website/docs/plugins/canvas-rendering-target.md b/website/docs/plugins/canvas-rendering-target.md
new file mode 100644
index 0000000000..2a36036fc1
--- /dev/null
+++ b/website/docs/plugins/canvas-rendering-target.md
@@ -0,0 +1,131 @@
+---
+sidebar_label: Canvas Rendering Target
+sidebar_position: 3
+---
+
+# Canvas Rendering Target
+
+The renderer functions used within the plugins (both Custom Series, and Drawing
+Primitives) are provided with a `CanvasRenderingTarget2D` interface on which the
+drawing logic (using the
+[Browser's 2D Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D))
+should be executed. `CanvasRenderingTarget2D` is provided by the
+[Fancy Canvas](https://github.com/tradingview/fancy-canvas) library.
+
+:::info
+
+The typescript definitions can be viewed here:
+
+- [fancy-canvas on npmjs.com](https://www.npmjs.com/package/fancy-canvas?activeTab=code)
+
+and specifically the definition for `CanvasRenderingTarget2D` can be viewed
+here:
+
+- [canvas-rendering-target.d.ts](https://unpkg.com/fancy-canvas/canvas-rendering-target.d.ts)
+
+:::
+
+## Using `CanvasRenderingTarget2D`
+
+`CanvasRenderingTarget2D` provides two rendering scope which you can use:
+
+- `useMediaCoordinateSpace`
+- `useBitmapCoordinateSpace`
+
+## Difference between Bitmap and Media
+
+Bitmap sizing represents the actual physical pixels on the device's screen,
+while the media size represents the size of a pixel according to the operating
+system (and browser) which is generally an integer representing the ratio of
+actual physical pixels are used to render a media pixel. This integer ratio is
+referred to as the device pixel ratio.
+
+Using the bitmap sizing allows for more control over the drawn image to ensure
+that the graphics are crisp and pixel perfect, however this generally means that
+the code will contain a lot multiplication of coordinates by the pixel ratio. In
+cases where you don't need to draw using the bitmap sizing then it is easier to
+use media sizing as you don't need to worry about the devices pixel ratio.
+
+### Bitmap Coordinate Space
+
+`useBitmapCoordinateSpace` can be used to if you would like draw using the
+actual devices pixels as the coordinate sizing. The provided scope (of type
+`BitmapCoordinatesRenderingScope`) contains readonly values for the following:
+
+- `context`
+  ([CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)).
+  Context which can be used for rendering.
+- `horizontalPixelRatio` (number)
+- `verticalPixelRatio` (number)
+- `bitmapSize` (Size). Height and width of the canvas in bitmap dimensions.
+- `mediaSize` (Size). Height and width of the canvas in media dimensions.
+
+#### Bitmap Coordinate Space Usage
+
+```js title='javascript'
+// target is an instance of CanvasRenderingTarget2D
+target.useBitmapCoordinateSpace(scope => {
+    // scope is an instance of BitmapCoordinatesRenderingScope
+
+    // example of drawing a filled rectangle which fills the canvas
+    scope.context.beginPath();
+    scope.context.rect(0, 0, scope.bitmapSize.width, scope.bitmapSize.height);
+    scope.context.fillStyle = 'rgba(100, 200, 50, 0.5)';
+    scope.context.fill();
+});
+```
+
+### Media Coordinate Space
+
+`useMediaCoordinateSpace` can be used to if you would like draw using the media
+dimensions as the coordinate sizing. The provided scope (of type
+`MediaCoordinatesRenderingScope`) contains readonly values for the following:
+
+- `context`
+  ([CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)).
+  Context which can be used for rendering.
+- `mediaSize` (Size). Height and width of the canvas in media dimensions.
+
+#### Media Coordinate Space Usage
+
+```js title='javascript'
+// target is an instance of CanvasRenderingTarget2D
+target.useMediaCoordinateSpace(scope => {
+    // scope is an instance of BitmapCoordinatesRenderingScope
+
+    // example of drawing a filled rectangle which fills the canvas
+    scope.context.beginPath();
+    scope.context.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+    scope.context.fillStyle = 'rgba(100, 200, 50, 0.5)';
+    scope.context.fill();
+});
+```
+
+## General Tips
+
+It is recommended that rendering functions should save and restore the canvas
+context before and after all the rendering logic to ensure that the canvas state
+is the same as when the renderer function was evoked. To get handle the case
+when an error in the code might prevent the restore function from being evoked,
+you should use the try - finally code block to ensure that the context is
+correctly restored in all cases.
+
+```js title='javascript'
+target.useMediaCoordinateSpace(scope => {
+    const ctx = scope.context;
+
+    // save the current state of the context to the stack
+    ctx.save();
+
+    try {
+        // example code
+        scope.context.beginPath();
+        scope.context.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+        scope.context.fillStyle = 'rgba(100, 200, 50, 0.5)';
+        scope.context.fill();
+    } finally {
+        // restore the saved context from the stack
+        ctx.restore();
+    }
+});
+```
diff --git a/website/docs/plugins/custom_series.md b/website/docs/plugins/custom_series.md
new file mode 100644
index 0000000000..b570c7fef5
--- /dev/null
+++ b/website/docs/plugins/custom_series.md
@@ -0,0 +1,129 @@
+---
+sidebar_label: Custom Series Types
+sidebar_position: 2
+---
+
+# Custom Series Types
+
+Custom series allow developers to create new types of series with their own data
+structures, and rendering logic (implemented using
+[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+methods). These custom series extend the current capabilities of our built-in
+series, providing a consistent API which mirrors the built-in chart types.
+
+:::note
+
+These series are expected to have a uniform width for each data point, which
+ensures that the chart maintains a consistent look and feel across all series
+types. The only restriction on the data structure is that it should extend the
+[`CustomData`](../api/interfaces/CustomData.md) interface (have a valid time
+property for each data point).
+
+:::
+
+## Defining a Custom Series
+
+A custom series should implement the
+[`ICustomSeriesPaneView`](../api/interfaces/ICustomSeriesPaneView.md) interface.
+The interface defines the basic functionality and structure required for
+creating a custom series view.
+
+It includes the following methods and properties:
+
+### Renderer
+
+- ICustomSeriesPaneView property:
+  [`renderer`](../api/interfaces/ICustomSeriesPaneView.md#renderer)
+
+This method should return a renderer which implements the
+[`ICustomSeriesPaneRenderer`](../api/interfaces/ICustomSeriesPaneRenderer.md)
+interface and is used to draw the series data on the main chart pane.
+
+The [`draw`](../api/interfaces/ICustomSeriesPaneRenderer.md#draw) method of the
+renderer is evoked whenever the chart needs to draw the series.
+
+The [`PriceToCoordinateConverter`](../api/index.md#pricetocoordinateconverter)
+provided as the 2nd argument to the draw method is a convenience function for
+changing prices into vertical coordinate values. It is provided since the
+series' original data will most likely be defined in price values, and the
+renderer needs to draw with coordinates. The values returned by the converter
+will be defined in mediaSize (unscaled by `devicePixelRatio`).
+
+:::tip
+
+`CanvasRenderingTarget2D` provided within the `draw` function is explained in
+more detail on the [Canvas Rendering Target](./canvas-rendering-target) page.
+
+:::
+
+### Update
+
+- ICustomSeriesPaneView property:
+  [`update`](../api/interfaces/ICustomSeriesPaneView.md#update)
+
+This method will be called with the latest data for the renderer to use during
+the next paint.
+
+The update method is evoked with two parameters: `data` (discussed below), and
+`seriesOptions`. seriesOptions is a reference to the currently applied options
+for the series
+
+The [`PaneRendererCustomData`](../api/interfaces/PaneRendererCustomData.md)
+interface provides the data that can be used within the renderer for drawing the
+series data. It includes the following properties:
+
+- `bars`: List of all the series' items and their x coordinates. See
+  [`CustomBarItemData`](../api/interfaces/CustomBarItemData.md) for more details
+- `barSpacing`: Spacing between consecutive bars.
+- `visibleRange`: The current visible range of items on the chart.
+
+### Price Value Builder
+
+- ICustomSeriesPaneView property:
+  [`priceValueBuilder`](../api/interfaces/ICustomSeriesPaneView.md#priceValueBuilder)
+
+A function for interpreting the custom series data and returning an array of
+numbers representing the prices values for the item, specifically the equivalent
+highest, lowest, and current price values for the data item.
+
+These price values are used by the chart to determine the auto-scaling (to
+ensure the items are in view) and the crosshair and price line positions. The
+largest and smallest values in the array will be used to specify the visible
+range of the painted item, and the last value will be used for the crosshair and
+price line position.
+
+### Whitespace
+
+- ICustomSeriesPaneView property:
+  [`isWhitespace`](../api/interfaces/ICustomSeriesPaneView.md#iswhitespace)
+
+A function used by the library to determine which data points provided by the
+user should be considered Whitespace. The method should return `true` when the
+data point is Whitespace. Data points which are whitespace data won't be provided to
+the renderer, or the `priceValueBuilder`.
+
+### Default Options
+
+- ICustomSeriesPaneView property:
+  [`defaultOptions`](../api/interfaces/ICustomSeriesPaneView.md#defaultoptions)
+
+The default options to be used for the series. The user can override these
+values using the options argument in
+[`addCustomSeries`](../api/interfaces/IChartApi.md#addcustomseries), or via the
+[`applyOptions`](../api/interfaces/ISeriesApi.md#applyoptions) method on the
+`ISeriesAPI`.
+
+### Destroy
+
+- ICustomSeriesPaneView property:
+  [`destroy`](../api/interfaces/ICustomSeriesPaneView.md#destroy)
+
+This method will be evoked when the series has been removed from the chart. This
+method should be used to clean up any objects, references, and other items that
+could potentially cause memory leaks.
+
+This method should contain all the necessary code to clean up the object before
+it is removed from memory. This includes removing any event listeners or timers
+that are attached to the object, removing any references to other objects, and
+resetting any values or properties that were modified during the lifetime of the
+object.
diff --git a/website/docs/plugins/explainer-layers-demo.js b/website/docs/plugins/explainer-layers-demo.js
new file mode 100644
index 0000000000..842232f10e
--- /dev/null
+++ b/website/docs/plugins/explainer-layers-demo.js
@@ -0,0 +1,263 @@
+class PaneRenderer {
+	constructor(layer, showName, index, numBands) {
+		this._layer = layer;
+		this._showName = showName;
+		this._index = index;
+		this._selected = 'all';
+		this._numBands = numBands;
+	}
+	draw(target) {
+		if (this._layer.background) {
+			return;
+		}
+		if (this._selected !== 'all' && this._selected !== this._layer.id) {
+			return;
+		}
+		this._drawImpl(target);
+	}
+	drawBackground(target) {
+		if (!this._layer.background) {
+			return;
+		}
+		if (this._selected !== 'all' && this._selected !== this._layer.id) {
+			return;
+		}
+		this._drawImpl(target);
+	}
+
+	_drawingAngle(scope) {
+		const isPriceScale = scope.mediaSize.width < 100;
+		const isTimeScale = scope.mediaSize.height < 50;
+		if (isPriceScale) {
+			return 0;
+		}
+		if (isTimeScale) {
+			return Math.PI / 2;
+		}
+		return Math.PI / 3;
+	}
+
+	_drawImpl(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.save();
+			if (this._selected === 'all') {
+				const isScale = scope.mediaSize.height < 50 || scope.mediaSize.width < 100;
+				const numBands = this._numBands + (isScale ? 2 : 0);
+				const angle = this._drawingAngle(scope);
+				const shift = Math.cos(angle) * scope.mediaSize.height;
+				const bandWidth = Math.round(
+					(scope.mediaSize.width - shift) / numBands
+				);
+				const offset = isScale ? 2 : 0;
+				const startX = (this._index + (isScale ? 1 : 0)) * bandWidth;
+				ctx.beginPath();
+				ctx.moveTo(startX, scope.mediaSize.height);
+				ctx.lineTo(startX + shift, offset);
+				ctx.lineTo(startX + shift + bandWidth, offset);
+				ctx.lineTo(startX + bandWidth, scope.mediaSize.height);
+				ctx.closePath();
+				ctx.fillStyle = this._layer.color;
+				ctx.fill();
+				if (this._showName) {
+					ctx.fillStyle = this._layer.textColor;
+					ctx.font = 'normal 16px sans-serif';
+					ctx.translate(startX, scope.mediaSize.height);
+					ctx.rotate(-1.06 * angle);
+					ctx.fillText(this._layer.name, 20, 20);
+				}
+			} else {
+				ctx.beginPath();
+				ctx.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+				ctx.fillStyle = this._layer.color;
+				ctx.fill();
+			}
+			ctx.restore();
+		});
+	}
+	update(name) {
+		this._selected = name;
+	}
+}
+
+class PaneView {
+	constructor(layer, showName, index, numBands) {
+		this._layer = layer;
+		this._renderer = new PaneRenderer(layer, showName, index, numBands);
+	}
+	zOrder() {
+		return this._layer.zOrder;
+	}
+	renderer() {
+		return this._renderer;
+	}
+	update(name) {
+		this._renderer.update(name);
+	}
+}
+
+class LayersPrimitive {
+	constructor() {
+		this.layers = {
+			bottom: {
+				name: 'bottom',
+				color: '#f72585',
+				textColor: '#ffffff',
+				zOrder: 'bottom',
+				background: false,
+				id: 'bottom',
+			},
+			normalBackground: {
+				name: 'normal (background)',
+				color: '#7209b7',
+				textColor: '#ffffff',
+				zOrder: 'normal',
+				background: true,
+				id: 'normalBackground',
+			},
+			normal: {
+				name: 'normal',
+				color: '#4361ee',
+				textColor: '#ffffff',
+				zOrder: 'normal',
+				background: false,
+				id: 'normal',
+			},
+			top: {
+				name: 'top',
+				color: '#4cc9f0',
+				textColor: '#000000',
+				zOrder: 'top',
+				background: false,
+				id: 'top',
+			},
+		};
+		const layerKeys = ['bottom', 'normalBackground', 'normal', 'top'];
+		const numBands = layerKeys.length;
+		this._paneViews = layerKeys.map(
+			(key, index) => new PaneView(this.layers[key], true, index, numBands)
+		);
+		this._pricePaneViews = layerKeys.map(
+			(key, index) => new PaneView(this.layers[key], false, index, numBands)
+		);
+		this._timePaneViews = layerKeys.map(
+			(key, index) => new PaneView(this.layers[key], false, index, numBands)
+		);
+	}
+
+	changeSelectedLayer(id) {
+		if (id !== 'all' && !Object.keys(this.layers).includes(id)) {
+			return;
+		}
+		this._paneViews.forEach(view => view.update(id));
+		this._pricePaneViews.forEach(view => view.update(id));
+		this._timePaneViews.forEach(view => view.update(id));
+		if (this._requestUpdate) {
+			this._requestUpdate();
+		}
+	}
+
+	attached({ requestUpdate }) {
+		this._requestUpdate = requestUpdate;
+	}
+	detached() {
+		this._requestUpdate = undefined;
+	}
+
+	updateAllViews() {}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+}
+
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+	i *
+		(0.5 +
+			Math.sin(i / 10) * 0.2 +
+			Math.sin(i / 20) * 0.4 +
+			Math.sin(i / randomFactor) * 0.8 +
+			Math.sin(i / 500) * 0.5) +
+	200;
+
+function generateLineData(numberOfPoints = 500) {
+	randomFactor = 25 + Math.random() * 25;
+	const res = [];
+	const date = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+	for (let i = 0; i < numberOfPoints; ++i) {
+		const time = date.getTime() / 1000;
+		const value = samplePoint(i);
+		res.push({
+			time,
+			value,
+			customValues: {
+				text: 'hello',
+			},
+		});
+
+		date.setUTCDate(date.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+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: CHART_TEXT_COLOR,
+});
+const data = generateLineData();
+lineSeries.setData(data);
+const layersPrimitive = new LayersPrimitive();
+lineSeries.attachPrimitive(layersPrimitive);
+
+function generateLayerOption(id, name, selected) {
+	const element = document.createElement('option');
+	element.value = id;
+	element.innerHTML = name;
+	element.selected = selected;
+	return element;
+}
+
+const chartContainer = document.querySelector('#container');
+if (chartContainer) {
+	const layerSelect = document.createElement('select');
+	layerSelect.id = 'layer-select';
+	layerSelect.name = 'layer';
+	chartContainer.parentElement.appendChild(layerSelect);
+	layerSelect.style.position = 'absolute';
+	layerSelect.style.zIndex = 10;
+	layerSelect.style.left = '10px';
+	layerSelect.style.top = '10px';
+}
+
+const layerSelectDiv = document.querySelector('#layer-select');
+// eslint-disable-next-line no-console
+console.log(layerSelectDiv);
+if (layerSelectDiv) {
+	layerSelectDiv.appendChild(generateLayerOption('all', 'All', true));
+	for (const layerInfo of Object.values(layersPrimitive.layers)) {
+		layerSelectDiv.appendChild(
+			generateLayerOption(layerInfo.id, layerInfo.name, false)
+		);
+	}
+	layerSelectDiv.addEventListener('change', () => {
+		layersPrimitive.changeSelectedLayer(layerSelectDiv.value);
+	});
+}
diff --git a/website/docs/plugins/explainer-sections-demo.js b/website/docs/plugins/explainer-sections-demo.js
new file mode 100644
index 0000000000..89706d68dd
--- /dev/null
+++ b/website/docs/plugins/explainer-sections-demo.js
@@ -0,0 +1,199 @@
+/* eslint-disable max-classes-per-file */
+class AxisView {
+	constructor(text, color, position) {
+		this._color = color;
+		this._text = text;
+		this._position = position;
+	}
+	coordinate() {
+		return this._position;
+	}
+	text() {
+		return this._text;
+	}
+	textColor() {
+		return '#FFFFFF';
+	}
+	backColor() {
+		return this._color;
+	}
+}
+
+class LegendPaneRenderer {
+	constructor(sections) {
+		this._sections = Object.values(sections);
+	}
+	draw(target) {
+		const count = this._sections.length;
+		const longestText = this._sections.reduce((longest, section) => {
+			if (section.name.length > longest.length) {
+				return section.name;
+			}
+			return longest;
+		}, '');
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			const longestTextMeasurements = ctx.measureText(longestText);
+			ctx.beginPath();
+			ctx.roundRect(
+				20,
+				20,
+				longestTextMeasurements.width + 40,
+				(count + 0) * 20 + 10,
+				8
+			);
+			ctx.globalAlpha = 0.95;
+			ctx.fillStyle = '#FFFFFF';
+			ctx.fill();
+			ctx.globalAlpha = 1;
+			let currentY = 30;
+			this._sections.forEach(section => {
+				ctx.beginPath();
+				ctx.roundRect(30, currentY, 10, 10, 3);
+				ctx.fillStyle = section.color;
+				ctx.fill();
+				ctx.fillStyle = '#000000';
+				ctx.textBaseline = 'bottom';
+				ctx.fillText(section.name, 50, currentY + 10);
+				currentY += 20;
+			});
+		});
+	}
+}
+
+class LegendView {
+	constructor(sections) {
+		this._renderer = new LegendPaneRenderer(sections);
+	}
+	zOrder() {
+		return 'top';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class PaneRenderer {
+	constructor(color) {
+		this._color = color;
+	}
+	draw(target) {
+		target.useMediaCoordinateSpace(scope => {
+			const ctx = scope.context;
+			ctx.beginPath();
+			ctx.rect(0, 0, scope.mediaSize.width, scope.mediaSize.height);
+			ctx.globalAlpha = 0.3;
+			ctx.fillStyle = this._color;
+			ctx.fill();
+			ctx.globalAlpha = 0.6;
+			ctx.lineWidth = 8;
+			ctx.strokeStyle = this._color;
+			ctx.stroke();
+			ctx.globalAlpha = 1;
+		});
+	}
+}
+
+class PaneView {
+	constructor(color) {
+		this._renderer = new PaneRenderer(color);
+	}
+	zOrder() {
+		return 'bottom';
+	}
+	renderer() {
+		return this._renderer;
+	}
+}
+
+class SectionsPrimitive {
+	constructor() {
+		this.sections = {
+			pane: { color: '#4cc9f0', name: 'Chart Pane (paneViews)' },
+			price: { color: '#f72585', name: 'Price Pane (priceAxisPaneViews)' },
+			time: { color: '#4361ee', name: 'Time Pane (timeAxisPaneViews)' },
+			priceLabel: { color: '#f77f00', name: 'Price Label (priceAxisViews)' },
+			timeLabel: { color: '#40916c', name: 'Time Label (timeAxisViews)' },
+		};
+		this._paneViews = [
+			new PaneView(this.sections.pane.color),
+			new LegendView(this.sections),
+		];
+		this._pricePaneViews = [new PaneView(this.sections.price.color)];
+		this._timePaneViews = [new PaneView(this.sections.time.color)];
+		this._priceAxisViews = [
+			new AxisView('price label', this.sections.priceLabel.color, 80),
+		];
+		this._timeAxisViews = [
+			new AxisView('time label', this.sections.timeLabel.color, 200),
+		];
+	}
+
+	updateAllViews() {}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	timeAxisPaneViews() {
+		return this._timePaneViews;
+	}
+
+	priceAxisPaneViews() {
+		return this._pricePaneViews;
+	}
+
+	timeAxisViews() {
+		return this._timeAxisViews;
+	}
+
+	priceAxisViews() {
+		return this._priceAxisViews;
+	}
+}
+
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+	i *
+		(0.5 +
+			Math.sin(i / 10) * 0.2 +
+			Math.sin(i / 20) * 0.4 +
+			Math.sin(i / randomFactor) * 0.8 +
+			Math.sin(i / 500) * 0.5) +
+	200;
+
+function generateLineData(numberOfPoints = 500) {
+	randomFactor = 25 + Math.random() * 25;
+	const res = [];
+	const date = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+	for (let i = 0; i < numberOfPoints; ++i) {
+		const time = date.getTime() / 1000;
+		const value = samplePoint(i);
+		res.push({
+			time,
+			value,
+			customValues: {
+				text: 'hello',
+			},
+		});
+
+		date.setUTCDate(date.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+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: CHART_TEXT_COLOR,
+});
+const data = generateLineData();
+lineSeries.setData(data);
+lineSeries.attachPrimitive(new SectionsPrimitive());
diff --git a/website/docs/plugins/intro.md b/website/docs/plugins/intro.md
new file mode 100644
index 0000000000..0b9295ec33
--- /dev/null
+++ b/website/docs/plugins/intro.md
@@ -0,0 +1,138 @@
+---
+sidebar_label: Introduction
+sidebar_position: 0
+---
+
+# Plugins Introduction
+
+The library provides a rich set of charting capabilities out of the box, but
+developers can also extend its functionality by building custom plugins.
+
+Plugins in Lightweight Charts™️ come in two types:
+[custom series](#custom-series) and [drawing primitives](#drawing-primitives).
+Custom series allow developers to define new types of series, while drawing
+primitives enable the creation of custom visualizations, drawing tools, and
+chart annotations (and more) which can be attached to an existing series.
+
+:::tip Picking between the Custom Series and Drawing Primitives
+
+In the majority of cases you will most likely be better served by using a
+[Drawing Primitive](#drawing-primitives) plugin unless you are specifically
+looking to create a new type of series.
+
+:::
+
+With the flexibility provided by these plugins, developers can create highly
+customizable charting applications for their users.
+
+## Custom Series
+
+Custom series allow developers to create new types of series with their own data
+structures, and rendering logic (implemented using
+[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+methods). These custom series extend the current capabilities of our built-in
+series, providing a consistent API which mirrors the built-in chart types. These
+series are expected to have a uniform width for each data point, which ensures
+that the chart maintains a consistent look and feel across all series types. The
+only restriction on the data structure is that it should extend the
+WhitespaceData interface (have a valid time property for each data point).
+
+**You can find a more detailed guide to developing custom series in the
+[Custom Series Types](./custom_series/) article.**
+
+### Adding a custom series to a chart
+
+A custom series can be added to a chart using the
+[`addCustomSeries`](../api/interfaces/IChartApi.md#addcustomseries) method
+which expects a class implementing the
+[ICustomSeriesPaneView](../api/interfaces/ICustomSeriesPaneView.md) interface
+as the first argument, and an optional set of options as the second argument.
+The series can then be used just like any other series, for example you would
+use `setData` method to provide data to the series.
+
+```javascript title='javascript'
+class MyCustomSeries {
+    /* Class implementing the ICustomSeriesPaneView interface */
+}
+
+const chart = createChart(document.getElementById('container'));
+const myCustomSeries = chart.addCustomSeries(MyCustomSeries, {
+    // options for the MyCustomSeries
+    customOption: 10,
+});
+
+const data = [
+    { time: 1642425322, value: 123, customValue: 456 },
+    /* ... more data */
+];
+
+myCustomSeries.setData(data);
+```
+
+## Drawing Primitives
+
+Drawing primitives provide a more flexible approach to extending the charting
+capabilities of Lightweight Charts™️. They are attached to a specific series and
+can draw anywhere on the chart, including the main chart pane, price scales, and
+time scales.
+
+Primitives can be used to create custom drawing tools or indicators, or to add
+entirely new visualizations to the chart. Primitives can be drawn at different
+levels in the visual stack, allowing for complex compositions of multiple
+primitives.
+
+**You can find a more detailed guide to developing series primitives in the
+[Series Primitives](./series-primitives/) article.**
+
+### Adding a primitive to an existing series
+
+A custom series primitive can be added to an existing series using the
+[`attachPrimitive()`](../api/interfaces/ISeriesApi.md#attachprimitive) method
+which expects an instantiated object implementing the
+[ISeriesPrimitive](../api/index.md#iseriesprimitive) interface as the first
+argument.
+
+```javascript title='javascript'
+class MyCustomPrimitive {
+    /* Class implementing the ISeriesPrimitive interface */
+}
+
+// Create an instantiated series primitive.
+const myCustomPrimitive = new MyCustomPrimitive();
+
+const chart = createChart(document.getElementById('container'));
+const lineSeries = chart.addLineSeries();
+
+const data = [
+    { time: 1642425322, value: 123 },
+    /* ... more data */
+];
+
+// Attach the primitive to the series
+lineSeries.attachPrimitive(myCustomPrimitive);
+```
+
+### Adding a primitive to the chart instead of a series
+
+It is required that a drawing primitive is attached to series on the chart. In some cases, it might not make sense to attach a primitive to a specific series on the chart, for example if you are dynamically adding and removing series but would like a specific primitive to remain on the chart always. If this is the case then it is recommended to create an empty series (of any type) and attach the primitive to that instead.
+
+:::caution
+
+This series wouldn't have data, and thus wouldn't have the concept of price values for the vertical positioning of items. In some cases, such as a watermark, this isn't an issue.
+
+:::
+
+**Example:**
+
+```js title='javascript'
+// ...
+// Create an instantiated series primitive.
+const myCustomPrimitive = new MyCustomPrimitive();
+
+const chart = createChart(document.getElementById('container'));
+
+// an empty series which won't ever have data
+const chartSeries = chart.addLineSeries();
+chartSeries.attachPrimitive(myCustomPrimitive);
+
+```
diff --git a/website/docs/plugins/series-primitives.mdx b/website/docs/plugins/series-primitives.mdx
new file mode 100644
index 0000000000..7d6ec6efde
--- /dev/null
+++ b/website/docs/plugins/series-primitives.mdx
@@ -0,0 +1,169 @@
+---
+sidebar_label: Series Primitives
+sidebar_position: 1
+---
+
+# Series Primitives
+
+Primitives are extensions to the series which can define views and renderers to
+draw on the chart using
+[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).
+
+Primitives are defined by implementing the
+[`ISeriesPrimitive`](../api/index.md#iseriesprimitive) interface. The
+interface defines the basic functionality and structure required for creating
+custom primitives.
+
+## Views
+
+The primary purpose of a series primitive is to provide one, or more, views to
+the library which contain the state and logic required to draw on the chart
+panes.
+
+There are two types of views which are supported within `ISeriesPrimitive` which
+are:
+
+- [`ISeriesPrimitivePaneView`](../api/interfaces/ISeriesPrimitivePaneView.md)
+- [`ISeriesPrimitiveAxisView`](../api/interfaces/ISeriesPrimitiveAxisView.md)
+
+The library will evoke the following getter functions (if defined) to get
+references to the primitive's defined views for the corresponding section of the
+chart:
+
+- [`paneViews`](../api/interfaces/ISeriesPrimitiveBase.md#paneviews)
+- [`priceAxisPaneViews`](../api/interfaces/ISeriesPrimitiveBase.md#priceaxispaneviews)
+- [`timeAxisPaneViews`](../api/interfaces/ISeriesPrimitiveBase.md#timeaxispaneviews)
+- [`priceAxisViews`](../api/interfaces/ISeriesPrimitiveBase.md#priceaxisviews)
+- [`timeAxisViews`](../api/interfaces/ISeriesPrimitiveBase.md#timeaxisviews)
+
+The first three views allow drawing on the corresponding panes (main chart pane,
+price scale pane, and horizontal time scale pane) using the
+[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+and should implement the `ISeriesPrimitivePaneView` interface.
+
+The views returned by the `priceAxisViews` and `timeAxisViews` getter methods
+should implement the `ISeriesPrimitiveAxisView` interface and are used to define
+labels to be drawn on the corresponding scales.
+
+Below is a visual example showing the various sections of the chart where a
+Primitive can draw.
+
+import CodeBlock from '@theme/CodeBlock';
+import sectionsExplainerCode from '!!raw-loader!./explainer-sections-demo.js';
+
+<CodeBlock replaceThemeConstants chart className="language-js" chartOnly>
+	{sectionsExplainerCode}
+</CodeBlock>
+
+### ISeriesPrimitivePaneView
+
+The [`ISeriesPrimitivePaneView`](../api/interfaces/ISeriesPrimitivePaneView.md)
+interface can be used to define a view which provides a renderer (implementing
+the
+[`ISeriesPrimitivePaneRenderer`](../api/interfaces/ISeriesPrimitivePaneRenderer.md)
+interface) for drawing on the corresponding area of the chart using the
+[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+API. The view can define a
+[`zOrder`](../api/interfaces/ISeriesPrimitivePaneView.md#zorder) to control where
+in the visual stack the drawing will occur (See
+[`SeriesPrimitivePaneViewZOrder`](../api/index.md#seriesprimitivepaneviewzorder)
+for more information).
+
+Renderers should provide a
+[`draw`](../api/interfaces/ISeriesPrimitivePaneRenderer.md#draw) method which will
+be given a `CanvasRenderingTarget2D` target on which it can draw. Additionally,
+a renderer can optionally provide a
+[`drawBackground`](../api/interfaces/ISeriesPrimitivePaneRenderer.md#drawbackground)
+method for drawing beneath other elements on the same zOrder.
+
+:::tip
+
+`CanvasRenderingTarget2D` is explained in more detail on the [Canvas Rendering Target](./canvas-rendering-target) page.
+
+:::
+
+#### Interactive Demo of zOrder layers
+
+Below is an interactive demo chart illustrating where each zOrder is drawn
+relative to the existing chart elements such as the grid, series, and crosshair.
+
+import layersExplainerCode from '!!raw-loader!./explainer-layers-demo.js';
+
+<CodeBlock replaceThemeConstants chart className="language-js" chartOnly>
+	{layersExplainerCode}
+</CodeBlock>
+
+### ISeriesPrimitiveAxisView
+
+The [`ISeriesPrimitiveAxisView`](../api/interfaces/ISeriesPrimitiveAxisView.md)
+interface can be used to define a label on the price or time axis.
+
+This interface provides several methods to define the appearance and position of
+the label, such as the
+[`coordinate`](../api/interfaces/ISeriesPrimitiveAxisView.md#coordinate) method,
+which should return the desired coordinate for the label on the axis. It also
+defines optional methods to set the fixed coordinate, text, text color,
+background color, and visibility of the label.
+
+Please see the
+[`ISeriesPrimitiveAxisView`](../api/interfaces/ISeriesPrimitiveAxisView.md)
+interface for more details.
+
+## Lifecycle Methods
+
+Your primitive can use the
+[`attached`](../api/interfaces/ISeriesPrimitiveBase.md#attached) and
+[`detached`](../api/interfaces/ISeriesPrimitiveBase.md#detached) lifecycle methods to
+manage the lifecycle of the primitive, such as creating or removing external
+objects and event handlers.
+
+### attached
+
+This method is called when the primitive is attached to a chart. The attached
+method is evoked with a
+[single argument](../api/interfaces/SeriesAttachedParameter.md) containing
+properties for the chart, series, and a callback to request an update. The
+`chart` and `series` properties are references to the chart API and the series
+API instances for convenience purposes so that they don't need to be manually
+provided within the primitive's constructor (if needed by the primitive).
+
+The `requestUpdate` callback allows the primitive to notify the chart that it
+should be updated and redrawn.
+
+### detached
+
+This method is called when the primitive is detached from a chart. This can be
+used to remove any external objects or event handlers that were created during
+the attached lifecycle method.
+
+## Updating Views
+
+Your primitive should update the views in the
+[`updateAllViews()`](../api/interfaces/ISeriesPrimitiveBase.md#updateallviews) method
+such that when the renderers are evoked, they can draw with the latest
+information. The library invokes this method when it wants to update and redraw
+the chart. If you would like to notify the library that it should trigger an
+update then you can use the `requestUpdate` callback provided by the attached
+lifecycle method.
+
+## Extending the Autoscale Info
+
+The [`autoscaleInfo()`](../api/interfaces/ISeriesPrimitiveBase.md#autoscaleinfo)
+method can be provided to extend the base autoScale information of the series.
+This can be used to ensure that the chart is automatically scaled correctly to
+include all the graphics drawn by the primitive.
+
+Whenever the chart needs to calculate the vertical visible range of the series
+within the current time range then it will evoke this method. This method can be
+omitted and the library will use the normal autoscale information for the
+series. If the method is implemented then the returned values will be merged
+with the base autoscale information to define the vertical visible range.
+
+:::warning
+
+Please note that this method will be evoked very often during
+scrolling and zooming of the chart, thus it is recommended that this method is
+either simple to execute, or makes use of optimisations such as caching to
+ensure that the chart remains responsive.
+
+:::
diff --git a/website/docs/series-types.md b/website/docs/series-types.md
index 7b5bee1173..a0fb3c4e5e 100644
--- a/website/docs/series-types.md
+++ b/website/docs/series-types.md
@@ -6,9 +6,9 @@ sidebar_position: 1
 
 In this article you can read a brief overview of all supported series types.
 
-## A series customizations
+## Series Customisation
 
-Any type of series can be customized and the set of available options that you can apply depends on a type of a series (see docs for each series type below).
+Customization options for series are dependent on their specific type. Each type of series has its own set of available options, which can be found in the documentation provided for that particular series type. This means that any type of series can be customized, but the options you can apply will vary depending on the type of series you are working with.
 
 If you'd like to change any option of a series, you could do this in different ways:
 
@@ -158,3 +158,11 @@ lineSeries.setData(data);
 
 chart.timeScale().fitContent();
 ```
+
+## Custom Series (Plugins)
+
+Lightweight Charts offers the ability to add your own custom series types, also known as series plugins. This feature allows developers to extend the functionality of the library by adding new chart types, indicators, or other custom visualizations.
+
+Custom series types can be defined by creating a class which implements the [ICustomSeriesPaneView](/api/interfaces/ICustomSeriesPaneView.md) interface. This class defines the rendering code which Lightweight Charts will use to draw the series on the chart. Once a custom series type is defined, it can be added to any chart instance using the [`addCustomSeries()`](/api/interfaces/IChartApi.md#addcustomseries) method, and be used just like any other series.
+
+Please see the [Plugins](./plugins/intro.md) article for more details.
diff --git a/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx b/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
index ed4752c170..a6afb6cafe 100644
--- a/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
+++ b/website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx
@@ -29,7 +29,7 @@ export function removeUnwantedLines(originalString) {
 }
 
 const EnhancedCodeBlock = props => {
-	const { chart, replaceThemeConstants, hideableCode, ...rest } = props;
+	const { chart, replaceThemeConstants, hideableCode, chartOnly, ...rest } = props;
 	let { children } = props;
 	const { colorMode } = useColorMode();
 	const isDarkTheme = colorMode === 'dark';
@@ -50,7 +50,7 @@ const EnhancedCodeBlock = props => {
 						className="toggle-hidden-lines"
 					/>
 					<label className="toggle-label" htmlFor={uniqueId}>Show all code</label></>}
-				<CodeBlock {...rest}>{children}</CodeBlock>
+				{!chartOnly && <CodeBlock {...rest}>{children}</CodeBlock>}
 				{chart && <BrowserOnly fallback={<div className={styles.iframe}>&nbsp;</div>}>{() => <Chart script={children} />}</BrowserOnly>}
 			</>
 		);
diff --git a/website/sidebars.js b/website/sidebars.js
index 27286c41db..1d06f9d158 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -8,6 +8,14 @@ const sidebars = {
 		'price-scale',
 		'time-scale',
 		'time-zones',
+		{
+			Plugins: [
+				{
+					type: 'autogenerated',
+					dirName: 'plugins',
+				},
+			],
+		},
 		{
 			Migrations: [
 				{