lightweight-charts-react-components/dist/index.d.ts

React components for Lightweight Charts

/**!
* lightweight-charts-react-components v1.3.0
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/

import { ChartOptions } 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 type { ICustomSeriesPaneView } from 'lightweight-charts';
import type { IImageWatermarkPluginApi } from 'lightweight-charts';
import type { ImageWatermarkOptions } from 'lightweight-charts';
import type { IPaneApi } from 'lightweight-charts';
import type { IPriceLine } from 'lightweight-charts';
import type { IPriceScaleApi } from 'lightweight-charts';
import type { IRange } from 'lightweight-charts';
import type { ISeriesApi } from 'lightweight-charts';
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 type { JSX } from 'react';
import type { LogicalRangeChangeEventHandler } from 'lightweight-charts';
import { MouseEventHandler } from 'lightweight-charts';
import type { PriceLineOptions } from 'lightweight-charts';
import type { PriceScaleOptions as PriceScaleOptions_2 } from 'lightweight-charts';
import type { ReactNode } from 'react';
import type { RefAttributes } from 'react';
import type { SeriesDataItemTypeMap } from 'lightweight-charts';
import type { SeriesMarker } from 'lightweight-charts';
import type { SeriesPartialOptionsMap } from 'lightweight-charts';
import type { SeriesType } from 'lightweight-charts';
import type { SizeChangeEventHandler } from 'lightweight-charts';
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';

/**
 * AreaSeries component that can be used to create an area series in a chart.
 *
 * @param props - The properties for the area series.
 * @param ref - The ref to access the area series API.
 * @returns A React component that renders the area series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#area | TradingView documentation for area series}
 * @example
 * ```tsx
 * <AreaSeries
 *  data={[
 *    { time: '2021-01-01', value: 100 },
 *    { time: '2021-01-02', value: 200 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const AreaSeries: ForwardRefExoticComponent<SeriesProps<"Area"> & RefAttributes<SeriesApiRef<"Area">>>;

/**
 * BarSeries component that can be used to create a bar series in a chart.
 *
 * @param props - The properties for the bar series.
 * @param ref - The ref to access the bar series API.
 * @returns A React component that renders the bar series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#bar | TradingView documentation for bar series}
 * @example
 * ```tsx
 * <BarSeries
 *  data={[
 *    { time: '2021-01-01', open: 100, high: 110, low: 90, close: 105 },
 *    { time: '2021-01-02', open: 105, high: 115, low: 95, close: 110 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const BarSeries: ForwardRefExoticComponent<SeriesProps<"Bar"> & RefAttributes<SeriesApiRef<"Bar">>>;

/**
 * BaselineSeries component that can be used to create a baseline series in a chart.
 *
 * @param props - The properties for the baseline series.
 * @param ref - The ref to access the baseline series API.
 * @returns A React component that renders the baseline series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#baseline | TradingView documentation for baseline series}
 * @example
 * ```tsx
 * <BaselineSeries
 *  data={[
 *    { time: '2021-01-01', value: 100 },
 *    { time: '2021-01-02', value: 200 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const BaselineSeries: ForwardRefExoticComponent<SeriesProps<"Baseline"> & RefAttributes<SeriesApiRef<"Baseline">>>;

/**
 * CandlestickSeries component that can be used to create a candlestick series in a chart.
 *
 * @param props - The properties for the candlestick series.
 * @param ref - The ref to access the candlestick series API.
 * @returns A React component that renders the candlestick series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#candlestick | TradingView documentation for candlestick series}
 * @example
 * ```tsx
 * <CandlestickSeries
 *  data={[
 *    { time: '2021-01-01', open: 100, high: 110, low: 90, close: 105 },
 *    { time: '2021-01-02', open: 105, high: 115, low: 95, close: 110 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const CandlestickSeries: ForwardRefExoticComponent<SeriesProps<"Candlestick"> & RefAttributes<SeriesApiRef<"Candlestick">>>;

/**
 * Chart component that can be used to create a chart.
 *
 * @param props - The properties for the chart.
 * @param ref - The ref to access the chart API.
 * @returns A React component that renders the 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 | TradingView documentation for charts}
 * @example
 * ```tsx
 * <Chart>
 *   <Pane stretchFactor={2}>
 *     ...
 *   </Pane>
 * </Chart>
 * ```
 */
