UNPKG

lightweight-charts

Version:

Performant financial charts built with HTML5 canvas

1,753 lines (1,751 loc) 110 kB
// Generated by dts-bundle-generator v8.0.1 import { CanvasRenderingTarget2D } from 'fancy-canvas'; export declare const customSeriesDefaultOptions: CustomSeriesOptions; /** * 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 } /** * 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>; /** * 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; /** * 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; /** * 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<Range<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 Range.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 Range.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 Range.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 Range.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; /** * 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; /** * Watermark options. * * A watermark is a background label that includes a brief description of the drawn data. Any text can be added to it. * * Please make sure you enable it and set an appropriate font color and size to make your watermark visible in the background of the chart. * We recommend a semi-transparent color and a large font. Also note that watermark position can be aligned vertically and horizontally. */ watermark: WatermarkOptions; /** * 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; } /** * 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; /** * 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; } /** * 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>): ISeriesApi<"Custom", HorzScaleItem, TData | WhitespaceData<HorzScaleItem>, TOptions, TPartialOptions>; /** * Creates an area series with specified parameters. * * @param areaOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addAreaSeries(); * ``` */ addAreaSeries(areaOptions?: AreaSeriesPartialOptions): ISeriesApi<"Area", HorzScaleItem>; /** * Creates a baseline series with specified parameters. * * @param baselineOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addBaselineSeries(); * ``` */ addBaselineSeries(baselineOptions?: BaselineSeriesPartialOptions): ISeriesApi<"Baseline", HorzScaleItem>; /** * Creates a bar series with specified parameters. * * @param barOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addBarSeries(); * ``` */ addBarSeries(barOptions?: BarSeriesPartialOptions): ISeriesApi<"Bar", HorzScaleItem>; /** * Creates a candlestick series with specified parameters. * * @param candlestickOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addCandlestickSeries(); * ``` */ addCandlestickSeries(candlestickOptions?: CandlestickSeriesPartialOptions): ISeriesApi<"Candlestick", HorzScaleItem>; /** * Creates a histogram series with specified parameters. * * @param histogramOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addHistogramSeries(); * ``` */ addHistogramSeries(histogramOptions?: HistogramSeriesPartialOptions): ISeriesApi<"Histogram", HorzScaleItem>; /** * Creates a line series with specified parameters. * * @param lineOptions - Customization parameters of the series being created. * @returns An interface of the created series. * @example * ```js * const series = chart.addLineSeries(); * ``` */ addLineSeries(lineOptions?: LineSeriesPartialOptions): ISeriesApi<"Line", 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. * @returns Price scale API. */ priceScale(priceScaleId: string): 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; /** * 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. * * @returns Dimensions of the chart pane */ paneSize(): PaneSize; } /** * 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 - Localization options * @returns string */ formatTickmark(item: TickMark, localizationOptions: LocalizationOptions<HorzScaleItem>): string; /** * Returns the maximum tickmark weight value for the specified tickmarks on the time scale. * * @param marks - Timescale tick marks * @returns TickMarkWeightValue */ maxTickMarkWeight(marks: TimeMark[]): TickMarkWeightValue; /** * Fill the weights for the sorted time scale points. * * @param sortedTimePoints - sorted time scale points * @param startIndex - starting index * @returns void */ fillWeightsForPoints(sortedTimePoints: readonly Mutable<TimeScalePoint>[], startIndex: number): void; /** * If returns true, then the tick mark formatter will be called for all the visible * tick marks even if the formatter has previously been called for a specific tick mark. * This allows you to change the formatting on all the tick marks. * * @param tickMarks - array of tick marks * @returns boolean */ shouldResetTickmarkLabels?(tickMarks: readonly TickMark[]): boolean; } /** Interface to be implemented by the object in order to be used as a price formatter */ export interface IPriceFormatter { /** * Formatting function * * @param price - Original price to be formatted * @returns Formatted price */ format(price: number): string; } /** * Represents the interface for interacting with price lines. */ export interface IPriceLine { /** * Apply options to the price line. * * @param options - Any subset of options. * @example * ```js * priceLine.applyOptions({ * price: 90.0, * color: 'red', * lineWidth: 3, * lineStyle: LightweightCharts.LineStyle.Dashed, * axisLabelVisible: false, * title: 'P/L 600', * }); * ``` */ applyOptions(options: Partial<PriceLineOptions>): void; /** * Get the currently applied options. */ options(): Readonly<PriceLineOptions>; } /** Interface to control chart's price scale */ export interface IPriceScaleApi { /** * Applies new options to the price scale * * @param options - Any subset of options. */ applyOptions(options: DeepPartial<PriceScaleOptions>): void; /** * Returns currently applied options of the price scale * * @returns Full set of currently applied options, including defaults */ options(): Readonly<PriceScaleOptions>; /** * Returns a width of the price scale if it's visible or 0 if invisible. */ width(): number; } /** * Represents the interface for interacting with series. */ export interface ISeriesApi<TSeriesType extends SeriesType, HorzScaleItem = Time, TData = SeriesDataItemTypeMap<HorzScaleItem>[TSeriesType], TOptions = SeriesOptionsMap[TSeriesType], TPartialOptions = SeriesPartialOptionsMap[TSeriesType]> { /** * Returns current price formatter * * @returns Interface to the price formatter object that can be used to format prices in the same way as the chart does */ priceFormatter(): IPriceFormatter; /** * Converts specified series price to pixel coordinate according to the series price scale * * @param price - Input price to be converted * @returns Pixel coordinate of the price level on the chart */ priceToCoordinate(price: number): Coordinate | null; /** * Converts specified coordinate to price value according to the series price scale * * @param coordinate - Input coordinate to be converted * @returns Price value of the coordinate on the chart */ coordinateToPrice(coordinate: number): BarPrice | null; /** * Returns bars information for the series in the provided [logical range](/time-scale.md#logical-range) or `null`, if no series data has been found in the requested range. * This method can be used, for instance, to implement downloading historical data while scrolling to prevent a user from seeing empty space. * * @param range - The [logical range](/time-scale.md#logical-range) to retrieve info for. * @returns The bars info for the given logical range. * @example Getting bars info for current visible range * ```js * const barsInfo = series.barsInLogicalRange(chart.timeScale().getVisibleLogicalRange()); * console.log(barsInfo); * ``` * @example Implementing downloading historical data while scrolling * ```js * function onVisibleLogicalRangeChanged(newVisibleLogicalRange) { * const barsInfo = series.barsInLogicalRange(newVisibleLogicalRange); * // if there less than 50 bars to the left of the visible area * if (barsInfo !== null && barsInfo.barsBefore < 50) { * // try to load additional historical data and prepend it to the series data * } * } * * chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged); * ``` */ barsInLogicalRange(range: Range<number>): BarsInfo<HorzScaleItem> | null; /** * Applies new options to the existing series * You can set options initially when you create series or use the `applyOptions` method of the series to change the existing options. * Note that you can only pass options you want to change. * * @param options - Any subset of options. */ applyOptions(options: TPartialOptions): void; /** * Returns currently applied options * * @returns Full set of currently applied options, including defaults */ options(): Readonly<TOptions>; /** * Returns interface of the price scale the series is currently attached * * @returns IPriceScaleApi object to control the price scale */ priceScale(): IPriceScaleApi; /** * Sets or replaces series data. * * @param data - Ordered (earlier time point goes first) array of data items. Old data is fully replaced with the new one. * @example Setting data to a line series * ```js * lineSeries.setData([ * { time: '2018-12-12', value: 24.11 }, * { time: '20