UNPKG

lightweight-charts

Version:

Performant financial charts built with HTML5 canvas

1,870 lines (1,869 loc) 75.2 kB
// Generated by dts-bundle-generator v7.2.0 /** * 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 } /** * 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 dottled 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 main entry point of the Lightweight Charting Library. * * @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; /** * 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 extends SingleValueData { /** * 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 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 the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBorderColor: string; /** * The crosshair marker background color. An empty string falls back to the 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 extends OhlcData { /** * 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 extends Partial<Range<Time>> { /** * 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 extends SingleValueData { /** * 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 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 the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBorderColor: string; /** * The crosshair marker background color. An empty string falls back to the 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 extends OhlcData { /** * 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; } /** * Structure describing options of the chart. Series options are to be set separately */ export interface ChartOptions { /** * 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: TimeScaleOptions; /** * 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; /** * Localization options. */ localization: LocalizationOptions; /** * 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; } /** 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; } /** 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 extends SingleValueData { /** * 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; } /** * The main interface of a single chart. */ export interface IChartApi { /** * 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 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">; /** * 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">; /** * 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">; /** * 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">; /** * 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">; /** * 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">; /** * 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>): 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): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeClick}. * * @param handler - Previously subscribed handler * @example * ```js * chart.unsubscribeClick(myClickHandler); * ``` */ unsubscribeClick(handler: MouseEventHandler): 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): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeCrosshairMove}. * * @param handler - Previously subscribed handler * @example * ```js * chart.unsubscribeCrosshairMove(myCrosshairMoveHandler); * ``` */ unsubscribeCrosshairMove(handler: MouseEventHandler): 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; /** * Applies new options to the chart * * @param options - Any subset of options. */ applyOptions(options: DeepPartial<ChartOptions>): void; /** * Returns currently applied options * * @returns Full set of currently applied options, including defaults */ options(): Readonly<ChartOptions>; /** * 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; } /** 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> { /** * 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 | 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: SeriesPartialOptionsMap[TSeriesType]): void; /** * Returns currently applied options * * @returns Full set of currently applied options, including defaults */ options(): Readonly<SeriesOptionsMap[TSeriesType]>; /** * 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: '2018-12-13', value: 31.74 }, * ]); * ``` * @example Setting data to a bars (or candlestick) series * ```js * barSeries.setData([ * { time: '2018-12-19', open: 141.77, high: 170.39, low: 120.25, close: 145.72 }, * { time: '2018-12-20', open: 145.72, high: 147.99, low: 100.11, close: 108.19 }, * ]); * ``` */ setData(data: SeriesDataItemTypeMap[TSeriesType][]): void; /** * Adds new data item to the existing set (or updates the latest item if times of the passed/latest items are equal). * * @param bar - A single data item to be added. Time of the new item must be greater or equal to the latest existing time point. * If the new item's time is equal to the last existing item's time, then the existing item is replaced with the new one. * @example Updating line series data * ```js * lineSeries.update({ * time: '2018-12-12', * value: 24.11, * }); * ``` * @example Updating bar (or candlestick) series data * ```js * barSeries.update({ * time: '2018-12-19', * open: 141.77, * high: 170.39, * low: 120.25, * close: 145.72, * }); * ``` */ update(bar: SeriesDataItemTypeMap[TSeriesType]): void; /** * Returns a bar data by provided logical index. * * @param logicalIndex - Logical index * @param mismatchDirection - Search direction if no data found at provided logical index. * @returns Original data item provided via setData or update methods. * @example * ```js * const originalData = series.dataByIndex(10, LightweightCharts.MismatchDirection.NearestLeft); * ``` */ dataByIndex(logicalIndex: number, mismatchDirection?: MismatchDirection): SeriesDataItemTypeMap[TSeriesType] | null; /** * Allows to set/replace all existing series markers with new ones. * * @param data - An array of series markers. This array should be sorted by time. Several markers with same time are allowed. * @example * ```js * series.setMarkers([ * { * time: '2019-04-09', * position: 'aboveBar', * color: 'black', * shape: 'arrowDown', * }, * { * time: '2019-05-31', * position: 'belowBar', * color: 'red', * shape: 'arrowUp', * id: 'id3', * }, * { * time: '2019-05-31', * position: 'belowBar', * color: 'orange', * shape: 'arrowUp', * id: 'id4', * text: 'example', * size: 2, * }, * ]); * * chart.subscribeCrosshairMove(param => { * console.log(param.hoveredObjectId); * }); * * chart.subscribeClick(param => { * console.log(param.hoveredObjectId); * }); * ``` */ setMarkers(data: SeriesMarker<Time>[]): void; /** * Returns an array of series markers. */ markers(): SeriesMarker<Time>[]; /** * Creates a new price line * * @param options - Any subset of options, however `price` is required. * @example * ```js * const priceLine = series.createPriceLine({ * price: 80.0, * color: 'green', * lineWidth: 2, * lineStyle: LightweightCharts.LineStyle.Dotted, * axisLabelVisible: true, * title: 'P/L 500', * }); * ``` */ createPriceLine(options: CreatePriceLineOptions): IPriceLine; /** * Removes the price line that was created before. * * @param line - A line to remove. * @example * ```js * const priceLine = series.createPriceLine({ price: 80.0 }); * series.removePriceLine(priceLine); * ``` */ removePriceLine(line: IPriceLine): void; /** * Return current series type. * * @returns Type of the series. * @example * ```js * const lineSeries = chart.addLineSeries(); * console.log(lineSeries.seriesType()); // "Line" * * const candlestickSeries = chart.addCandlestickSeries(); * console.log(candlestickSeries.seriesType()); // "Candlestick" * ``` */ seriesType(): TSeriesType; } /** Interface to chart time scale */ export interface ITimeScaleApi { /** * Return the distance from the right edge of the time scale to the lastest bar of the series measured in bars. */ scrollPosition(): number; /** * Scrolls the chart to the specified position. * * @param position - Target data position * @param animated - Setting this to true makes the chart scrolling smooth and adds animation */ scrollToPosition(position: number, animated: boolean): void; /** * Restores default scroll position of the chart. This process is always animated. */ scrollToRealTime(): void; /** * Returns current visible time range of the chart. * * Note that this method cannot extrapolate time and will use the only currently existent data. * To get complete information about current visible range, please use {@link getVisibleLogicalRange} and {@link ISeriesApi.barsInLogicalRange}. * * @returns Visible range or null if the chart has no data at all. */ getVisibleRange(): TimeRange | null; /** * Sets visible range of data. * * Note that this method cannot extrapolate time and will use the only currently existent data. * Thus, for example, if currently a chart doesn't have data prior `2018-01-01` date and you set visible range with `from` date `2016-01-01`, it will be automatically adjusted to `2018-01-01` (and the same for `to` date). * * But if you can approximate indexes on your own - you could use {@link setVisibleLogicalRange} instead. * * @param range - Target visible range of data. * @example * ```js * chart.timeScale().setVisibleRange({ * from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000, * to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000, * }); * ``` */ setVisibleRange(range: TimeRange): void; /** * Returns the current visible [logical range](/time-scale.md#logical-range) of the chart as an object with the first and last time points of the logical range, or returns `null` if the chart has no data. * * @returns Visible range or null if the chart has no data at all. */ getVisibleLogicalRange(): LogicalRange | null; /** * Sets visible [logical range](/time-scale.md#logical-range) of data. * * @param range - Target visible logical range of data. * @example * ```js * chart.timeScale().setVisibleLogicalRange({ from: 0, to: Date.now() / 1000 }); * ``` */ setVisibleLogicalRange(range: Range<number>): void; /** * Restores default zoom level and scroll position of the time scale. */ resetTimeScale(): void; /** * Automatically calculates the visible range to fit all data from all series. */ fitContent(): void; /** * Converts a logical index to local x coordinate. * * @param logical - Logical index needs to be converted * @returns x coordinate of that time or `null` if the chart doesn't have data */ logicalToCoordinate(logical: Logical): Coordinate | null; /** * Converts a coordinate to logical index. * * @param x - Coordinate needs to be converted * @returns Logical index that is located on that coordinate or `null` if the chart doesn't have data */ coordinateToLogical(x: number): Logical | null; /** * Converts a time to local x coordinate. * * @param time - Time needs to be converted * @returns X coordinate of that time or `null` if no time found on time scale */ timeToCoordinate(time: Time): Coordinate | null; /** * Converts a coordinate to time. * * @param x - Coordinate needs to be converted. * @returns Time of a bar that is located on that coordinate or `null` if there are no bars found on that coordinate. */ coordinateToTime(x: number): Time | null; /** * Returns a width of the time scale. */ width(): number; /** * Returns a height of the time scale. */ height(): number; /** * Subscribe to the visible time range change events. * * The argument passed to the handler function is an object with `from` and `to` properties of type {@link Time}, or `null` if there is no visible data. * * @param handler - Handler (function) to be called when the visible indexes change. * @example * ```js * function myVisibleTimeRangeChangeHandler(newVisibleTimeRange) { * if (newVisibleTimeRange === null) { * // handle null * } * * // handle new logical range * } * * chart.timeScale().subscribeVisibleTimeRangeChange(myVisibleTimeRangeChangeHandler); * ``` */ subscribeVisibleTimeRangeChange(handler: TimeRangeChangeEventHandler): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeVisibleTimeRangeChange}. * * @param handler - Previously subscribed handler * @example * ```js * chart.timeScale().unsubscribeVisibleTimeRangeChange(myVisibleTimeRangeChangeHandler); * ``` */ unsubscribeVisibleTimeRangeChange(handler: TimeRangeChangeEventHandler): void; /** * Subscribe to the visible logical range change events. * * The argument passed to the handler function is an object with `from` and `to` properties of type `number`, or `null` if there is no visible data. * * @param handler - Handler (function) to be called when the visible indexes change. * @example * ```js * function myVisibleLogicalRangeChangeHandler(newVisibleLogicalRange) { * if (newVisibleLogicalRange === null) { * // handle null * } * * // handle new logical range * } * * chart.timeScale().subscribeVisibleLogicalRangeChange(myVisibleLogicalRangeChangeHandler); * ``` */ subscribeVisibleLogicalRangeChange(handler: LogicalRangeChangeEventHandler): void; /** * Unsubscribe a handler that was previously subscribed using {@link subscribeVisibleLogicalRangeChange}. * * @param handler - Previously subscribed handler * @example * ```js * chart.timeScale().unsubscribeVisibleLogicalRangeChange(myVisibleLogicalRangeChangeHandler); * ``` */ unsubscribeVisibleLogicalRangeChange(handler: LogicalRangeChangeEventHandler): void; /** * Adds a subscription to time scale size changes * * @param handler - Handler (function) to be called when the time scale size changes */ subscribeSizeChange(handler: SizeChangeEventHandler): void; /** * Removes a subscription to time scale size changes * * @param handler - Previously subscribed handler */ unsubscribeSizeChange(handler: SizeChangeEventHandler): void; /** * Applies new options to the time scale. * * @param options - Any subset of options. */ applyOptions(options: DeepPartial<TimeScaleOptions>): void; /** * Returns current options * * @returns Currently applied options */ options(): Readonly<TimeScaleOptions>; } /** * Represents options for enabling or disabling kinetic scrolling with mouse and touch gestures. */ export interface KineticScrollOptions { /** * Enable kinetic scroll with touch gestures. * * @defaultValue `true` */ touch: boolean; /** * Enable kinetic scroll with the mouse. * * @defaultValue `false` */ mouse: boolean; } /** Represents layout options */ export interface LayoutOptions { /** * Chart and scales background color. * * @defaultValue `{ type: ColorType.Solid, color: '#FFFFFF' }` */ background: Background; /** * Color of text on the scales. * * @defaultValue `'#191919'` */ textColor: string; /** * Font size of text on scales in pixels. * * @defaultValue `11` */ fontSize: number; /** * Font family of text on the scales. * * @defaultValue `-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif` */ fontFamily: string; } /** * Structure describing a single item of data for line series */ export interface LineData extends SingleValueData { /** * Optional color value for certain data item. If missed, color from options is used */ color?: string; } /** * Represents style options for a line series. */ export interface LineStyleOptions { /** * Line color. * * @defaultValue `'#2196f3'` */ color: 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 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 the color of the series under the crosshair. * * @defaultValue `''` */ crosshairMarkerBorderColor: string; /** * The crosshair marker background color. An empty string falls back to the 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 options for formatting dates, times, and prices according to a locale. */ export interface LocalizationOptions { /** * Current locale used to format dates. Uses the browser's language settings by default. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation * @defaultValue `navigator.language` */ locale: string; /** * Override formatting of the price scale crosshair label. Can be used for cases that can't be covered with built-in price formats. * * @see {@link PriceFormatCustom} * @defaultValue `undefined` */ priceFormatter?: PriceFormatterFn; /** * Override formatting of the time scale crosshair label. * * @defaultValue `undefined` */ timeFormatter?: TimeFormatterFn; /** * Date formatting string. * * Can contain `yyyy`, `yy`, `MMMM`, `MMM`, `MM` and `dd` literals which will be replaced with corresponding date's value. * * Ignored if {@link timeFormatter} has been specified. * * @defaultValue `'dd MMM \'yy'` */ dateFormat: string; } /** * Represents a mouse event. */ export interface MouseEventParams { /** * Time of the data at the location of the mouse event. * * The value will be `undefined` if the location of the event in the chart is outside the range of available data. */ time?: Time; /** * Logical index */ logical?: Logical; /** * Location of the event in the chart. * * The value will be `undefined` if the event is fired outside the chart, for example a mouse leave event. */ point?: Point; /** * Data of all series at the location of the event in the chart. * * Keys of the map are {@link ISeriesApi} instances. Values are prices. * Values of the map are original data items */ seriesData: Map<ISeriesApi<SeriesType>, BarData | LineData | HistogramData>; /** * The {@link ISeriesApi} for the series at the point of the mouse event. */ hoveredSeries?: ISeriesApi<SeriesType>; /** * The ID of the object at the point of the mouse event. */ hoveredObjectId?: unknown; /** * The underlying source mouse or touch event data, if available */ sourceEvent?: TouchMouseEventData; } /** * Represents a bar with a {@link Time} and open, high, low, and close prices. */ export interface OhlcData { /** * The bar time. */ time: Time; /** * The open price. */ open: number; /** * The high price. */ high: number; /** * The low price. */ low: number; /** * The close price. */ close: number; } /** * Represents a point on the chart. */ export interface Point { /** * The x coordinate. */ readonly x: Coordinate; /** * The y coordinate. */ readonly y: Coordinate; } /** * Represents series value formatting options. * The precision and minMove properties allow wide customization of formatting. * * @example * `minMove=0.01`, `precision` is not specified - prices will change like 1.13, 1.14, 1.15 etc. * @example * `minMove=0.01`, `precision=3` - prices will change like 1.130, 1.140, 1.150 etc. * @example * `minMove=0.05`, `precision` is not specified - prices will change like 1.10, 1.15, 1.20 etc. */ export interface PriceFormatBuiltIn { /** * Built-in price formats: * - `'price'` is the most common choice; it allows customization of precision and rounding of prices. * - `'volume'` uses abbreviation for formatting prices like `1.2K` or `12.67M`. * - `'percent'` uses `%` sign at the end of prices. */ type: "price" | "volume" | "percent"; /** * Number of digits after the decimal point. * If it is not set, then its value is calculated automatically based on minMove. * * @defaultValue `2` if both {@link minMove} and {@link precision} are not provided, calculated automatically based on {@link minMove} otherwise. */ precision: number; /** * The minimum possible step size for price value movement. This value shouldn't have more decimal digits than the precision. * * @defaultValue `0.01` */ minMove: number; } /** * Represents series value formatting options. */ export interface PriceFormatCustom { /** * The custom price format. */ type: "custom"; /** * Override price formatting behaviour. Can be used for cases that can't be covered with built-in price formats. */ formatter: PriceFormatterFn; /** * The minimum possible step size for price value movement. * * @defaultValue `0.01` */ minMove: number; } /** * Represents a price line options. */ export interface PriceLineOptions { /** * The optional ID of this price line. */ id?: string; /** * Price line's value. * * @defau