export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<HTMLDivElement>>;

/**
 * Chart API reference type that can be used to access the chart plugin API.
 */
export declare type ChartApiRef = {
    /**
     * Internal reference to the chart API instance.
     */
    _chart: IChartApi | null;
    /**
     * Function to get the chart API instance.
     */
    api: () => IChartApi | null;
    /**
     * Function to initialize the chart API instance.
     */
    init: () => IChartApi | null;
    /**
     * Function to clear the chart API instance.
     */
    clear: () => void;
};

/**
 * 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>;
    /**
     * Callback function that is called when the chart is double-clicked.
     */
    onDblClick?: MouseEventHandler<Time>;
};

/**
 * CustomSeries component that can be used to create a custom series in a chart.
 *
 * @param props - The properties for the custom series.
 * @param ref - The ref to access the custom series API.
 * @returns A React component that renders the custom series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#custom-series-plugins | TradingView documentation for custom series}
 * @example
 * ```tsx
 * <CustomSeries
 *  data={[
 *    { time: '2021-01-01', value: 100 },
 *    { time: '2021-01-02', value: 200 }
 *  ]}
 *  options={{}}
 *  plugin={{}}
 * />
 * ```
 */
export declare const CustomSeries: ForwardRefExoticComponent<SeriesProps<"Custom"> & RefAttributes<SeriesApiRef<"Custom">>>;

/**
 * Unique properties for the custom series component.
 */
declare type CustomSeriesUniqueProps = {
    /**
     * Custom pane view plugin instance that can be used to render custom series.
     */
    plugin?: ICustomSeriesPaneView;
};

declare type GenericSeriesPrimitiveComponent = (<T extends SeriesType>(props: SeriesPrimitiveProps<T> & {
    ref?: ForwardedRef<SeriesPrimitiveApiRef>;
}) => ReturnType<typeof SeriesPrimitiveRenderFunction>) & {
    displayName: string;
};

/**
 * HistogramSeries component that can be used to create a histogram series in a chart.
 *
 * @param props - The properties for the histogram series.
 * @param ref - The ref to access the histogram series API.
 * @returns A React component that renders the histogram series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#histogram | TradingView documentation for histogram series}
 * @example
 * ```tsx
 * <HistogramSeries
 *  data={[
 *    { time: '2021-01-01', value: 100 },
 *    { time: '2021-01-02', value: 200 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const HistogramSeries: ForwardRefExoticComponent<SeriesProps<"Histogram"> & RefAttributes<SeriesApiRef<"Histogram">>>;

/**
 * Unique properties for the image watermark component.
 */
export declare type ImageWatermarkProps = {
    src: string;
} & DeepPartial<ImageWatermarkOptions>;

/**
 * Pane context that provides access to the pane API and readiness state.
 */
export declare interface IPaneContext {
    /**
     * Reference to the pane API.
     */
    paneApiRef?: PaneApiRef;
    /**
     * Readiness state of the pane component.
     */
    isReady: boolean;
}

/**
 * LineSeries component that can be used to create a line series in a chart.
 *
 * @param props - The properties for the line series.
 * @param ref - The ref to access the line series API.
 * @returns A React component that renders the line series.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#line | TradingView documentation for line series}
 * @example
 * ```tsx
 * <LineSeries
 *  data={[
 *    { time: '2021-01-01', value: 100 },
 *    { time: '2021-01-02', value: 200 }
 *  ]}
 *  options={{}}
 * />
 * ```
 */
export declare const LineSeries: ForwardRefExoticComponent<SeriesProps<"Line"> & RefAttributes<SeriesApiRef<"Line">>>;

