lightweight-charts-react-components 1.4.1 → 2.1.0

package/README.md

@@ -31,6 +31,10 @@
     </picture>
   </a>
 
+  <a href="https://pkg.pr.new/~/ukorvl/lightweight-charts-react-components">
+    <img src="https://pkg.pr.new/badge/ukorvl/lightweight-charts-react-components" alt="pkg.pr.new">
+  </a>
+
   <a href="https://github.com/ukorvl/lightweight-charts-react-components/blob/main/LICENSE">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/l/lightweight-charts-react-components?colorA=1e2029&colorB=1e2029&style=flat">
@@ -94,22 +98,49 @@ Check out the [Demo](https://ukorvl.github.io/lightweight-charts-react-component
 
 ## Table of Contents
 
+- [Description](#description)
+- [Table of Contents](#table-of-contents)
 - [Installation](#installation)
+  - [Stable release](#stable-release)
+  - [Preview builds](#preview-builds)
+  - [Standalone browser build](#standalone-browser-build)
 - [Usage](#usage)
+  - [Chart Container Sizing](#chart-container-sizing)
 - [Examples](#examples)
 - [Contributing](#contributing)
+  - [How to Contribute](#how-to-contribute)
 - [Related Projects](#related-projects)
 - [License](#license)
 
 ## Installation
 
-You can install the library via npm, pnpm or yarn:
+### Stable release
+
+Install the latest published version from npm:
 
 ```bash
 npm install lightweight-charts-react-components lightweight-charts
 ```
 
-Standalone version of the library is also available for use in the browser without a build step. You can include it in your HTML file using a script tag. Note that library expects global `React`, `ReactDOM` and `LightweightCharts` variables to be available in the global scope.
+### Preview builds
+
+To test the latest unreleased version from `main`, install the preview build published via `pkg.pr.new`:
+
+```bash
+npm install https://pkg.pr.new/lightweight-charts-react-components@main lightweight-charts
+```
+
+Or choose a specific commit from `main` and install the preview build for that commit:
+
+```bash
+npm install https://pkg.pr.new/lightweight-charts-react-components@<commit-hash> lightweight-charts
+```
+
+For security reasons, preview builds are published only from commits pushed to `main`. Pull request builds are not published.
+
+### Standalone browser build
+
+The standalone version is also available for use in the browser without a build step. The library expects global `React`, `ReactDOM`, and `LightweightCharts` variables to be available in the global scope.
 
 ```html
 <head>

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v1.4.1
+* lightweight-charts-react-components v2.1.0
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -9,12 +9,15 @@
 */
 
 import { ChartOptions } from 'lightweight-charts';
+import { ChartOptionsImpl } from 'lightweight-charts';
 import { DeepPartial } from 'lightweight-charts';
 import type { DependencyList } from 'react';
 import type { ForwardedRef } from 'react';
 import type { ForwardRefExoticComponent } from 'react';
 import { IChartApi } from 'lightweight-charts';
+import { IChartApiBase } from 'lightweight-charts';
 import type { ICustomSeriesPaneView } from 'lightweight-charts';
+import { IHorzScaleBehavior } from 'lightweight-charts';
 import type { IImageWatermarkPluginApi } from 'lightweight-charts';
 import type { ImageWatermarkOptions } from 'lightweight-charts';
 import type { IPaneApi } from 'lightweight-charts';
@@ -26,11 +29,14 @@ import type { ISeriesMarkersPluginApi } from 'lightweight-charts';
 import type { ISeriesPrimitive } from 'lightweight-charts';
 import type { ITextWatermarkPluginApi } from 'lightweight-charts';
 import type { ITimeScaleApi } from 'lightweight-charts';
+import { IYieldCurveChartApi } from 'lightweight-charts';
 import type { JSX } from 'react';
 import type { LogicalRangeChangeEventHandler } from 'lightweight-charts';
 import { MouseEventHandler } from 'lightweight-charts';
+import { PriceChartOptions } from 'lightweight-charts';
 import type { PriceLineOptions } from 'lightweight-charts';
 import type { PriceScaleOptions as PriceScaleOptions_2 } from 'lightweight-charts';
+import type { ReactElement } from 'react';
 import type { ReactNode } from 'react';
 import type { RefAttributes } from 'react';
 import type { SeriesDataItemTypeMap } from 'lightweight-charts';
@@ -43,6 +49,7 @@ import type { TextWatermarkOptions } from 'lightweight-charts';
 import { Time } from 'lightweight-charts';
 import type { TimeRangeChangeEventHandler } from 'lightweight-charts';
 import type { TimeScaleOptions as TimeScaleOptions_2 } from 'lightweight-charts';
+import { YieldCurveChartOptions } from 'lightweight-charts';
 
 /**
  * AreaSeries component that can be used to create an area series in a chart.
@@ -147,22 +154,27 @@ export declare const CandlestickSeries: SeriesForwardRefComponent<"Candlestick">
  */
 export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<HTMLDivElement>>;
 
+/**
+ * Common chart API surface used by the React wrapper.
+ */
+declare type ChartApiInstance<HorzScaleItem = Time> = Pick<IChartApiBase<HorzScaleItem>, "applyOptions" | "remove" | "subscribeClick" | "unsubscribeClick" | "subscribeCrosshairMove" | "unsubscribeCrosshairMove" | "subscribeDblClick" | "unsubscribeDblClick">;
+
 /**
  * Chart API reference type that can be used to access the chart plugin API.
  */
-export declare type ChartApiRef = {
+export declare type ChartApiRef<HorzScaleItem = Time, TChartApi extends ChartApiInstance<HorzScaleItem> = ChartApiInstance<HorzScaleItem>> = {
     /**
      * Internal reference to the chart API instance.
      */
-    _chart: IChartApi | null;
+    _chart: TChartApi | null;
     /**
      * Function to get the chart API instance.
      */
-    api: () => IChartApi | null;
+    api: () => TChartApi | null;
     /**
      * Function to initialize the chart API instance.
      */
-    init: () => IChartApi | null;
+    init: () => TChartApi | null;
     /**
      * Function to clear the chart API instance.
      */
@@ -172,35 +184,37 @@ export declare type ChartApiRef = {
 /**
  * Chart component props.
  */
-export declare type ChartProps = {
-    /**
-     * Children of the chart component.
-     */
-    children?: ReactNode;
-    /**
-     * The props for the container element on which the chart will be rendered.
-     */
-    containerProps?: JSX.IntrinsicElements["div"];
-    /**
-     * Callback function that is called when the chart is clicked.
-     */
-    onClick?: MouseEventHandler<Time>;
-    /**
-     * Callback function that is called when the crosshair moves.
-     */
-    onCrosshairMove?: MouseEventHandler<Time>;
-    /**
-     * Callback function that is called when the chart is initialized.
-     */
-    onInit?: (chart: IChartApi) => void;
-    /**
-     * Options for the chart.
-     */
-    options?: DeepPartial<ChartOptions>;
+export declare type ChartProps = GenericChartProps<Time, IChartApi, ChartOptions>;
+
+/**
+ * CustomChart component that can be used to create a chart with a custom horizontal scale behavior.
+ *
+ * @param props - The properties for the custom chart.
+ * @param ref - The ref to access the chart container.
+ * @returns A React component that renders the custom chart.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#custom-horizontal-scale-chart | TradingView documentation for custom horizontal scale charts}
+ * @example
+ * ```tsx
+ * <CustomChart horzScaleBehavior={new (defaultHorzScaleBehavior())()}>
+ *   <LineSeries data={[{ time: "2025-01-01", value: 100 }]} />
+ * </CustomChart>
+ * ```
+ */
+export declare const CustomChart: CustomChartForwardRefComponent;
+
+declare type CustomChartForwardRefComponent = (<HorzScaleItem, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem>>(props: CustomChartProps<HorzScaleItem, THorzScaleBehavior> & RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    displayName: string;
+};
+
+/**
+ * CustomChart component props.
+ */
+export declare type CustomChartProps<HorzScaleItem = Time, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem> = IHorzScaleBehavior<HorzScaleItem>> = GenericChartProps<HorzScaleItem, IChartApiBase<HorzScaleItem>, ReturnType<THorzScaleBehavior["options"]>> & {
     /**
-     * Callback function that is called when the chart is double-clicked.
+     * Horizontal scale behavior instance passed to `createChartEx`.
      */
-    onDblClick?: MouseEventHandler<Time>;
+    horzScaleBehavior: THorzScaleBehavior;
 };
 
 /**
@@ -228,19 +242,71 @@ export declare const CustomSeries: SeriesForwardRefComponent<"Custom">;
 /**
  * Unique properties for the custom series component.
  */
-declare type CustomSeriesUniqueProps = {
+declare type CustomSeriesUniqueProps<HorzScaleItem = Time> = {
     /**
      * Custom pane view plugin instance that can be used to render custom series.
      */
-    plugin?: ICustomSeriesPaneView;
+    plugin?: ICustomSeriesPaneView<HorzScaleItem>;
 };
 
-declare type GenericSeriesPrimitiveComponent = (<T extends SeriesType>(props: SeriesPrimitiveProps<T> & {
-    ref?: ForwardedRef<SeriesPrimitiveApiRef>;
+/**
+ * Generic chart component props.
+ */
+export declare type GenericChartProps<HorzScaleItem = Time, TChartApi extends ChartApiInstance<HorzScaleItem> = ChartApiInstance<HorzScaleItem>, TOptions extends ChartOptionsImpl<HorzScaleItem> = ChartOptionsImpl<HorzScaleItem>> = {
+    /**
+     * Children of the chart component.
+     */
+    children?: ReactNode;
+    /**
+     * The props for the container element on which the chart will be rendered.
+     */
+    containerProps?: JSX.IntrinsicElements["div"];
+    /**
+     * Callback function that is called when the chart is clicked.
+     */
+    onClick?: MouseEventHandler<HorzScaleItem>;
+    /**
+     * Callback function that is called when the crosshair moves.
+     */
+    onCrosshairMove?: MouseEventHandler<HorzScaleItem>;
+    /**
+     * Callback function that is called when the chart is initialized.
+     */
+    onInit?: (chart: TChartApi) => void;
+    /**
+     * Options for the chart.
+     */
+    options?: DeepPartial<TOptions>;
+    /**
+     * Callback function that is called when the chart is double-clicked.
+     */
+    onDblClick?: MouseEventHandler<HorzScaleItem>;
+};
+
+declare type GenericMarkersComponent = (<HorzScaleItem = Time>(props: MarkersProps<HorzScaleItem> & {
+    ref?: ForwardedRef<MarkersApiRef<HorzScaleItem>>;
+}) => JSX.Element | null) & {
+    displayName: string;
+};
+
+declare type GenericPaneComponent = (<HorzScaleItem = Time>(props: PaneProps & {
+    ref?: ForwardedRef<PaneApiRef<HorzScaleItem>>;
+}) => JSX.Element) & {
+    displayName: string;
+};
+
+declare type GenericSeriesPrimitiveComponent = (<T extends SeriesType, HorzScaleItem = Time>(props: SeriesPrimitiveProps<T, HorzScaleItem> & {
+    ref?: ForwardedRef<SeriesPrimitiveApiRef<HorzScaleItem>>;
 }) => ReturnType<typeof SeriesPrimitiveRenderFunction>) & {
     displayName: string;
 };
 
+declare type GenericTimeScaleComponent = (<HorzScaleItem = Time>(props: TimeScaleProps<HorzScaleItem> & {
+    ref?: ForwardedRef<TimeScaleApiRef<HorzScaleItem>>;
+}) => JSX.Element) & {
+    displayName: string;
+};
+
 /**
  * HistogramSeries component that can be used to create a histogram series in a chart.
  *
@@ -272,11 +338,11 @@ export declare type ImageWatermarkProps = {
 /**
  * Pane context that provides access to the pane API and readiness state.
  */
-export declare interface IPaneContext {
+export declare interface IPaneContext<HorzScaleItem = Time> {
     /**
      * Reference to the pane API.
      */
-    paneApiRef?: PaneApiRef;
+    paneApiRef?: PaneApiRef<HorzScaleItem>;
     /**
      * Readiness state of the pane component.
      */
@@ -322,24 +388,24 @@ export declare const LineSeries: SeriesForwardRefComponent<"Line">;
  * />
  * ```
  */
-export declare const Markers: ForwardRefExoticComponent<MarkersProps & RefAttributes<MarkersApiRef>>;
+export declare const Markers: GenericMarkersComponent;
 
 /**
  * Markers API reference type that can be used to access the series markers plugin API.
  */
-export declare type MarkersApiRef = {
+export declare type MarkersApiRef<HorzScaleItem = Time> = {
     /**
      * Internal reference to the series markers API instance.
      */
-    _markers: ISeriesMarkersPluginApi<Time> | null;
+    _markers: ISeriesMarkersPluginApi<HorzScaleItem> | null;
     /**
      * Function to get the series markers API instance.
      */
-    api: () => ISeriesMarkersPluginApi<Time> | null;
+    api: () => ISeriesMarkersPluginApi<HorzScaleItem> | null;
     /**
      * Function to initialize the series markers API instance.
      */
-    init: () => ISeriesMarkersPluginApi<Time> | null;
+    init: () => ISeriesMarkersPluginApi<HorzScaleItem> | null;
     /**
      * Function to clear the series markers API instance.
      */
@@ -349,11 +415,11 @@ export declare type MarkersApiRef = {
 /**
  * Markers component properties that can be used to create a series markers component.
  */
-export declare type MarkersProps = {
+export declare type MarkersProps<HorzScaleItem = Time> = {
     /**
      * List of markers to be displayed on the series.
      */
-    markers: SeriesMarker<Time>[];
+    markers: SeriesMarker<HorzScaleItem>[];
     /**
      * Options for the markers.
      */
@@ -364,6 +430,28 @@ export declare type MarkersProps = {
     reactive?: boolean;
 };
 
+/**
+ * OptionsChart component that can be used to create a price-based horizontal scale chart.
+ *
+ * @param props - The properties for the options chart.
+ * @param ref - The ref to access the chart container.
+ * @returns A React component that renders the options chart.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#options-chart-price-based | TradingView documentation for options charts}
+ * @example
+ * ```tsx
+ * <OptionsChart>
+ *   <LineSeries data={[{ time: 95, value: 1.2 }, { time: 100, value: 2.8 }]} />
+ * </OptionsChart>
+ * ```
+ */
+export declare const OptionsChart: ForwardRefExoticComponent<OptionsChartProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * OptionsChart component props.
+ */
+export declare type OptionsChartProps = GenericChartProps<number, IChartApiBase<number>, PriceChartOptions>;
+
 /**
  * Pane component that can be used to create a pane in a chart.
  *
@@ -379,24 +467,24 @@ export declare type MarkersProps = {
  * </Pane>
  * ```
  */
-export declare const Pane: ForwardRefExoticComponent<PaneProps & RefAttributes<PaneApiRef>>;
+export declare const Pane: GenericPaneComponent;
 
 /**
  * Pane API reference type that can be used to access the pane plugin API.
  */
-export declare type PaneApiRef = {
+export declare type PaneApiRef<HorzScaleItem = Time> = {
     /**
      * Reference to the pane API.
      */
-    _pane: IPaneApi<Time> | null;
+    _pane: IPaneApi<HorzScaleItem> | null;
     /**
      * Function to get the pane API.
      */
-    api: () => IPaneApi<Time> | null;
+    api: () => IPaneApi<HorzScaleItem> | null;
     /**
      * Function to initialize the pane API.
      */
-    init: () => IPaneApi<Time> | null;
+    init: () => IPaneApi<HorzScaleItem> | null;
     /**
      * Function to clear the pane API.
      */
@@ -528,27 +616,27 @@ export declare type PriceScaleProps = {
 /**
  * Render function type for series primitives.
  */
-export declare type RenderPrimitive<T extends SeriesType = SeriesType> = ({ chart, series, }: {
-    chart: IChartApi;
-    series: ISeriesApi<T>;
-}) => ISeriesPrimitive;
+export declare type RenderPrimitive<T extends SeriesType = SeriesType, HorzScaleItem = Time> = ({ chart, series, }: {
+    chart: IChartApiBase<HorzScaleItem>;
+    series: ISeriesApi<T, HorzScaleItem>;
+}) => ISeriesPrimitive<HorzScaleItem>;
 
 /**
  * Series API reference type that can be used to access the series plugin API.
  */
-export declare type SeriesApiRef<T extends SeriesType> = {
+export declare type SeriesApiRef<T extends SeriesType, HorzScaleItem = Time> = {
     /**
      * Internal reference to the series API instance.
      */
-    _series: ISeriesApi<T> | null;
+    _series: ISeriesApi<T, HorzScaleItem> | null;
     /**
      * Function to get the series API instance.
      */
-    api: () => ISeriesApi<T> | null;
+    api: () => ISeriesApi<T, HorzScaleItem> | null;
     /**
      * Function to initialize the series API instance.
      */
-    init: () => ISeriesApi<T> | null;
+    init: () => ISeriesApi<T, HorzScaleItem> | null;
     /**
      * Function to clear the series API instance.
      */
@@ -558,26 +646,29 @@ export declare type SeriesApiRef<T extends SeriesType> = {
 /**
  * Forward ref component type for a series component.
  */
-declare type SeriesForwardRefComponent<T extends SeriesType> = ForwardRefExoticComponent<SeriesProps<T> & RefAttributes<SeriesApiRef<T>>>;
+declare type SeriesForwardRefComponent<T extends SeriesType> = (<HorzScaleItem = Time>(props: SeriesProps<T, HorzScaleItem> & RefAttributes<SeriesApiRef<T, HorzScaleItem>>) => ReactElement | null) & {
+    displayName?: string;
+};
 
 /**
  * Series options that can be used to customize the appearance and behavior of a series.
  */
 export declare type SeriesOptions<T extends SeriesType> = SeriesPartialOptionsMap[T];
 
-declare type SeriesParameters<T extends SeriesType> = {
-    data: SeriesDataItemTypeMap[T][];
+declare type SeriesParameters<T extends SeriesType, HorzScaleItem = Time> = {
+    data: SeriesDataItemTypeMap<HorzScaleItem>[T][];
     reactive?: boolean;
     options?: SeriesOptions<T>;
     seriesOrder?: ReturnType<ISeriesApi<T>["seriesOrder"]>;
     /**
      * If true, the series will replace its data on every update.
-     * If false, it will try to append data to the existing series, that can be useful for performance.
+     * If false, it will try to apply incremental updates to the existing series when possible,
+     * which can be useful for performance.
      *
      * @see {@link https://tradingview.github.io/lightweight-charts/docs#updating-the-data-in-a-series | TradingView documentation for updating series data}
      */
     alwaysReplaceData?: boolean;
-} & (T extends "Custom" ? CustomSeriesUniqueProps : {});
+} & (T extends "Custom" ? CustomSeriesUniqueProps<HorzScaleItem> : {});
 
 /**
  * SeriesPrimitive component that can be used to create a primitive on series.
@@ -598,19 +689,19 @@ export declare const SeriesPrimitive: GenericSeriesPrimitiveComponent;
 /**
  * Series primitive API reference type that can be used to access the series primitive plugin API.
  */
-export declare type SeriesPrimitiveApiRef = {
+export declare type SeriesPrimitiveApiRef<HorzScaleItem = Time> = {
     /**
      * Internal reference to the series primitive API instance.
      */
-    _primitive: ISeriesPrimitive | null;
+    _primitive: ISeriesPrimitive<HorzScaleItem> | null;
     /**
      * Function to get the series primitive API instance.
      */
-    api(): ISeriesPrimitive | null;
+    api(): ISeriesPrimitive<HorzScaleItem> | null;
     /**
      * Function to initialize the series primitive API instance.
      */
-    init(): ISeriesPrimitive | null;
+    init(): ISeriesPrimitive<HorzScaleItem> | null;
     /**
      * Function to clear the series primitive API instance.
      */
@@ -620,32 +711,32 @@ export declare type SeriesPrimitiveApiRef = {
 /**
  * Series primitive properties that can be used to create a series primitive.
  */
-export declare type SeriesPrimitiveProps<T extends SeriesType = SeriesType> = SeriesPrimitivePropsWithRender<T> | SeriesPrimitivePropsWithPlugin;
+export declare type SeriesPrimitiveProps<T extends SeriesType = SeriesType, HorzScaleItem = Time> = SeriesPrimitivePropsWithRender<T, HorzScaleItem> | SeriesPrimitivePropsWithPlugin<HorzScaleItem>;
 
-declare type SeriesPrimitivePropsWithPlugin = {
-    plugin: ISeriesPrimitive;
+declare type SeriesPrimitivePropsWithPlugin<HorzScaleItem = Time> = {
+    plugin: ISeriesPrimitive<HorzScaleItem>;
     render?: never;
 };
 
-declare type SeriesPrimitivePropsWithRender<T extends SeriesType> = {
-    render: RenderPrimitive<T>;
+declare type SeriesPrimitivePropsWithRender<T extends SeriesType, HorzScaleItem = Time> = {
+    render: RenderPrimitive<T, HorzScaleItem>;
     plugin?: never;
 };
 
-declare const SeriesPrimitiveRenderFunction: <T extends SeriesType>(props: SeriesPrimitiveProps<T>, ref: ForwardedRef<SeriesPrimitiveApiRef>) => JSX.Element | null;
+declare const SeriesPrimitiveRenderFunction: <T extends SeriesType, HorzScaleItem = Time>(props: SeriesPrimitiveProps<T, HorzScaleItem>, ref: ForwardedRef<SeriesPrimitiveApiRef<HorzScaleItem>>) => JSX.Element | null;
 
 /**
  * Series component properties that can be used to create a series of a specific type.
  */
-export declare type SeriesProps<T extends SeriesType> = Omit<SeriesTemplateProps<T>, "type">;
+export declare type SeriesProps<T extends SeriesType, HorzScaleItem = Time> = Omit<SeriesTemplateProps<T, HorzScaleItem>, "type">;
 
 /**
  * Properties of a series template component that can be used to create a series of a specific type.
  */
-declare type SeriesTemplateProps<T extends SeriesType> = {
+declare type SeriesTemplateProps<T extends SeriesType, HorzScaleItem = Time> = {
     type: T;
     children?: ReactNode;
-} & SeriesParameters<T>;
+} & SeriesParameters<T, HorzScaleItem>;
 
 /**
  * Unique properties for the text watermark component.
@@ -662,27 +753,30 @@ export declare type TextWatermarkProps = DeepPartial<TextWatermarkOptions>;
  * @see {@link https://tradingview.github.io/lightweight-charts/docs/time-scale | TradingView documentation for time scale}
  * @example
  * ```tsx
- * <TimeScale visibleRange={{ from: 0, to: 100 }} onVisibleRangeChanged={() => {}} />
+ * <TimeScale
+ *   visibleRange={{ from: 0, to: 100 }}
+ *   onVisibleTimeRangeChange={() => {}}
+ * />
  * ```
  */
-export declare const TimeScale: ForwardRefExoticComponent<TimeScaleProps & RefAttributes<TimeScaleApiRef>>;
+export declare const TimeScale: GenericTimeScaleComponent;
 
 /**
  * Time scale API reference type that can be used to access the time scale plugin API.
  */
-export declare type TimeScaleApiRef = {
+export declare type TimeScaleApiRef<HorzScaleItem = Time> = {
     /**
      * Reference to the time scale API.
      */
-    _timeScale: ITimeScaleApi<Time> | null;
+    _timeScale: ITimeScaleApi<HorzScaleItem> | null;
     /**
      * Function to get the time scale API.
      */
-    api: () => ITimeScaleApi<Time> | null;
+    api: () => ITimeScaleApi<HorzScaleItem> | null;
     /**
      * Function to initialize the time scale API.
      */
-    init: () => ITimeScaleApi<Time> | null;
+    init: () => ITimeScaleApi<HorzScaleItem> | null;
     /**
      * Function to clear the time scale API.
      */
@@ -720,11 +814,11 @@ declare type TimeScaleOptions = DeepPartial<TimeScaleOptions_2>;
  * Use this component to configure how the chart's visible time/logical range is initialized
  * and updated, and to react to time scale updates via event handlers.
  */
-export declare type TimeScaleProps = {
+export declare type TimeScaleProps<HorzScaleItem = Time> = {
     /**
      * Callback for when the visible time range changes.
      */
-    onVisibleTimeRangeChange?: TimeRangeChangeEventHandler<Time>;
+    onVisibleTimeRangeChange?: TimeRangeChangeEventHandler<HorzScaleItem>;
     /**
      * Callback for when the visible logical range changes.
      */
@@ -736,7 +830,7 @@ export declare type TimeScaleProps = {
     /**
      * The visible time range for the time scale.
      */
-    visibleRange?: IRange<Time>;
+    visibleRange?: IRange<HorzScaleItem>;
     /**
      * The visible logical range for the time scale.
      */
@@ -754,7 +848,17 @@ export declare type TimeScaleProps = {
 /**
  * Watermark API reference type that can be used to access the watermark plugin API.
  */
-export declare type WatermarkApiRef<T extends WatermarkType> = T extends "text" ? WatermarkTextApiRefBase : WatermarkImageApiRefBase;
+export declare type WatermarkApiRef<T extends WatermarkType, HorzScaleItem = Time> = T extends "text" ? {
+    _watermark: ITextWatermarkPluginApi<HorzScaleItem> | null;
+    api: () => ITextWatermarkPluginApi<HorzScaleItem> | null;
+    init: () => ITextWatermarkPluginApi<HorzScaleItem> | null;
+    clear: () => void;
+} : {
+    _watermark: IImageWatermarkPluginApi<HorzScaleItem> | null;
+    api: () => IImageWatermarkPluginApi<HorzScaleItem> | null;
+    init: () => IImageWatermarkPluginApi<HorzScaleItem> | null;
+    clear: () => void;
+};
 
 /**
  * Watermark component that can be used to add an image watermark to a chart pane.
@@ -775,13 +879,6 @@ export declare type WatermarkApiRef<T extends WatermarkType> = T extends "text"
  */
 export declare const WatermarkImage: ForwardRefExoticComponent<ImageWatermarkProps & RefAttributes<WatermarkApiRef<"image">>>;
 
-declare type WatermarkImageApiRefBase = {
-    _watermark: IImageWatermarkPluginApi<Time> | null;
-    api: () => IImageWatermarkPluginApi<Time> | null;
-    init: () => IImageWatermarkPluginApi<Time> | null;
-    clear: () => void;
-};
-
 /**
  * Watermark component that can be used to add a text or image watermark to a chart pane.
  *
@@ -803,13 +900,6 @@ declare type WatermarkImageApiRefBase = {
  */
 export declare const WatermarkText: ForwardRefExoticComponent<TextWatermarkProps & RefAttributes<WatermarkApiRef<"text">>>;
 
-declare type WatermarkTextApiRefBase = {
-    _watermark: ITextWatermarkPluginApi<Time> | null;
-    api: () => ITextWatermarkPluginApi<Time> | null;
-    init: () => ITextWatermarkPluginApi<Time> | null;
-    clear: () => void;
-};
-
 /**
  * Watermark types supported by the library.
  * - `text`: A text watermark.
@@ -817,4 +907,26 @@ declare type WatermarkTextApiRefBase = {
  */
 export declare type WatermarkType = "text" | "image";
 
+/**
+ * YieldCurveChart component that can be used to create a yield curve chart.
+ *
+ * @param props - The properties for the yield curve chart.
+ * @param ref - The ref to access the chart container.
+ * @returns A React component that renders the yield curve chart.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#yield-curve-chart | TradingView documentation for yield curve charts}
+ * @example
+ * ```tsx
+ * <YieldCurveChart>
+ *   <LineSeries data={[{ time: 1, value: 5.2 }, { time: 12, value: 4.7 }]} />
+ * </YieldCurveChart>
+ * ```
+ */
+export declare const YieldCurveChart: ForwardRefExoticComponent<YieldCurveChartProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * YieldCurveChart component props.
+ */
+export declare type YieldCurveChartProps = GenericChartProps<number, IYieldCurveChartApi, YieldCurveChartOptions>;
+
 export { }