UNPKG

lightweight-charts

Version:

Performant financial charts built with HTML5 canvas

1,773 lines (1,771 loc) 142 kB
// Generated by dts-bundle-generator v9.5.1 import { CanvasRenderingTarget2D } from 'fancy-canvas'; declare const areaSeries: SeriesDefinition<"Area">; declare const barSeries: SeriesDefinition<"Bar">; declare const baselineSeries: SeriesDefinition<"Baseline">; declare const candlestickSeries: SeriesDefinition<"Candlestick">; declare const histogramSeries: SeriesDefinition<"Histogram">; declare const lineSeries: SeriesDefinition<"Line">; export declare const customSeriesDefaultOptions: CustomSeriesOptions; /** * Enumeration representing the sign of a marker. */ export declare const enum MarkerSign { /** Represents a negative change (-1) */ Negative = -1, /** Represents no change (0) */ Neutral = 0, /** Represents a positive change (1) */ Positive = 1 } /** * Represents a type of color. */ export declare enum ColorType { /** Solid color */ Solid = "solid", /** Vertical gradient color */ VerticalGradient = "gradient" } /** * Represents the crosshair mode. */ export declare enum CrosshairMode { /** * This mode allows crosshair to move freely on the chart. */ Normal = 0, /** * This mode sticks crosshair's horizontal line to the price value of a single-value series or to the close price of OHLC-based series. */ Magnet = 1, /** * This mode disables rendering of the crosshair. */ Hidden = 2, /** * This mode sticks crosshair's horizontal line to the price value of a single-value series or to the open/high/low/close price of OHLC-based series. */ MagnetOHLC = 3 } /** * Represents the type of the last price animation for series such as area or line. */ export declare enum LastPriceAnimationMode { /** * Animation is always disabled */ Disabled = 0, /** * Animation is always enabled. */ Continuous = 1, /** * Animation is active after new data. */ OnDataUpdate = 2 } /** * Represents the possible line styles. */ export declare enum LineStyle { /** * A solid line. */ Solid = 0, /** * A dotted line. */ Dotted = 1, /** * A dashed line. */ Dashed = 2, /** * A dashed line with bigger dashes. */ LargeDashed = 3, /** * A dotted line with more space between dots. */ SparseDotted = 4 } /** * Represents the possible line types. */ export declare enum LineType { /** * A line. */ Simple = 0, /** * A stepped line. */ WithSteps = 1, /** * A curved line. */ Curved = 2 } /** * Search direction if no data found at provided index */ export declare enum MismatchDirection { /** * Search the nearest left item */ NearestLeft = -1, /** * Do not search */ None = 0, /** * Search the nearest right item */ NearestRight = 1 } /** * Represents the source of data to be used for the horizontal price line. */ export declare enum PriceLineSource { /** * Use the last bar data. */ LastBar = 0, /** * Use the last visible data of the chart viewport. */ LastVisible = 1 } /** * Represents the price scale mode. */ export declare enum PriceScaleMode { /** * Price scale shows prices. Price range changes linearly. */ Normal = 0, /** * Price scale shows prices. Price range changes logarithmically. */ Logarithmic = 1, /** * Price scale shows percentage values according the first visible value of the price scale. * The first visible value is 0% in this mode. */ Percentage = 2, /** * The same as percentage mode, but the first value is moved to 100. */ IndexedTo100 = 3 } /** * Represents the type of a tick mark on the time axis. */ export declare enum TickMarkType { /** * The start of the year (e.g. it's the first tick mark in a year). */ Year = 0, /** * The start of the month (e.g. it's the first tick mark in a month). */ Month = 1, /** * A day of the month. */ DayOfMonth = 2, /** * A time without seconds. */ Time = 3, /** * A time with seconds. */ TimeWithSeconds = 4 } /** * Determine how to exit the tracking mode. * * By default, mobile users will long press to deactivate the scroll and have the ability to check values and dates. * Another press is required to activate the scroll, be able to move left/right, zoom, etc. */ export declare enum TrackingModeExitMode { /** * Tracking Mode will be deactivated on touch end event. */ OnTouchEnd = 0, /** * Tracking Mode will be deactivated on the next tap event. */ OnNextTap = 1 } /** * This function is the simplified main entry point of the Lightweight Charting Library with time points for the horizontal scale. * * @param container - ID of HTML element or element itself * @param options - Any subset of options to be applied at start. * @returns An interface to the created chart */ export declare function createChart(container: string | HTMLElement, options?: DeepPartial<ChartOptions>): IChartApi; /** * This function is the main entry point of the Lightweight Charting Library. If you are using time values * for the horizontal scale then it is recommended that you rather use the {@link createChart} function. * * @template HorzScaleItem - type of points on the horizontal scale * @template THorzScaleBehavior - type of horizontal axis strategy that encapsulate all the specific behaviors of the horizontal scale type * * @param container - ID of HTML element or element itself * @param horzScaleBehavior - Horizontal scale behavior * @param options - Any subset of options to be applied at start. * @returns An interface to the created chart */ export declare function createChartEx<HorzScaleItem, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem>>(container: string | HTMLElement, horzScaleBehavior: THorzScaleBehavior, options?: DeepPartial<ReturnType<THorzScaleBehavior["options"]>>): IChartApiBase<HorzScaleItem>; /** * Creates an image watermark. * * @param pane - Target pane. * @param imageUrl - Image URL. * @param options - Watermark options. * * @returns Image watermark wrapper. * * @example * ```js * import { createImageWatermark } from 'lightweight-charts'; * * const firstPane = chart.panes()[0]; * const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', { * alpha: 0.5, * padding: 20, * }); * // to change options * imageWatermark.applyOptions({ padding: 10 }); * // to remove watermark from the pane * imageWatermark.detach(); * ``` */ export declare function createImageWatermark<T>(pane: IPaneApi<T>, imageUrl: string, options: DeepPartial<ImageWatermarkOptions>): IImageWatermarkPluginApi<T>; /** * Creates an 'options' chart with price values on the horizontal scale. * * This function is used to create a specialized chart type where the horizontal scale * represents price values instead of time. It's particularly useful for visualizing * option chains, price distributions, or any data where price is the primary x-axis metric. * * @param container - The DOM element or its id where the chart will be rendered. * @param options - Optional configuration options for the price chart. * @returns An instance of IChartApiBase configured for price-based horizontal scaling. */ export declare function createOptionsChart(container: string | HTMLElement, options?: DeepPartial<PriceChartOptions>): IChartApiBase<number>; /** * A function to create a series markers primitive. * * @param series - The series to which the primitive will be attached. * * @param markers - An array of markers to be displayed on the series. * * @param options - Options for the series markers plugin. * * @example * ```js * import { createSeriesMarkers } from 'lightweight-charts'; * * const seriesMarkers = createSeriesMarkers( * series, * [ * { * color: 'green', * position: 'inBar', * shape: 'arrowDown', * time: 1556880900, * }, * ] * ); * // and then you can modify the markers * // set it to empty array to remove all markers * seriesMarkers.setMarkers([]); * * // `seriesMarkers.markers()` returns current markers * ``` */ export declare function createSeriesMarkers<HorzScaleItem>(series: ISeriesApi<SeriesType, HorzScaleItem>, markers?: SeriesMarker<HorzScaleItem>[], options?: DeepPartial<SeriesMarkersOptions>): ISeriesMarkersPluginApi<HorzScaleItem>; /** * Creates an image watermark. * * @param pane - Target pane. * @param options - Watermark options. * * @returns Image watermark wrapper. * * @example * ```js * import { createTextWatermark } from 'lightweight-charts'; * * const firstPane = chart.panes()[0]; * const textWatermark = createTextWatermark(firstPane, { * horzAlign: 'center', * vertAlign: 'center', * lines: [ * { * text: 'Hello', * color: 'rgba(255,0,0,0.5)', * fontSize: 100, * fontStyle: 'bold', * }, * { * text: 'This is a text watermark', * color: 'rgba(0,0,255,0.5)', * fontSize: 50, * fontStyle: 'italic', * fontFamily: 'monospace', * }, * ], * }); * // to change options * textWatermark.applyOptions({ horzAlign: 'left' }); * // to remove watermark from the pane * textWatermark.detach(); * ``` */ export declare function createTextWatermark<T>(pane: IPaneApi<T>, options: DeepPartial<TextWatermarkOptions>): ITextWatermarkPluginApi<T>; /** * Creates and attaches the Series Up Down Markers Plugin. * * @param series - Series to which attach the Up Down Markers Plugin * @param options - options for the Up Down Markers Plugin * * @returns Api for Series Up Down Marker Plugin. {@link ISeriesUpDownMarkerPluginApi} * * @example * ```js * import { createUpDownMarkers, createChart, LineSeries } from 'lightweight-charts'; * * const chart = createChart('container'); * const lineSeries = chart.addSeries(LineSeries); * const upDownMarkers = createUpDownMarkers(lineSeries, { * positiveColor: '#22AB94', * negativeColor: '#F7525F', * updateVisibilityDuration: 5000, * }); * // to add some data * upDownMarkers.setData( * [ * { time: '2020-02-02', value: 12.34 }, * //... more line series data * ] * ); * // ... Update some values * upDownMarkers.update({ time: '2020-02-02', value: 13.54 }, true); * // to remove plugin from the series * upDownMarkers.detach(); * ``` */ export declare function createUpDownMarkers<T>(series: ISeriesApi<SeriesType, T>, options?: Partial<UpDownMarkersPluginOptions>): ISeriesUpDownMarkerPluginApi<T>; /** * Creates a yield curve chart with the specified options. * * A yield curve chart differs from the default chart type * in the following ways: * - Horizontal scale is linearly spaced, and defined in monthly * time duration units * - Whitespace is ignored for the crosshair and grid lines * * @param container - ID of HTML element or element itself * @param options - The yield chart options. * @returns An interface to the created chart */ export declare function createYieldCurveChart(container: string | HTMLElement, options?: DeepPartial<YieldCurveChartOptions>): IYieldCurveChartApi; /** * Provides the default implementation of the horizontal scale (time-based) that can be used as a base for extending the horizontal scale with custom behavior. * This allows for the introduction of custom functionality without re-implementing the entire {@link IHorzScaleBehavior}&lt;{@link Time}&gt; interface. * * For further details, refer to the {@link createChartEx} chart constructor method. * * @returns An uninitialized class implementing the {@link IHorzScaleBehavior}&lt;{@link Time}&gt; interface */ export declare function defaultHorzScaleBehavior(): new () => IHorzScaleBehavior<Time>; /** * Check if a time value is a business day object. * * @param time - The time to check. * @returns `true` if `time` is a {@link BusinessDay} object, false otherwise. */ export declare function isBusinessDay(time: Time): time is BusinessDay; /** * Check if a time value is a UTC timestamp number. * * @param time - The time to check. * @returns `true` if `time` is a {@link UTCTimestamp} number, false otherwise. */ export declare function isUTCTimestamp(time: Time): time is UTCTimestamp; /** * Returns the current version as a string. For example `'3.3.0'`. */ export declare function version(): string; /** * Structure describing a single item of data for area series */ export interface AreaData<HorzScaleItem = Time> extends SingleValueData<HorzScaleItem> { /** * Optional line color value for certain data item. If missed, color from options is used */ lineColor?: string; /** * Optional top color value for certain data item. If missed, color from options is used */ topColor?: string; /** * Optional bottom color value for certain data item. If missed, color from options is used */ bottomColor?: string; } /** * Represents style options for an area series. */ export interface AreaStyleOptions { /** * Color of the top part of the area. * * @defaultValue `'rgba( 46, 220, 135, 0.4)'` */ topColor: string; /** * Color of the bottom part of the area. * * @defaultValue `'rgba( 40, 221, 100, 0)'` */ bottomColor: string; /** * Gradient is relative to the base value and the currently visible range. * If it is false, the gradient is relative to the top and bottom of the chart. * * @defaultValue `false` */ relativeGradient: boolean; /** * Invert the filled area. Fills the area above the line if set to true. * * @defaultValue `false` */ invertFilledArea: boolean; /** * Line color. * * @defaultValue `'#33D778'` */ lineColor: string; /** * Line style. * * @defaultValue {@link LineStyle.Solid} */ lineStyle: LineStyle; /** * Line width in pixels. * * @defaultValue `3` */ lineWidth: LineWidth; /** * Line type. * * @defaultValue {@link LineType.Simple} */ lineType: LineType; /** * Show series line. * * @defaultValue `true` */ lineVisible: boolean; /** * Show circle markers on each point. * * @defaultValue `false` */ pointMarkersVisible: boolean; /** * Circle markers radius in pixels. * * @defaultValue `undefined` */ pointMarkersRadius?: number; /** * Show the crosshair marker. * * @defaultValue `true` */ crosshairMarkerVisible: boolean; /** * Crosshair marker radius in pixels. * * @defaultValue `4` */ crosshairMarkerRadius: number; /** * Crosshair marker border color. An empty string falls back to the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBorderColor: string; /** * The crosshair marker background color. An empty string falls back to the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBackgroundColor: string; /** * Crosshair marker border width in pixels. * * @defaultValue `2` */ crosshairMarkerBorderWidth: number; /** * Last price animation mode. * * @defaultValue {@link LastPriceAnimationMode.Disabled} */ lastPriceAnimation: LastPriceAnimationMode; } /** * Represents the margin used when updating a price scale. */ export interface AutoScaleMargins { /** The number of pixels for bottom margin */ below: number; /** The number of pixels for top margin */ above: number; } /** * Represents information used to update a price scale. */ export interface AutoscaleInfo { /** * Price range. */ priceRange: PriceRange | null; /** * Scale margins. */ margins?: AutoScaleMargins; } /** * Represents options for how the time and price axes react to mouse double click. */ export interface AxisDoubleClickOptions { /** * Enable resetting scaling the time axis by double-clicking the left mouse button. * * @defaultValue `true` */ time: boolean; /** * Enable reseting scaling the price axis by by double-clicking the left mouse button. * * @defaultValue `true` */ price: boolean; } /** * Represents options for how the time and price axes react to mouse movements. */ export interface AxisPressedMouseMoveOptions { /** * Enable scaling the time axis by holding down the left mouse button and moving the mouse. * * @defaultValue `true` */ time: boolean; /** * Enable scaling the price axis by holding down the left mouse button and moving the mouse. * * @defaultValue `true` */ price: boolean; } /** * Structure describing a single item of data for bar series */ export interface BarData<HorzScaleItem = Time> extends OhlcData<HorzScaleItem> { /** * Optional color value for certain data item. If missed, color from options is used */ color?: string; } /** * Represents style options for a bar series. */ export interface BarStyleOptions { /** * Color of rising bars. * * @defaultValue `'#26a69a'` */ upColor: string; /** * Color of falling bars. * * @defaultValue `'#ef5350'` */ downColor: string; /** * Show open lines on bars. * * @defaultValue `true` */ openVisible: boolean; /** * Show bars as sticks. * * @defaultValue `true` */ thinBars: boolean; } /** * Represents a range of bars and the number of bars outside the range. */ export interface BarsInfo<HorzScaleItem> extends Partial<IRange<HorzScaleItem>> { /** * The number of bars before the start of the range. * Positive value means that there are some bars before (out of logical range from the left) the {@link IRange.from} logical index in the series. * Negative value means that the first series' bar is inside the passed logical range, and between the first series' bar and the {@link IRange.from} logical index are some bars. */ barsBefore: number; /** * The number of bars after the end of the range. * Positive value in the `barsAfter` field means that there are some bars after (out of logical range from the right) the {@link IRange.to} logical index in the series. * Negative value means that the last series' bar is inside the passed logical range, and between the last series' bar and the {@link IRange.to} logical index are some bars. */ barsAfter: number; } /** * Represents a type of priced base value of baseline series type. */ export interface BaseValuePrice { /** * Distinguished type value. */ type: "price"; /** * Price value. */ price: number; } /** * Structure describing a single item of data for baseline series */ export interface BaselineData<HorzScaleItem = Time> extends SingleValueData<HorzScaleItem> { /** * Optional top area top fill color value for certain data item. If missed, color from options is used */ topFillColor1?: string; /** * Optional top area bottom fill color value for certain data item. If missed, color from options is used */ topFillColor2?: string; /** * Optional top area line color value for certain data item. If missed, color from options is used */ topLineColor?: string; /** * Optional bottom area top fill color value for certain data item. If missed, color from options is used */ bottomFillColor1?: string; /** * Optional bottom area bottom fill color value for certain data item. If missed, color from options is used */ bottomFillColor2?: string; /** * Optional bottom area line color value for certain data item. If missed, color from options is used */ bottomLineColor?: string; } /** * Represents style options for a baseline series. */ export interface BaselineStyleOptions { /** * Base value of the series. * * @defaultValue `{ type: 'price', price: 0 }` */ baseValue: BaseValueType; /** * Gradient is relative to the base value and the currently visible range. * If it is false, the gradient is relative to the top and bottom of the chart. * * @defaultValue `false` */ relativeGradient: boolean; /** * The first color of the top area. * * @defaultValue `'rgba(38, 166, 154, 0.28)'` */ topFillColor1: string; /** * The second color of the top area. * * @defaultValue `'rgba(38, 166, 154, 0.05)'` */ topFillColor2: string; /** * The line color of the top area. * * @defaultValue `'rgba(38, 166, 154, 1)'` */ topLineColor: string; /** * The first color of the bottom area. * * @defaultValue `'rgba(239, 83, 80, 0.05)'` */ bottomFillColor1: string; /** * The second color of the bottom area. * * @defaultValue `'rgba(239, 83, 80, 0.28)'` */ bottomFillColor2: string; /** * The line color of the bottom area. * * @defaultValue `'rgba(239, 83, 80, 1)'` */ bottomLineColor: string; /** * Line width. * * @defaultValue `3` */ lineWidth: LineWidth; /** * Line style. * * @defaultValue {@link LineStyle.Solid} */ lineStyle: LineStyle; /** * Line type. * * @defaultValue {@link LineType.Simple} */ lineType: LineType; /** * Show series line. * * @defaultValue `true` */ lineVisible: boolean; /** * Show circle markers on each point. * * @defaultValue `false` */ pointMarkersVisible: boolean; /** * Circle markers radius in pixels. * * @defaultValue `undefined` */ pointMarkersRadius?: number; /** * Show the crosshair marker. * * @defaultValue `true` */ crosshairMarkerVisible: boolean; /** * Crosshair marker radius in pixels. * * @defaultValue `4` */ crosshairMarkerRadius: number; /** * Crosshair marker border color. An empty string falls back to the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBorderColor: string; /** * The crosshair marker background color. An empty string falls back to the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBackgroundColor: string; /** * Crosshair marker border width in pixels. * * @defaultValue `2` */ crosshairMarkerBorderWidth: number; /** * Last price animation mode. * * @defaultValue {@link LastPriceAnimationMode.Disabled} */ lastPriceAnimation: LastPriceAnimationMode; } /** * Represents a time as a day/month/year. * * @example * ```js * const day = { year: 2019, month: 6, day: 1 }; // June 1, 2019 * ``` */ export interface BusinessDay { /** * The year. */ year: number; /** * The month. */ month: number; /** * The day. */ day: number; } /** * Structure describing a single item of data for candlestick series */ export interface CandlestickData<HorzScaleItem = Time> extends OhlcData<HorzScaleItem> { /** * Optional color value for certain data item. If missed, color from options is used */ color?: string; /** * Optional border color value for certain data item. If missed, color from options is used */ borderColor?: string; /** * Optional wick color value for certain data item. If missed, color from options is used */ wickColor?: string; } /** * Represents style options for a candlestick series. */ export interface CandlestickStyleOptions { /** * Color of rising candles. * * @defaultValue `'#26a69a'` */ upColor: string; /** * Color of falling candles. * * @defaultValue `'#ef5350'` */ downColor: string; /** * Enable high and low prices candle wicks. * * @defaultValue `true` */ wickVisible: boolean; /** * Enable candle borders. * * @defaultValue `true` */ borderVisible: boolean; /** * Border color. * * @defaultValue `'#378658'` */ borderColor: string; /** * Border color of rising candles. * * @defaultValue `'#26a69a'` */ borderUpColor: string; /** * Border color of falling candles. * * @defaultValue `'#ef5350'` */ borderDownColor: string; /** * Wick color. * * @defaultValue `'#737375'` */ wickColor: string; /** * Wick color of rising candles. * * @defaultValue `'#26a69a'` */ wickUpColor: string; /** * Wick color of falling candles. * * @defaultValue `'#ef5350'` */ wickDownColor: string; } /** * Represents common chart options */ export interface ChartOptionsBase { /** * Width of the chart in pixels * * @defaultValue If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size. */ width: number; /** * Height of the chart in pixels * * @defaultValue If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size. */ height: number; /** * Setting this flag to `true` will make the chart watch the chart container's size and automatically resize the chart to fit its container whenever the size changes. * * This feature requires [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) class to be available in the global scope. * Note that calling code is responsible for providing a polyfill if required. If the global scope does not have `ResizeObserver`, a warning will appear and the flag will be ignored. * * Please pay attention that `autoSize` option and explicit sizes options `width` and `height` don't conflict with one another. * If you specify `autoSize` flag, then `width` and `height` options will be ignored unless `ResizeObserver` has failed. If it fails then the values will be used as fallback. * * The flag `autoSize` could also be set with and unset with `applyOptions` function. * ```js * const chart = LightweightCharts.createChart(document.body, { * autoSize: true, * }); * ``` */ autoSize: boolean; /** * Layout options */ layout: LayoutOptions; /** * Left price scale options */ leftPriceScale: VisiblePriceScaleOptions; /** * Right price scale options */ rightPriceScale: VisiblePriceScaleOptions; /** * Overlay price scale options */ overlayPriceScales: OverlayPriceScaleOptions; /** * Time scale options */ timeScale: HorzScaleOptions; /** * The crosshair shows the intersection of the price and time scale values at any point on the chart. * */ crosshair: CrosshairOptions; /** * A grid is represented in the chart background as a vertical and horizontal lines drawn at the levels of visible marks of price and the time scales. */ grid: GridOptions; /** * Scroll options, or a boolean flag that enables/disables scrolling */ handleScroll: HandleScrollOptions | boolean; /** * Scale options, or a boolean flag that enables/disables scaling */ handleScale: HandleScaleOptions | boolean; /** * Kinetic scroll options */ kineticScroll: KineticScrollOptions; /** @inheritDoc TrackingModeOptions */ trackingMode: TrackingModeOptions; /** * Basic localization options */ localization: LocalizationOptionsBase; /** * Whether to add a default pane to the chart * Disable this option when you want to create a chart with no panes and add them manually * @defaultValue `true` */ addDefaultPane: boolean; } /** * Structure describing options of the chart. Series options are to be set separately */ export interface ChartOptionsImpl<HorzScaleItem> extends ChartOptionsBase { /** * Localization options. */ localization: LocalizationOptions<HorzScaleItem>; } /** Structure describing a crosshair line (vertical or horizontal) */ export interface CrosshairLineOptions { /** * Crosshair line color. * * @defaultValue `'#758696'` */ color: string; /** * Crosshair line width. * * @defaultValue `1` */ width: LineWidth; /** * Crosshair line style. * * @defaultValue {@link LineStyle.LargeDashed} */ style: LineStyle; /** * Display the crosshair line. * * Note that disabling crosshair lines does not disable crosshair marker on Line and Area series. * It can be disabled by using `crosshairMarkerVisible` option of a relevant series. * * @see {@link LineStyleOptions.crosshairMarkerVisible} * @see {@link AreaStyleOptions.crosshairMarkerVisible} * @see {@link BaselineStyleOptions.crosshairMarkerVisible} * @defaultValue `true` */ visible: boolean; /** * Display the crosshair label on the relevant scale. * * @defaultValue `true` */ labelVisible: boolean; /** * Crosshair label background color. * * @defaultValue `'#4c525e'` */ labelBackgroundColor: string; } /** Structure describing crosshair options */ export interface CrosshairOptions { /** * Crosshair mode * * @defaultValue {@link CrosshairMode.Magnet} */ mode: CrosshairMode; /** * Vertical line options. */ vertLine: CrosshairLineOptions; /** * Horizontal line options. */ horzLine: CrosshairLineOptions; } /** * Renderer data for an item within the custom series. */ export interface CustomBarItemData<HorzScaleItem, TData extends CustomData<HorzScaleItem> = CustomData<HorzScaleItem>> { /** * 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; } /** * 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<HorzScaleItem = Time> extends CustomSeriesWhitespaceData<HorzScaleItem> { /** * 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; } /** * Represents a whitespace data item, which is a data point without a value. */ export interface CustomSeriesWhitespaceData<HorzScaleItem> { /** * The time of the data. */ time: HorzScaleItem; /** * Additional custom values which will be ignored by the library, but * could be used by plugins. */ customValues?: Record<string, unknown>; } /** * Represents style options for a custom series. */ export interface CustomStyleOptions { /** * Color used for the price line and price scale label. */ color: string; } /** Grid line options. */ export interface GridLineOptions { /** * Line color. * * @defaultValue `'#D6DCDE'` */ color: string; /** * Line style. * * @defaultValue {@link LineStyle.Solid} */ style: LineStyle; /** * Display the lines. * * @defaultValue `true` */ visible: boolean; } /** Structure describing grid options. */ export interface GridOptions { /** * Vertical grid line options. */ vertLines: GridLineOptions; /** * Horizontal grid line options. */ horzLines: GridLineOptions; } /** * Represents options for how the chart is scaled by the mouse and touch gestures. */ export interface HandleScaleOptions { /** * Enable scaling with the mouse wheel. * * @defaultValue `true` */ mouseWheel: boolean; /** * Enable scaling with pinch/zoom gestures. * * @defaultValue `true` */ pinch: boolean; /** * Enable scaling the price and/or time scales by holding down the left mouse button and moving the mouse. */ axisPressedMouseMove: AxisPressedMouseMoveOptions | boolean; /** * Enable resetting scaling by double-clicking the left mouse button. */ axisDoubleClickReset: AxisDoubleClickOptions | boolean; } /** * Represents options for how the chart is scrolled by the mouse and touch gestures. */ export interface HandleScrollOptions { /** * Enable scrolling with the mouse wheel. * * @defaultValue `true` */ mouseWheel: boolean; /** * Enable scrolling by holding down the left mouse button and moving the mouse. * * @defaultValue `true` */ pressedMouseMove: boolean; /** * Enable horizontal touch scrolling. * * When enabled the chart handles touch gestures that would normally scroll the webpage horizontally. * * @defaultValue `true` */ horzTouchDrag: boolean; /** * Enable vertical touch scrolling. * * When enabled the chart handles touch gestures that would normally scroll the webpage vertically. * * @defaultValue `true` */ vertTouchDrag: boolean; } /** * Structure describing a single item of data for histogram series */ export interface HistogramData<HorzScaleItem = Time> extends SingleValueData<HorzScaleItem> { /** * Optional color value for certain data item. If missed, color from options is used */ color?: string; } /** * Represents style options for a histogram series. */ export interface HistogramStyleOptions { /** * Column color. * * @defaultValue `'#26a69a'` */ color: string; /** * Initial level of histogram columns. * * @defaultValue `0` */ base: number; } /** * Options for the time scale; the horizontal scale at the bottom of the chart that displays the time of data. */ export interface HorzScaleOptions { /** * The margin space in bars from the right side of the chart. * * @defaultValue `0` */ rightOffset: number; /** * The space between bars in pixels. * * @defaultValue `6` */ barSpacing: number; /** * The minimum space between bars in pixels. * * @defaultValue `0.5` */ minBarSpacing: number; /** * The maximum space between bars in pixels. * * Has no effect if value is set to `0`. * * @defaultValue `0` */ maxBarSpacing: number; /** * Prevent scrolling to the left of the first bar. * * @defaultValue `false` */ fixLeftEdge: boolean; /** * Prevent scrolling to the right of the most recent bar. * * @defaultValue `false` */ fixRightEdge: boolean; /** * Prevent changing the visible time range during chart resizing. * * @defaultValue `false` */ lockVisibleTimeRangeOnResize: boolean; /** * Prevent the hovered bar from moving when scrolling. * * @defaultValue `false` */ rightBarStaysOnScroll: boolean; /** * Show the time scale border. * * @defaultValue `true` */ borderVisible: boolean; /** * The time scale border color. * * @defaultValue `'#2B2B43'` */ borderColor: string; /** * Show the time scale. * * @defaultValue `true` */ visible: boolean; /** * Show the time, not just the date, in the time scale and vertical crosshair label. * * @defaultValue `false` */ timeVisible: boolean; /** * Show seconds in the time scale and vertical crosshair label in `hh:mm:ss` format for intraday data. * * @defaultValue `true` */ secondsVisible: boolean; /** * Shift the visible range to the right (into the future) by the number of new bars when new data is added. * * Note that this only applies when the last bar is visible. * * @defaultValue `true` */ shiftVisibleRangeOnNewBar: boolean; /** * Allow the visible range to be shifted to the right when a new bar is added which * is replacing an existing whitespace time point on the chart. * * Note that this only applies when the last bar is visible & `shiftVisibleRangeOnNewBar` is enabled. * * @defaultValue `false` */ allowShiftVisibleRangeOnWhitespaceReplacement: boolean; /** * Draw small vertical line on time axis labels. * * @defaultValue `false` */ ticksVisible: boolean; /** * Maximum tick mark label length. Used to override the default 8 character maximum length. * * @defaultValue `undefined` */ tickMarkMaxCharacterLength?: number; /** * Changes horizontal scale marks generation. * With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all. */ uniformDistribution: boolean; /** * Define a minimum height for the time scale. * Note: This value will be exceeded if the * time scale needs more space to display it's contents. * * Setting a minimum height could be useful for ensuring that * multiple charts positioned in a horizontal stack each have * an identical time scale height, or for plugins which * require a bit more space within the time scale pane. * * @defaultValue 0 */ minimumHeight: number; /** * Allow major time scale labels to be rendered in a bolder font weight. * * @defaultValue true */ allowBoldLabels: boolean; /** * Ignore time scale points containing only whitespace (for all series) when * drawing grid lines, tick marks, and snapping the crosshair to time scale points. * * For the yield curve chart type it defaults to `true`. * * @defaultValue false */ ignoreWhitespaceIndices: boolean; } /** * The main interface of a single chart using time for horizontal scale. */ export interface IChartApi extends IChartApiBase<Time> { /** * Applies new options to the chart * * @param options - Any subset of options. */ applyOptions(options: DeepPartial<ChartOptions>): void; } /** * The main interface of a single chart. */ export interface IChartApiBase<HorzScaleItem = Time> { /** * Removes the chart object including all DOM elements. This is an irreversible operation, you cannot do anything with the chart after removing it. */ remove(): void; /** * Sets fixed size of the chart. By default chart takes up 100% of its container. * * If chart has the `autoSize` option enabled, and the ResizeObserver is available then * the width and height values will be ignored. * * @param width - Target width of the chart. * @param height - Target height of the chart. * @param forceRepaint - True to initiate resize immediately. One could need this to get screenshot immediately after resize. */ 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<HorzScaleItem>, TOptions extends CustomSeriesOptions, TPartialOptions extends SeriesPartialOptions<TOptions> = SeriesPartialOptions<TOptions>>(customPaneView: ICustomSeriesPaneView<HorzScaleItem, TData, TOptions>, customOptions?: SeriesPartialOptions<TOptions>, paneIndex?: number): ISeriesApi<"Custom", HorzScaleItem, TData | WhitespaceData<HorzScaleItem>, TOptions, TPartialOptions>; /** * Creates a series with specified parameters. * * @param definition - A series definition. * @param options - Customization parameters of the series being created. * @param paneIndex - An index of the pane where the series should be created. * ```js * const series = chart.addSeries(LineSeries, { lineWidth: 2 }); * ``` */ addSeries<T extends SeriesType>(definition: SeriesDefinition<T>, options?: SeriesPartialOptionsMap[T], paneIndex?: number): ISeriesApi<T, HorzScaleItem>; /** * Removes a series of any type. This is an irreversible operation, you cannot do anything with the series after removing it. * * @example * ```js * chart.removeSeries(series); * ``` */ removeSeries(seriesApi: ISeriesApi<SeriesType, HorzScaleItem>): void; /** * Subscribe to the chart click event. * * @param handler - Handler to be called on mouse click. * @example * ```js * function myClickHandler(param) { * if (!param.point) { * return; * } * * console.log(`Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`); * } * * chart.subscribeClick(myClickHandler); * ``` */ subscribeClick(handler: MouseEventHandler<HorzScaleItem>): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeClick}. * * @param handler - Previously subscribed handler * @example * ```js * chart.unsubscribeClick(myClickHandler); * ``` */ unsubscribeClick(handler: MouseEventHandler<HorzScaleItem>): void; /** * Subscribe to the chart double-click event. * * @param handler - Handler to be called on mouse double-click. * @example * ```js * function myDblClickHandler(param) { * if (!param.point) { * return; * } * * console.log(`Double Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`); * } * * chart.subscribeDblClick(myDblClickHandler); * ``` */ subscribeDblClick(handler: MouseEventHandler<HorzScaleItem>): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeDblClick}. * * @param handler - Previously subscribed handler * @example * ```js * chart.unsubscribeDblClick(myDblClickHandler); * ``` */ unsubscribeDblClick(handler: MouseEventHandler<HorzScaleItem>): void; /** * Subscribe to the crosshair move event. * * @param handler - Handler to be called on crosshair move. * @example * ```js * function myCrosshairMoveHandler(param) { * if (!param.point) { * return; * } * * console.log(`Crosshair moved to ${param.point.x}, ${param.point.y}. The time is ${param.time}.`); * } * * chart.subscribeCrosshairMove(myCrosshairMoveHandler); * ``` */ subscribeCrosshairMove(handler: MouseEventHandler<HorzScaleItem>): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeCrosshairMove}. * * @param handler - Previously subscribed handler * @example * ```js * chart.unsubscribeCrosshairMove(myCrosshairMoveHandler); * ``` */ unsubscribeCrosshairMove(handler: MouseEventHandler<HorzScaleItem>): void; /** * Returns API to manipulate a price scale. * * @param priceScaleId - ID of the price scale. * @param paneIndex - Index of the pane (default: 0) * @returns Price scale API. */ priceScale(priceScaleId: string, paneIndex?: number): IPriceScaleApi; /** * Returns API to manipulate the time scale * * @returns Target API */ timeScale(): ITimeScaleApi<HorzScaleItem>; /** * Applies new options to the chart * * @param options - Any subset of options. */ applyOptions(options: DeepPartial<ChartOptionsImpl<HorzScaleItem>>): void; /** * Returns currently applied options * * @returns Full set of currently applied options, including defaults */ options(): Readonly<ChartOptionsImpl<HorzScaleItem>>; /** * Make a screenshot of the chart with all the elements excluding crosshair. * * @returns A canvas with the chart drawn on. Any `Canvas` methods like `toDataURL()` or `toBlob()` can be used to serialize the result. */ takeScreenshot(): HTMLCanvasElement; /** * Add a pane to the chart * @param preserveEmptyPane - Whether to preserve the empty pane * @returns The pane API */ addPane(preserveEmptyPane?: boolean): IPaneApi<HorzScaleItem>; /** * Returns array of panes' API * * @returns array of pane's Api */ panes(): IPaneApi<HorzScaleItem>[]; /** * Removes a pane with index * * @param index - the pane to be removed */ removePane(index: number): void; /** * swap the position of two panes. * * @param first - the first index * @param second - the second index */ swapPanes(first: number, second: number): void; /** * Returns the active state of the `autoSize` option. This can be used to check * whether the chart is handling resizing automatically with a `ResizeObserver`. * * @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; /** * Set the crosshair position within the chart. * * Usually the crosshair position is set automatically by the user's actions. However in some cases you may want to set it explicitly. * * For example if you want to synchronise the crosshairs of two separate charts. * * @param price - The price (vertical coordinate) of the new crosshair position. * @param horizontalPosition - The horizontal coordinate (time by default) of the new crosshair position. */ setCrosshairPosition(price: number, horizontalPosition: HorzScaleItem, seriesApi: ISeriesApi<SeriesType, HorzScaleItem>): void; /** * Clear the crosshair position within the chart. */ clearCrosshairPosition(): void; /** * Returns the dimensions of the chart pane (the plot surface which excludes time and price scales). * This would typically only be useful for plugin development. * * @param paneIndex - The index of the pane * @defaultValue `0` * @returns Dimensions of the chart pane */ paneSize(paneIndex?: number): PaneSize; /** * Returns the horizontal scale behaviour. */ horzBehaviour(): IHorzScaleBehavior<HorzScaleItem>; } /** * 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; } /** * This interface represents the view for the custom series */ export interface ICustomSeriesPaneView<HorzScaleItem = Time, TData extends CustomData<HorzScaleItem> = CustomData<HorzScaleItem>, 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<HorzScaleItem, 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<HorzScaleItem>): data is CustomSeriesWhitespaceData<HorzScaleItem>; /** * 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; } /** * Class interface for Horizontal scale behavior */ export interface IHorzScaleBehavior<HorzScaleItem> { /** * Structure describing options of the chart. * * @returns ChartOptionsBase */ options(): ChartOptionsImpl<HorzScaleItem>; /** * Set the chart options. Note that this is different to `applyOptions` since the provided options will overwrite the current options * instead of merging with the current options. * * @param options - Chart options to be set * @returns void */ setOptions(options: ChartOptionsImpl<HorzScaleItem>): void; /** * Method to preprocess the data. * * @param data - Data items for the series * @returns void */ preprocessData(data: DataItem<HorzScaleItem> | DataItem<HorzScaleItem>[]): void; /** * Convert horizontal scale item into an internal horizontal scale item. * * @param item - item to be converted * @returns InternalHorzScaleItem */ convertHorzItemToInternal(item: HorzScaleItem): InternalHorzScaleItem; /** * Creates and returns a converter for changing series data into internal horizontal scale items. * * @param data - series data * @returns HorzScaleItemConverterToInternalObj */ createConverterToInternalObj(data: SeriesDataItemTypeMap<HorzScaleItem>[SeriesType][]): HorzScaleItemConverterToInternalObj<HorzScaleItem>; /** * Returns the key for the specified horizontal scale item. * * @param internalItem - horizontal scale item for which the key should be returned * @returns InternalHorzScaleItemKey */ key(internalItem: InternalHorzScaleItem | HorzScaleItem): InternalHorzScaleItemKey; /** * Returns the cache key for the specified horizontal scale item. * * @param internalItem - horizontal scale item for which the cache key should be returned * @returns number */ cacheKey(internalItem: InternalHorzScaleItem): number; /** * Update the formatter with the localization options. * * @param options - Localization options * @returns void */ updateFormatter(options: LocalizationOptions<HorzScaleItem>): void; /** * Format the horizontal scale item into a display string. * * @param item - horizontal scale item to be formatted as a string * @returns string */ formatHorzItem(item: InternalHorzScaleItem): string; /** * Format the horizontal scale tickmark into a display string. * * @param item - tickmark item * @param localizationOptions