/**
 * Markers component that can be used to add markers to a chart pane.
 *
 * @param props - The properties for the markers.
 * @param ref - The ref to access the markers API.
 * @returns A React component that renders the markers.
 * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/series-markers | Markers documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/markers | TradingView documentation for markers}
 * @example
 * ```tsx
 * <Markers
 *  markers={[
 *    { time: 1622548800, position: "aboveBar", color: "red", shape: "arrowUp" },
 *    { time: 1622548800, position: "belowBar", color: "green", shape: "arrowDown" },
 *  ]}
 * />
 * ```
 */
export declare const Markers: ForwardRefExoticComponent<MarkersProps & RefAttributes<MarkersApiRef>>;

/**
 * Markers API reference type that can be used to access the series markers plugin API.
 */
export declare type MarkersApiRef = {
    /**
     * Internal reference to the series markers API instance.
     */
    _markers: ISeriesMarkersPluginApi<Time> | null;
    /**
     * Function to get the series markers API instance.
     */
    api: () => ISeriesMarkersPluginApi<Time> | null;
    /**
     * Function to initialize the series markers API instance.
     */
    init: () => ISeriesMarkersPluginApi<Time> | null;
    /**
     * Function to clear the series markers API instance.
     */
    clear: () => void;
};

/**
 * Markers component properties that can be used to create a series markers component.
 */
export declare type MarkersProps = {
    /**
     * List of markers to be displayed on the series.
     */
    markers: SeriesMarker<Time>[];
    /**
     * Options for the markers.
     */
    reactive?: boolean;
};

/**
 * Pane component that can be used to create a pane in a chart.
 *
 * @param props - The properties for the pane.
 * @param ref - The ref to access the pane API.
 * @returns A React component that renders the pane.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/panes | Panes documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/panes | TradingView documentation for panes}
 * @example
 * ```tsx
 * <Pane stretchFactor={2}>
 * ...
 * </Pane>
 * ```
 */
export declare const Pane: ForwardRefExoticComponent<PaneProps & RefAttributes<PaneApiRef>>;

/**
 * Pane API reference type that can be used to access the pane plugin API.
 */
export declare type PaneApiRef = {
    /**
     * Reference to the pane API.
     */
    _pane: IPaneApi<Time> | null;
    /**
     * Function to get the pane API.
     */
    api: () => IPaneApi<Time> | null;
    /**
     * Function to initialize the pane API.
     */
    init: () => IPaneApi<Time> | null;
    /**
     * Function to clear the pane API.
     */
    clear: () => void;
};

/**
 * Pane component props.
 */
export declare type PaneProps = {
    /**
     * Children of the pane component.
     */
    children?: ReactNode;
    /**
     * Stretch factor for the pane, which determines how much space the pane should take relative to other panes.
     */
    stretchFactor?: number;
};

/**
 * PriceLine component that can be used to add a price line to a chart pane.
 *
 * @param props - The properties for the price line.
 * @param ref - The ref to access the price line API.
 * @returns A React component that renders the price line.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/price-lines | Price Lines documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-line | TradingView documentation for price lines}
 * @example
 * ```tsx
 * <PriceLine price={100} options={{}} />
 * ```
 */
export declare const PriceLine: ForwardRefExoticComponent<PriceLineProps & RefAttributes<PriceLineApiRef>>;

/**
 * PriceLine API reference type that can be used to access the price line plugin API.
 */
export declare type PriceLineApiRef = {
    /**
     * Reference to the price line API.
     */
    _priceLine: IPriceLine | null;
    /**
     * Function to get the price line API.
     */
    api: () => IPriceLine | null;
    /**
     * Function to initialize the price line API.
     */
    init: () => IPriceLine | null;
    /**
     * Function to clear the price line API.
     */
    clear: () => void;
};

/**
 * PriceLine component props.
 */
export declare type PriceLineProps = {
    /**
     * The price at which the price line should be drawn.
     */
    price: number;
    /**
     * Options for the price line.
     */
    options?: Omit<Partial<PriceLineOptions>, "price">;
};

/**
 * PriceScale component that can be used to create/customize price scale in a chart.
 *
 * @param props - The properties for the price scale.
 * @param ref - The ref to access the price scale API.
 * @returns A React component that renders the price scale.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/price-scale | Price Scale documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/price-scale | TradingView documentation for price scale}
 * @example
 * ```tsx
 * <PriceScale id="right" options={{}} />
 * ```
 */
export declare const PriceScale: ForwardRefExoticComponent<PriceScaleProps & RefAttributes<PriceScaleApiRef>>;

/**
 * Price scale API reference type that can be used to access the price scale plugin API.
 */
export declare type PriceScaleApiRef = {
    /**
     * Reference to the price scale API.
     */
    _priceScale: IPriceScaleApi | null;
    /**
     * Function to get the price scale API.
     */
    api: () => IPriceScaleApi | null;
    /**
     * Function to initialize the price scale API.
     */
    init: () => IPriceScaleApi | null;
    /**
     * Function to set the ID of the price scale.
     */
    setId: (id: string) => void;
    /**
     * Function to clear the price scale API.
     */
    clear: () => void;
};

declare type PriceScaleOptions = DeepPartial<PriceScaleOptions_2>;

/**
 * PriceScale component props.
 */
export declare type PriceScaleProps = {
    /**
     * Options for the price scale.
     */
    options?: PriceScaleOptions;
    /**
     * The ID of the price scale.
     */
    id: string;
};

/**
 * Render function type for series primitives.
 */
export declare type RenderPrimitive<T extends SeriesType = SeriesType> = ({ chart, series, }: {
    chart: IChartApi;
    series: ISeriesApi<T>;
}) => ISeriesPrimitive;

/**
 * Series API reference type that can be used to access the series plugin API.
 */
export declare type SeriesApiRef<T extends SeriesType> = {
    /**
     * Internal reference to the series API instance.
     */
    _series: ISeriesApi<T> | null;
    /**
     * Function to get the series API instance.
     */
    api: () => ISeriesApi<T> | null;
    /**
     * Function to initialize the series API instance.
     */
    init: () => ISeriesApi<T> | null;
    /**
     * Function to clear the series API instance.
     */
    clear: () => void;
};

/**
 * 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][];
    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.
     *
     * @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 : {});

/**
 * SeriesPrimitive component that can be used to create a primitive on series.
 *
 * @param props - The properties for the series primitive.
 * @param ref - The ref to access the series primitive API.
 * @returns A React component that renders the series primitive.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series-primitives | Series primitives documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/docs/plugins/series-primitives | TradingView documentation for series primitive}
 * @example
 * ```tsx
 * <SeriesPrimitive render={{}} />
 * <SeriesPrimitive plugin={{}} />
 * ```
 */
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 = {
    /**
     * Internal reference to the series primitive API instance.
     */
    _primitive: ISeriesPrimitive | null;
    /**
     * Function to get the series primitive API instance.
     */
    api(): ISeriesPrimitive | null;
    /**
     * Function to initialize the series primitive API instance.
     */
    init(): ISeriesPrimitive | null;
    /**
     * Function to clear the series primitive API instance.
     */
    clear(): void;
};

/**
 * Series primitive properties that can be used to create a series primitive.
 */
export declare type SeriesPrimitiveProps<T extends SeriesType = SeriesType> = SeriesPrimitivePropsWithRender<T> | SeriesPrimitivePropsWithPlugin;

declare type SeriesPrimitivePropsWithPlugin = {
    plugin: ISeriesPrimitive;
    render?: never;
};

declare type SeriesPrimitivePropsWithRender<T extends SeriesType> = {
    render: RenderPrimitive<T>;
    plugin?: never;
};

declare const SeriesPrimitiveRenderFunction: <T extends SeriesType>(props: SeriesPrimitiveProps<T>, ref: ForwardedRef<SeriesPrimitiveApiRef>) => 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">;

/**
 * Properties of a series template component that can be used to create a series of a specific type.
 */
declare type SeriesTemplateProps<T extends SeriesType> = {
    type: T;
    children?: ReactNode;
} & SeriesParameters<T>;

/**
 * Unique properties for the text watermark component.
 */
export declare type TextWatermarkProps = DeepPartial<TextWatermarkOptions>;

/**
 * TimeScale component that can be used to create/customize time scale in a chart.
 *
 * @param props - The properties for the time scale.
 * @param ref - The ref to access the time scale API.
 * @returns A React component that renders the time scale.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/time-scale | Time Scale documentation}
 * @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={() => {}} />
 * ```
 */
export declare const TimeScale: ForwardRefExoticComponent<TimeScaleProps & RefAttributes<TimeScaleApiRef>>;

/**
 * Time scale API reference type that can be used to access the time scale plugin API.
 */
export declare type TimeScaleApiRef = {
    /**
     * Reference to the time scale API.
     */
    _timeScale: ITimeScaleApi<Time> | null;
    /**
     * Function to get the time scale API.
     */
    api: () => ITimeScaleApi<Time> | null;
    /**
     * Function to initialize the time scale API.
     */
    init: () => ITimeScaleApi<Time> | null;
    /**
     * Function to clear the time scale API.
     */
    clear: () => void;
};

/**
 * TimeScaleFitContentTrigger component that triggers a fit content operation on the time scale.
 *
 * @param props - The properties for the time scale fit content trigger.
 * @returns A React component that triggers a fit content operation on the time scale.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/time-scale-fit-content-trigger | Time Scale Fit Content Trigger documentation}
 * @example
 * ```tsx
 * <TimeScaleFitContentTrigger deps={[...]} />
 * ```
 */
export declare const TimeScaleFitContentTrigger: ({ deps, }: TimeScaleFitContentTriggerProps) => JSX.Element | null;

/**
 * TimeScaleFitContentTriggerProps component props.
 */
export declare type TimeScaleFitContentTriggerProps = {
    /**
     * List of dependencies that trigger the time scale to fit content.
     */
    deps: DependencyList;
};

declare type TimeScaleOptions = DeepPartial<TimeScaleOptions_2>;

/**
 * TimeScale component props.
 */
export declare type TimeScaleProps = {
    /**
     * Callback for when the visible time range changes.
     */
    onVisibleTimeRangeChange?: TimeRangeChangeEventHandler<Time>;
    /**
     * Callback for when the visible logical range changes.
     */
    onVisibleLogicalRangeChange?: LogicalRangeChangeEventHandler;
    /**
     * Callback for when the size of the time scale changes.
     */
    onSizeChange?: SizeChangeEventHandler;
    /**
     * The visible time range for the time scale.
     */
    visibleRange?: IRange<Time>;
    /**
     * The visible logical range for the time scale.
     */
    visibleLogicalRange?: IRange<number>;
    /**
     * Options for the time scale.
     */
    options?: TimeScaleOptions;
    /**
     * Children of the time scale component.
     */
    children?: ReactNode;
};

/**
 * 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;

/**
 * Watermark component that can be used to add an image watermark to a chart pane.
 *
 * @param props - The properties for the image watermark.
 * @param ref - The ref to access the watermark API.
 * @returns A React component that renders the image watermark.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/watermarks | Watermarks documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark | TradingView documentation for watermarks}
 * @example
 * ```tsx
 * <WatermarkImage
 *  src="data:image/svg+xml;base64,..."
 *  alpha={0.5}
 *  padding={20}
 * />
 * ```
 */
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.
 *
 * @param props - The properties for the watermark.
 * @param ref - The ref to access the watermark API.
 * @returns A React component that renders the watermark.
 * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/watermarks | Watermarks documentation}
 * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark | TradingView documentation for watermarks}
 * @example
 * ```tsx
 * <WatermarkText
 *  lines={[
 *    { text: "Your chart name", color: "blue", fontSize: 24 },
 *    { text: "Some other text", color: "pink", fontSize: 16 },
 *  ]}
 *  horzAlign="center"
 * />
 * ```
 */
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.
 * - `image`: An image watermark.
 */
export declare type WatermarkType = "text" | "image";

export { }