@pipsend/charts
Version:
Advanced financial charting library with built-in technical indicators - Simple, powerful, and framework-agnostic
1,798 lines (1,796 loc) • 156 kB
TypeScript
// Generated by dts-bundle-generator v9.5.1
import { CanvasRenderingTarget2D } from 'fancy-canvas';
declare const areaSeries: SeriesDefinition<"Area">;
declare const barSeries: SeriesDefinition<"Bar">;
declare const baselineSeries: SeriesDefinition<"Baseline">;
declare const candlestickSeries: SeriesDefinition<"Candlestick">;
declare const histogramSeries: SeriesDefinition<"Histogram">;
declare const lineSeries: SeriesDefinition<"Line">;
/**
* Draggable Price Line - Línea de precio que se puede arrastrar con el mouse
*/
export declare class DraggablePriceLine {
private _chart;
private _series;
private _priceLine;
private _options;
private _isDragging;
private _container;
private _unsubscribeHandlers;
private _isHovering;
private _originalColor;
constructor(chart: IChartApi, series: ISeriesApi<SeriesType>, options: DraggablePriceLineOptions);
private _createPriceLine;
private _setupDragHandlers;
private _getPriceFromY;
/**
* Verifica si el mouse está EN la línea (no cerca, sino exactamente sobre ella)
* Usa la API de coordenadas del chart para precisión consistente
* @param e - Mouse event
* @param price - Precio calculado desde la posición Y
*/
private _isOnLine;
/**
* Verifica si el mouse está en el área del gráfico (no en el price axis)
*/
private _isInChartArea;
/**
* Activa/desactiva el estado de hover (línea negra)
*/
private _setHoverState;
private _updatePrice;
/**
* Update the price line options
*/
applyOptions(options: Partial<DraggablePriceLineOptions>): void;
/**
* Get current price
*/
getPrice(): number;
/**
* Set price programmatically
*/
setPrice(price: number): void;
/**
* Remove the price line and cleanup
*/
remove(): void;
/**
* Get the underlying price line
*/
getPriceLine(): IPriceLine | null;
}
/**
* Interactive Line Manager - Permite crear líneas haciendo clic en el gráfico
*/
export declare class InteractiveLineManager {
private _chart;
private _series;
private _container;
private _creationMode;
private _clickHandler;
private _customOptions;
constructor(chart: IChartApi, series: ISeriesApi<SeriesType>);
private _setupContainer;
private _getPriceFromMouseEvent;
/**
* Activa el modo de creación de líneas por clic
* @param mode - Tipo de línea a crear
* @param customOptions - Opciones personalizadas para líneas custom
* @returns Promesa que se resuelve cuando el usuario hace clic
*/
enableClickToCreate(mode: LineCreationMode, customOptions?: Partial<DraggablePriceLineOptions>): Promise<DraggablePriceLine | null>;
/**
* Desactiva el modo de creación por clic
*/
disableClickToCreate(): void;
private _createLineAtPrice;
/**
* Obtiene el modo actual de creación
*/
getCreationMode(): LineCreationMode;
/**
* Verifica si está en modo de creación
*/
isCreating(): boolean;
}
export declare const customSeriesDefaultOptions: CustomSeriesOptions;
/**
* Enumeration representing the sign of a marker.
*/
export declare const enum MarkerSign {
/** Represents a negative change (-1) */
Negative = -1,
/** Represents no change (0) */
Neutral = 0,
/** Represents a positive change (1) */
Positive = 1
}
/**
* Represents a type of color.
*/
export declare enum ColorType {
/** Solid color */
Solid = "solid",
/** Vertical gradient color */
VerticalGradient = "gradient"
}
/**
* Represents the crosshair mode.
*/
export declare enum CrosshairMode {
/**
* This mode allows crosshair to move freely on the chart.
*/
Normal = 0,
/**
* This mode sticks crosshair's horizontal line to the price value of a single-value series or to the close price of OHLC-based series.
*/
Magnet = 1,
/**
* This mode disables rendering of the crosshair.
*/
Hidden = 2,
/**
* This mode sticks crosshair's horizontal line to the price value of a single-value series or to the open/high/low/close price of OHLC-based series.
*/
MagnetOHLC = 3
}
/**
* Represents the type of the last price animation for series such as area or line.
*/
export declare enum LastPriceAnimationMode {
/**
* Animation is always disabled
*/
Disabled = 0,
/**
* Animation is always enabled.
*/
Continuous = 1,
/**
* Animation is active after new data.
*/
OnDataUpdate = 2
}
/**
* Represents the possible line styles.
*/
export declare enum LineStyle {
/**
* A solid line.
*/
Solid = 0,
/**
* A dotted line.
*/
Dotted = 1,
/**
* A dashed line.
*/
Dashed = 2,
/**
* A dashed line with bigger dashes.
*/
LargeDashed = 3,
/**
* A dotted line with more space between dots.
*/
SparseDotted = 4
}
/**
* Represents the possible line types.
*/
export declare enum LineType {
/**
* A line.
*/
Simple = 0,
/**
* A stepped line.
*/
WithSteps = 1,
/**
* A curved line.
*/
Curved = 2
}
/**
* Search direction if no data found at provided index
*/
export declare enum MismatchDirection {
/**
* Search the nearest left item
*/
NearestLeft = -1,
/**
* Do not search
*/
None = 0,
/**
* Search the nearest right item
*/
NearestRight = 1
}
/**
* Represents the source of data to be used for the horizontal price line.
*/
export declare enum PriceLineSource {
/**
* Use the last bar data.
*/
LastBar = 0,
/**
* Use the last visible data of the chart viewport.
*/
LastVisible = 1
}
/**
* Represents the price scale mode.
*/
export declare enum PriceScaleMode {
/**
* Price scale shows prices. Price range changes linearly.
*/
Normal = 0,
/**
* Price scale shows prices. Price range changes logarithmically.
*/
Logarithmic = 1,
/**
* Price scale shows percentage values according the first visible value of the price scale.
* The first visible value is 0% in this mode.
*/
Percentage = 2,
/**
* The same as percentage mode, but the first value is moved to 100.
*/
IndexedTo100 = 3
}
/**
* Represents the type of a tick mark on the time axis.
*/
export declare enum TickMarkType {
/**
* The start of the year (e.g. it's the first tick mark in a year).
*/
Year = 0,
/**
* The start of the month (e.g. it's the first tick mark in a month).
*/
Month = 1,
/**
* A day of the month.
*/
DayOfMonth = 2,
/**
* A time without seconds.
*/
Time = 3,
/**
* A time with seconds.
*/
TimeWithSeconds = 4
}
/**
* Determine how to exit the tracking mode.
*
* By default, mobile users will long press to deactivate the scroll and have the ability to check values and dates.
* Another press is required to activate the scroll, be able to move left/right, zoom, etc.
*/
export declare enum TrackingModeExitMode {
/**
* Tracking Mode will be deactivated on touch end event.
*/
OnTouchEnd = 0,
/**
* Tracking Mode will be deactivated on the next tap event.
*/
OnNextTap = 1
}
/**
* Apply ATR (Average True Range) indicator to a series
* @param series - Source series
* @param chart - Chart instance
* @param options - ATR configuration
* @returns The ATR line series
*/
export declare function applyATR(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: ATROptions): ISeriesApi<"Line">;
/**
* Apply Bollinger Bands indicator to a series
* @param series - Source series
* @param chart - Chart instance
* @param options - Bollinger Bands configuration
* @returns Object with upper, middle, and lower band series
*/
export declare function applyBollingerBands(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: BollingerBandsOptions): {
upper: ISeriesApi<"Line">;
middle: ISeriesApi<"Line">;
lower: ISeriesApi<"Line">;
};
/**
* Apply EMA (Exponential Moving Average) indicator to a series
* @param series - Source series to calculate EMA from
* @param chart - Chart instance
* @param options - EMA configuration options
* @returns The EMA line series
*/
export declare function applyEMA(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: EMAOptions): ISeriesApi<"Line">;
/**
* Apply MACD indicator to a series
* @param series - Source series
* @param chart - Chart instance
* @param options - MACD configuration
* @returns Object with macd, signal, and histogram series
*/
export declare function applyMACD(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: MACDOptions): {
macd: ISeriesApi<"Line">;
signal: ISeriesApi<"Line">;
histogram: ISeriesApi<"Histogram">;
};
/**
* Apply OBV (On-Balance Volume) indicator to a series
* @param series - Source series
* @param chart - Chart instance
* @param options - OBV configuration
* @returns The OBV line series
*/
export declare function applyOBV(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: OBVOptions): ISeriesApi<"Line">;
/**
* Apply RSI indicator to a series
* @param series - Source series to calculate RSI from
* @param chart - Chart instance to add the indicator to
* @param options - RSI configuration options
* @returns The RSI line series
*/
export declare function applyRSI(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: RSIOptions): ISeriesApi<"Line">;
/**
* Apply SMA (Simple Moving Average) indicator to a series
* @param series - Source series to calculate SMA from
* @param chart - Chart instance
* @param options - SMA configuration options
* @returns The SMA line series
*/
export declare function applySMA(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: SMAOptions): ISeriesApi<"Line">;
/**
* Apply Stochastic Oscillator indicator to a series
* @param series - Source series
* @param chart - Chart instance
* @param options - Stochastic configuration
* @returns Object with %K and %D line series
*/
export declare function applyStochastic(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: StochasticOptions): {
k: ISeriesApi<"Line">;
d: ISeriesApi<"Line">;
};
/**
* Apply Volume indicator to a series
* IMPORTANT: Use setVolumeData() to update volume when setting chart data
* @param series - Source series to sync with
* @param chart - Chart instance
* @param options - Volume configuration
* @returns The Volume histogram series
*/
export declare function applyVolume(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: VolumeOptions): ISeriesApi<"Histogram">;
/**
* Apply WMA (Weighted Moving Average) indicator to a series
* @param series - Source series to calculate WMA from
* @param chart - Chart instance
* @param options - WMA configuration options
* @returns The WMA line series
*/
export declare function applyWMA(series: ISeriesApi<SeriesType>, chart: IChartApi, options?: WMAOptions): ISeriesApi<"Line">;
/**
* This function is the simplified main entry point of the Lightweight Charting Library with time points for the horizontal scale.
*
* @param container - ID of HTML element or element itself
* @param options - Any subset of options to be applied at start.
* @returns An interface to the created chart
*/
export declare function createChart(container: string | HTMLElement, options?: DeepPartial<ChartOptions>): IChartApi;
/**
* This function is the main entry point of the Lightweight Charting Library. If you are using time values
* for the horizontal scale then it is recommended that you rather use the {@link createChart} function.
*
* @template HorzScaleItem - type of points on the horizontal scale
* @template THorzScaleBehavior - type of horizontal axis strategy that encapsulate all the specific behaviors of the horizontal scale type
*
* @param container - ID of HTML element or element itself
* @param horzScaleBehavior - Horizontal scale behavior
* @param options - Any subset of options to be applied at start.
* @returns An interface to the created chart
*/
export declare function createChartEx<HorzScaleItem, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem>>(container: string | HTMLElement, horzScaleBehavior: THorzScaleBehavior, options?: DeepPartial<ReturnType<THorzScaleBehavior["options"]>>): IChartApiBase<HorzScaleItem>;
/**
* Creates an image watermark.
*
* @param pane - Target pane.
* @param imageUrl - Image URL.
* @param options - Watermark options.
*
* @returns Image watermark wrapper.
*
* @example
* ```js
* import { createImageWatermark } from 'lightweight-charts';
*
* const firstPane = chart.panes()[0];
* const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', {
* alpha: 0.5,
* padding: 20,
* });
* // to change options
* imageWatermark.applyOptions({ padding: 10 });
* // to remove watermark from the pane
* imageWatermark.detach();
* ```
*/
export declare function createImageWatermark<T>(pane: IPaneApi<T>, imageUrl: string, options: DeepPartial<ImageWatermarkOptions>): IImageWatermarkPluginApi<T>;
/**
* Crea un manager interactivo para añadir líneas con clics
* @param chart - Chart instance
* @param series - Series instance
* @returns InteractiveLineManager
* @example
* ```typescript
* const manager = createInteractiveLineManager(chart, candleSeries);
*
* // Activar modo de creación
* const line = await manager.enableClickToCreate('stop-loss', {
* onDragEnd: (price) => console.log('SL:', price)
* });
* ```
*/
export declare function createInteractiveLineManager(chart: IChartApi, series: ISeriesApi<SeriesType>): InteractiveLineManager;
/**
* Creates an 'options' chart with price values on the horizontal scale.
*
* This function is used to create a specialized chart type where the horizontal scale
* represents price values instead of time. It's particularly useful for visualizing
* option chains, price distributions, or any data where price is the primary x-axis metric.
*
* @param container - The DOM element or its id where the chart will be rendered.
* @param options - Optional configuration options for the price chart.
* @returns An instance of IChartApiBase configured for price-based horizontal scaling.
*/
export declare function createOptionsChart(container: string | HTMLElement, options?: DeepPartial<PriceChartOptions>): IChartApiBase<number>;
/**
* A function to create a series markers primitive.
*
* @param series - The series to which the primitive will be attached.
*
* @param markers - An array of markers to be displayed on the series.
*
* @param options - Options for the series markers plugin.
*
* @example
* ```js
* import { createSeriesMarkers } from 'lightweight-charts';
*
* const seriesMarkers = createSeriesMarkers(
* series,
* [
* {
* color: 'green',
* position: 'inBar',
* shape: 'arrowDown',
* time: 1556880900,
* },
* ]
* );
* // and then you can modify the markers
* // set it to empty array to remove all markers
* seriesMarkers.setMarkers([]);
*
* // `seriesMarkers.markers()` returns current markers
* ```
*/
export declare function createSeriesMarkers<HorzScaleItem>(series: ISeriesApi<SeriesType, HorzScaleItem>, markers?: SeriesMarker<HorzScaleItem>[], options?: DeepPartial<SeriesMarkersOptions>): ISeriesMarkersPluginApi<HorzScaleItem>;
/**
* Creates an image watermark.
*
* @param pane - Target pane.
* @param options - Watermark options.
*
* @returns Image watermark wrapper.
*
* @example
* ```js
* import { createTextWatermark } from 'lightweight-charts';
*
* const firstPane = chart.panes()[0];
* const textWatermark = createTextWatermark(firstPane, {
* horzAlign: 'center',
* vertAlign: 'center',
* lines: [
* {
* text: 'Hello',
* color: 'rgba(255,0,0,0.5)',
* fontSize: 100,
* fontStyle: 'bold',
* },
* {
* text: 'This is a text watermark',
* color: 'rgba(0,0,255,0.5)',
* fontSize: 50,
* fontStyle: 'italic',
* fontFamily: 'monospace',
* },
* ],
* });
* // to change options
* textWatermark.applyOptions({ horzAlign: 'left' });
* // to remove watermark from the pane
* textWatermark.detach();
* ```
*/
export declare function createTextWatermark<T>(pane: IPaneApi<T>, options: DeepPartial<TextWatermarkOptions>): ITextWatermarkPluginApi<T>;
/**
* Create a flexible trading line with presets for common trading scenarios
* @param series - Series to attach the line to
* @param chart - Chart instance
* @param options - Trading line options
* @returns DraggablePriceLine instance
* @example
* ```typescript
* // Stop Loss
* const sl = createTradingLine(candleSeries, chart, {
* price: 95.00,
* type: 'stop-loss',
* onDragEnd: (price) => console.log('New SL:', price)
* });
*
* // Take Profit
* const tp = createTradingLine(candleSeries, chart, {
* price: 105.00,
* type: 'take-profit'
* });
*
* // Custom line
* const custom = createTradingLine(candleSeries, chart, {
* price: 100.00,
* title: 'My Line',
* color: '#9C27B0',
* lineStyle: LineStyle.Dotted
* });
* ```
*/
export declare function createTradingLine(series: ISeriesApi<SeriesType>, chart: IChartApi, options: TradingLineOptions): DraggablePriceLine;
/**
* Creates and attaches the Series Up Down Markers Plugin.
*
* @param series - Series to which attach the Up Down Markers Plugin
* @param options - options for the Up Down Markers Plugin
*
* @returns Api for Series Up Down Marker Plugin. {@link ISeriesUpDownMarkerPluginApi}
*
* @example
* ```js
* import { createUpDownMarkers, createChart, LineSeries } from 'lightweight-charts';
*
* const chart = createChart('container');
* const lineSeries = chart.addSeries(LineSeries);
* const upDownMarkers = createUpDownMarkers(lineSeries, {
* positiveColor: '#22AB94',
* negativeColor: '#F7525F',
* updateVisibilityDuration: 5000,
* });
* // to add some data
* upDownMarkers.setData(
* [
* { time: '2020-02-02', value: 12.34 },
* //... more line series data
* ]
* );
* // ... Update some values
* upDownMarkers.update({ time: '2020-02-02', value: 13.54 }, true);
* // to remove plugin from the series
* upDownMarkers.detach();
* ```
*/
export declare function createUpDownMarkers<T>(series: ISeriesApi<SeriesType, T>, options?: Partial<UpDownMarkersPluginOptions>): ISeriesUpDownMarkerPluginApi<T>;
/**
* Creates a yield curve chart with the specified options.
*
* A yield curve chart differs from the default chart type
* in the following ways:
* - Horizontal scale is linearly spaced, and defined in monthly
* time duration units
* - Whitespace is ignored for the crosshair and grid lines
*
* @param container - ID of HTML element or element itself
* @param options - The yield chart options.
* @returns An interface to the created chart
*/
export declare function createYieldCurveChart(container: string | HTMLElement, options?: DeepPartial<YieldCurveChartOptions>): IYieldCurveChartApi;
/**
* Provides the default implementation of the horizontal scale (time-based) that can be used as a base for extending the horizontal scale with custom behavior.
* This allows for the introduction of custom functionality without re-implementing the entire {@link IHorzScaleBehavior}<{@link Time}> interface.
*
* For further details, refer to the {@link createChartEx} chart constructor method.
*
* @returns An uninitialized class implementing the {@link IHorzScaleBehavior}<{@link Time}> 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;
/**
* Set volume data for OBV calculation
* @param series - The candlestick series
* @param data - Array with volume field
*/
export declare function setOBVVolumeData(series: ISeriesApi<SeriesType>, data: any[]): void;
/**
* Set volume data for a series
* Call this function when you set data to your candlestick series
* @param series - The candlestick series
* @param data - Array with volume field
* @example
* const data = [{time: '2024-01-01', open: 100, high: 105, low: 99, close: 103, volume: 1000000}, ...];
* candleSeries.setData(data);
* setVolumeData(candleSeries, data); // Store volume for indicators
*/
export declare function setVolumeData(series: ISeriesApi<SeriesType>, data: any[]): void;
/**
* Returns the current version as a string. For example `'1.0.0'`.
*/
export declare function version(): string;
export interface ATROptions {
period?: number;
color?: string;
}
/**
* Structure describing a single item of data for area series
*/
export interface AreaData<HorzScaleItem = Time> extends SingleValueData<HorzScaleItem> {
/**
* Optional line color value for certain data item. If missed, color from options is used
*/
lineColor?: string;
/**
* Optional top color value for certain data item. If missed, color from options is used
*/
topColor?: string;
/**
* Optional bottom color value for certain data item. If missed, color from options is used
*/
bottomColor?: string;
}
/**
* Represents style options for an area series.
*/
export interface AreaStyleOptions {
/**
* Color of the top part of the area.
*
* @defaultValue `'rgba( 46, 220, 135, 0.4)'`
*/
topColor: string;
/**
* Color of the bottom part of the area.
*
* @defaultValue `'rgba( 40, 221, 100, 0)'`
*/
bottomColor: string;
/**
* Gradient is relative to the base value and the currently visible range.
* If it is false, the gradient is relative to the top and bottom of the chart.
*
* @defaultValue `false`
*/
relativeGradient: boolean;
/**
* Invert the filled area. Fills the area above the line if set to true.
*
* @defaultValue `false`
*/
invertFilledArea: boolean;
/**
* Line color.
*
* @defaultValue `'#33D778'`
*/
lineColor: string;
/**
* Line style.
*
* @defaultValue {@link LineStyle.Solid}
*/
lineStyle: LineStyle;
/**
* Line width in pixels.
*
* @defaultValue `3`
*/
lineWidth: LineWidth;
/**
* Line type.
*
* @defaultValue {@link LineType.Simple}
*/
lineType: LineType;
/**
* Show series line.
*
* @defaultValue `true`
*/
lineVisible: boolean;
/**
* Show circle markers on each point.
*
* @defaultValue `false`
*/
pointMarkersVisible: boolean;
/**
* Circle markers radius in pixels.
*
* @defaultValue `undefined`
*/
pointMarkersRadius?: number;
/**
* Show the crosshair marker.
*
* @defaultValue `true`
*/
crosshairMarkerVisible: boolean;
/**
* Crosshair marker radius in pixels.
*
* @defaultValue `4`
*/
crosshairMarkerRadius: number;
/**
* Crosshair marker border color. An empty string falls back to the color of the series under the crosshair.
*
* @defaultValue `''`
*/
crosshairMarkerBorderColor: string;
/**
* The crosshair marker background color. An empty string falls back to the color of the series under the crosshair.
*
* @defaultValue `''`
*/
crosshairMarkerBackgroundColor: string;
/**
* Crosshair marker border width in pixels.
*
* @defaultValue `2`
*/
crosshairMarkerBorderWidth: number;
/**
* Last price animation mode.
*
* @defaultValue {@link LastPriceAnimationMode.Disabled}
*/
lastPriceAnimation: LastPriceAnimationMode;
}
/**
* Represents the margin used when updating a price scale.
*/
export interface AutoScaleMargins {
/** The number of pixels for bottom margin */
below: number;
/** The number of pixels for top margin */
above: number;
}
/**
* Represents information used to update a price scale.
*/
export interface AutoscaleInfo {
/**
* Price range.
*/
priceRange: PriceRange | null;
/**
* Scale margins.
*/
margins?: AutoScaleMargins;
}
/**
* Represents options for how the time and price axes react to mouse double click.
*/
export interface AxisDoubleClickOptions {
/**
* Enable resetting scaling the time axis by double-clicking the left mouse button.
*
* @defaultValue `true`
*/
time: boolean;
/**
* Enable reseting scaling the price axis by by double-clicking the left mouse button.
*
* @defaultValue `true`
*/
price: boolean;
}
/**
* Represents options for how the time and price axes react to mouse movements.
*/
export interface AxisPressedMouseMoveOptions {
/**
* Enable scaling the time axis by holding down the left mouse button and moving the mouse.
*
* @defaultValue `true`
*/
time: boolean;
/**
* Enable scaling the price axis by holding down the left mouse button and moving the mouse.
*
* @defaultValue `true`
*/
price: boolean;
}
/**
* Structure describing a single item of data for bar series
*/
export interface BarData<HorzScaleItem = Time> extends OhlcData<HorzScaleItem> {
/**
* Optional color value for certain data item. If missed, color from options is used
*/
color?: string;
}
/**
* Represents style options for a bar series.
*/
export interface BarStyleOptions {
/**
* Color of rising bars.
*
* @defaultValue `'#26a69a'`
*/
upColor: string;
/**
* Color of falling bars.
*
* @defaultValue `'#ef5350'`
*/
downColor: string;
/**
* Show open lines on bars.
*
* @defaultValue `true`
*/
openVisible: boolean;
/**
* Show bars as sticks.
*
* @defaultValue `true`
*/
thinBars: boolean;
}
/**
* Represents a range of bars and the number of bars outside the range.
*/
export interface BarsInfo<HorzScaleItem> extends Partial<IRange<HorzScaleItem>> {
/**
* The number of bars before the start of the range.
* Positive value means that there are some bars before (out of logical range from the left) the {@link IRange.from} logical index in the series.
* Negative value means that the first series' bar is inside the passed logical range, and between the first series' bar and the {@link IRange.from} logical index are some bars.
*/
barsBefore: number;
/**
* The number of bars after the end of the range.
* Positive value in the `barsAfter` field means that there are some bars after (out of logical range from the right) the {@link IRange.to} logical index in the series.
* Negative value means that the last series' bar is inside the passed logical range, and between the last series' bar and the {@link IRange.to} logical index are some bars.
*/
barsAfter: number;
}
/**
* Represents a type of priced base value of baseline series type.
*/
export interface BaseValuePrice {
/**
* Distinguished type value.
*/
type: "price";
/**
* Price value.
*/
price: number;
}
/**
* Structure describing a single item of data for baseline series
*/
export interface BaselineData<HorzScaleItem = Time> extends SingleValueData<HorzScaleItem> {
/**
* Optional top area top fill color value for certain data item. If missed, color from options is used
*/
topFillColor1?: string;
/**
* Optional top area bottom fill color value for certain data item. If missed, color from options is used
*/
topFillColor2?: string;
/**
* Optional top area line color value for certain data item. If missed, color from options is used
*/
topLineColor?: string;
/**
* Optional bottom area top fill color value for certain data item. If missed, color from options is used
*/
bottomFillColor1?: string;
/**
* Optional bottom area bottom fill color value for certain data item. If missed, color from options is used
*/
bottomFillColor2?: string;
/**
* Optional bottom area line color value for certain data item. If missed, color from options is used
*/
bottomLineColor?: string;
}
/**
* Represents style options for a baseline series.
*/
export interface BaselineStyleOptions {
/**
* Base value of the series.
*
* @defaultValue `{ type: 'price', price: 0 }`
*/
baseValue: BaseValueType;
/**
* Gradient is relative to the base value and the currently visible range.
* If it is false, the gradient is relative to the top and bottom of the chart.
*
* @defaultValue `false`
*/
relativeGradient: boolean;
/**
* The first color of the top area.
*
* @defaultValue `'rgba(38, 166, 154, 0.28)'`
*/
topFillColor1: string;
/**
* The second color of the top area.
*
* @defaultValue `'rgba(38, 166, 154, 0.05)'`
*/
topFillColor2: string;
/**
* The line color of the top area.
*
* @defaultValue `'rgba(38, 166, 154, 1)'`
*/
topLineColor: string;
/**
* The first color of the bottom area.
*
* @defaultValue `'rgba(239, 83, 80, 0.05)'`
*/
bottomFillColor1: string;
/**
* The second color of the bottom area.
*
* @defaultValue `'rgba(239, 83, 80, 0.28)'`
*/
bottomFillColor2: string;
/**
* The line color of the bottom area.
*
* @defaultValue `'rgba(239, 83, 80, 1)'`
*/
bottomLineColor: string;
/**
* Line width.
*
* @defaultValue `3`
*/
lineWidth: LineWidth;
/**
* Line style.
*
* @defaultValue {@link LineStyle.Solid}
*/
lineStyle: LineStyle;
/**
* Line type.
*
* @defaultValue {@link LineType.Simple}
*/
lineType: LineType;
/**
* Show series line.
*
* @defaultValue `true`
*/
lineVisible: boolean;
/**
* Show circle markers on each point.
*
* @defaultValue `false`
*/
pointMarkersVisible: boolean;
/**
* Circle markers radius in pixels.
*
* @defaultValue `undefined`
*/
pointMarkersRadius?: number;
/**
* Show the crosshair marker.
*
* @defaultValue `true`
*/
crosshairMarkerVisible: boolean;
/**
* Crosshair marker radius in pixels.
*
* @defaultValue `4`
*/
crosshairMarkerRadius: number;
/**
* Crosshair marker border color. An empty string falls back to the color of the series under the crosshair.
*
* @defaultValue `''`
*/
crosshairMarkerBorderColor: string;
/**
* The crosshair marker background color. An empty string falls back to the color of the series under the crosshair.
*
* @defaultValue `''`
*/
crosshairMarkerBackgroundColor: string;
/**
* Crosshair marker border width in pixels.
*
* @defaultValue `2`
*/
crosshairMarkerBorderWidth: number;
/**
* Last price animation mode.
*
* @defaultValue {@link LastPriceAnimationMode.Disabled}
*/
lastPriceAnimation: LastPriceAnimationMode;
}
export interface BollingerBandsOptions {
period?: number;
stdDev?: number;
colorUpper?: string;
colorMiddle?: string;
colorLower?: string;
}
/**
* Represents a time as a day/month/year.
*
* @example
* ```js
* const day = { year: 2019, month: 6, day: 1 }; // June 1, 2019
* ```
*/
export interface BusinessDay {
/**
* The year.
*/
year: number;
/**
* The month.
*/
month: number;
/**
* The day.
*/
day: number;
}
/**
* Structure describing a single item of data for candlestick series
*/
export interface CandlestickData<HorzScaleItem = Time> extends OhlcData<HorzScaleItem> {
/**
* Optional color value for certain data item. If missed, color from options is used
*/
color?: string;
/**
* Optional border color value for certain data item. If missed, color from options is used
*/
borderColor?: string;
/**
* Optional wick color value for certain data item. If missed, color from options is used
*/
wickColor?: string;
}
/**
* Represents style options for a candlestick series.
*/
export interface CandlestickStyleOptions {
/**
* Color of rising candles.
*
* @defaultValue `'#26a69a'`
*/
upColor: string;
/**
* Color of falling candles.
*
* @defaultValue `'#ef5350'`
*/
downColor: string;
/**
* Enable high and low prices candle wicks.
*
* @defaultValue `true`
*/
wickVisible: boolean;
/**
* Enable candle borders.
*
* @defaultValue `true`
*/
borderVisible: boolean;
/**
* Border color.
*
* @defaultValue `'#378658'`
*/
borderColor: string;
/**
* Border color of rising candles.
*
* @defaultValue `'#26a69a'`
*/
borderUpColor: string;
/**
* Border color of falling candles.
*
* @defaultValue `'#ef5350'`
*/
borderDownColor: string;
/**
* Wick color.
*
* @defaultValue `'#737375'`
*/
wickColor: string;
/**
* Wick color of rising candles.
*
* @defaultValue `'#26a69a'`
*/
wickUpColor: string;
/**
* Wick color of falling candles.
*
* @defaultValue `'#ef5350'`
*/
wickDownColor: string;
}
/**
* Represents common chart options
*/
export interface ChartOptionsBase {
/**
* Width of the chart in pixels
*
* @defaultValue If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size.
*/
width: number;
/**
* Height of the chart in pixels
*
* @defaultValue If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size.
*/
height: number;
/**
* Setting this flag to `true` will make the chart watch the chart container's size and automatically resize the chart to fit its container whenever the size changes.
*
* This feature requires [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) class to be available in the global scope.
* Note that calling code is responsible for providing a polyfill if required. If the global scope does not have `ResizeObserver`, a warning will appear and the flag will be ignored.
*
* Please pay attention that `autoSize` option and explicit sizes options `width` and `height` don't conflict with one another.
* If you specify `autoSize` flag, then `width` and `height` options will be ignored unless `ResizeObserver` has failed. If it fails then the values will be used as fallback.
*
* The flag `autoSize` could also be set with and unset with `applyOptions` function.
* ```js
* const chart = LightweightCharts.createChart(document.body, {
* autoSize: true,
* });
* ```
*/
autoSize: boolean;
/**
* Layout options
*/
layout: LayoutOptions;
/**
* Left price scale options
*/
leftPriceScale: VisiblePriceScaleOptions;
/**
* Right price scale options
*/
rightPriceScale: VisiblePriceScaleOptions;
/**
* Overlay price scale options
*/
overlayPriceScales: OverlayPriceScaleOptions;
/**
* Time scale options
*/
timeScale: HorzScaleOptions;
/**
* The crosshair shows the intersection of the price and time scale values at any point on the chart.
*
*/
crosshair: CrosshairOptions;
/**
* A grid is represented in the chart background as a vertical and horizontal lines drawn at the levels of visible marks of price and the time scales.
*/
grid: GridOptions;
/**
* Scroll options, or a boolean flag that enables/disables scrolling
*/
handleScroll: HandleScrollOptions | boolean;
/**
* Scale options, or a boolean flag that enables/disables scaling
*/
handleScale: HandleScaleOptions | boolean;
/**
* Kinetic scroll options
*/
kineticScroll: KineticScrollOptions;
/** @inheritDoc TrackingModeOptions
*/
trackingMode: TrackingModeOptions;
/**
* Basic localization options
*/
localization: LocalizationOptionsBase;
/**
* Whether to add a default pane to the chart
* Disable this option when you want to create a chart with no panes and add them manually
* @defaultValue `true`
*/
addDefaultPane: boolean;
}
/**
* Structure describing options of the chart. Series options are to be set separately
*/
export interface ChartOptionsImpl<HorzScaleItem> extends ChartOptionsBase {
/**
* Localization options.
*/
localization: LocalizationOptions<HorzScaleItem>;
}
/** Structure describing a crosshair line (vertical or horizontal) */
export interface CrosshairLineOptions {
/**
* Crosshair line color.
*
* @defaultValue `'#758696'`
*/
color: string;
/**
* Crosshair line width.
*
* @defaultValue `1`
*/
width: LineWidth;
/**
* Crosshair line style.
*
* @defaultValue {@link LineStyle.LargeDashed}
*/
style: LineStyle;
/**
* Display the crosshair line.
*
* Note that disabling crosshair lines does not disable crosshair marker on Line and Area series.
* It can be disabled by using `crosshairMarkerVisible` option of a relevant series.
*
* @see {@link LineStyleOptions.crosshairMarkerVisible}
* @see {@link AreaStyleOptions.crosshairMarkerVisible}
* @see {@link BaselineStyleOptions.crosshairMarkerVisible}
* @defaultValue `true`
*/
visible: boolean;
/**
* Display the crosshair label on the relevant scale.
*
* @defaultValue `true`
*/
labelVisible: boolean;
/**
* Crosshair label background color.
*
* @defaultValue `'#4c525e'`
*/
labelBackgroundColor: string;
}
/** Structure describing crosshair options */
export interface CrosshairOptions {
/**
* Crosshair mode
*
* @defaultValue {@link CrosshairMode.Magnet}
*/
mode: CrosshairMode;
/**
* Vertical line options.
*/
vertLine: CrosshairLineOptions;
/**
* Horizontal line options.
*/
horzLine: CrosshairLineOptions;
}
/**
* Renderer data for an item within the custom series.
*/
export interface CustomBarItemData<HorzScaleItem, TData extends CustomData<HorzScaleItem> = CustomData<HorzScaleItem>> {
/**
* Horizontal coordinate for the item. Measured from the left edge of the pane in pixels.
*/
x: number;
/**
* Time scale index for the item. This isn't the timestamp but rather the logical index.
*/
time: number;
/**
* Original data for the item.
*/
originalData: TData;
/**
* Color assigned for the item, typically used for price line and price scale label.
*/
barColor: string;
}
/**
* Base structure describing a single item of data for a custom series.
*
* This type allows for any properties to be defined
* within the interface. It is recommended that you extend this interface with
* the required data structure.
*/
export interface CustomData<HorzScaleItem = Time> extends CustomSeriesWhitespaceData<HorzScaleItem> {
/**
* If defined then this color will be used for the price line and price scale line
* for this specific data item of the custom series.
*/
color?: string;
}
/**
* Represents a whitespace data item, which is a data point without a value.
*/
export interface CustomSeriesWhitespaceData<HorzScaleItem> {
/**
* The time of the data.
*/
time: HorzScaleItem;
/**
* Additional custom values which will be ignored by the library, but
* could be used by plugins.
*/
customValues?: Record<string, unknown>;
}
/**
* Represents style options for a custom series.
*/
export interface CustomStyleOptions {
/**
* Color used for the price line and price scale label.
*/
color: string;
}
export interface DraggablePriceLineOptions {
price: number;
color: string;
lineWidth?: LineWidth;
lineStyle?: LineStyle;
title?: string;
axisLabelVisible?: boolean;
draggable?: boolean;
onDragStart?: (price: number) => void;
onDragMove?: (price: number) => void;
onDragEnd?: (price: number) => void;
}
/**
* Helper drawing utilities exposed by the library to a Primitive (a.k.a plugin).
*/
export interface DrawingUtils {
/**
* Drawing utility to change the line style on the canvas context to one of the
* built-in line styles.
* @param ctx - 2D rendering context for the target canvas.
* @param lineStyle - Built-in {@link LineStyle} to set on the canvas context.
*/
readonly setLineStyle: (ctx: CanvasRenderingContext2D, lineStyle: LineStyle) => void;
}
export interface EMAOptions {
period?: number;
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 margin space in pixels from the right side of the chart.
* This option has priority over `rightOffset`.
*
* @defaultValue `undefined`
*/
rightOffsetPixels?: number;
/**
* The space between bars in pixels.
*
* @defaultValue `6`
*/
barSpacing: number;
/**
* The minimum space between bars in pixels.
*
* @defaultValue `0.5`
*/
minBarSpacing: number;
/**
* The maximum space between bars in pixels.
*
* Has no effect if value is set to `0`.
*
* @defaultValue `0`
*/
maxBarSpacing: number;
/**
* Prevent scrolling to the left of the first bar.
*
* @defaultValue `false`
*/
fixLeftEdge: boolean;
/**
* Prevent scrolling to the right of the most recent bar.
*
* @defaultValue `false`
*/
fixRightEdge: boolean;
/**
* Prevent changing the visible time range during chart resizing.
*
* @defaultValue `false`
*/
lockVisibleTimeRangeOnResize: boolean;
/**
* Prevent the hovered bar from moving when scrolling.
*
* @defaultValue `false`
*/
rightBarStaysOnScroll: boolean;
/**
* Show the time scale border.
*
* @defaultValue `true`
*/
borderVisible: boolean;
/**
* The time scale border color.
*
* @defaultValue `'#2B2B43'`
*/
borderColor: string;
/**
* Show the time scale.
*
* @defaultValue `true`
*/
visible: boolean;
/**
* Show the time, not just the date, in the time scale and vertical crosshair label.
*
* @defaultValue `false`
*/
timeVisible: boolean;
/**
* Show seconds in the time scale and vertical crosshair label in `hh:mm:ss` format for intraday data.
*
* @defaultValue `true`
*/
secondsVisible: boolean;
/**
* Shift the visible range to the right (into the future) by the number of new bars when new data is added.
*
* Note that this only applies when the last bar is visible.
*
* @defaultValue `true`
*/
shiftVisibleRangeOnNewBar: boolean;
/**
* Allow the visible range to be shifted to the right when a new bar is added which
* is replacing an existing whitespace time point on the chart.
*
* Note that this only applies when the last bar is visible & `shiftVisibleRangeOnNewBar` is enabled.
*
* @defaultValue `false`
*/
allowShiftVisibleRangeOnWhitespaceReplacement: boolean;
/**
* Draw small vertical line on time axis labels.
*
* @defaultValue `false`
*/
ticksVisible: boolean;
/**
* Maximum tick mark label length. Used to override the default 8 character maximum length.
*
* @defaultValue `undefined`
*/
tickMarkMaxCharacterLength?: number;
/**
* Changes horizontal scale marks generation.
* With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all.
*/
uniformDistribution: boolean;
/**
* Define a minimum height for the time scale.
* Note: This value will be exceeded if the
* time scale needs more space to display it's contents.
*
* Setting a minimum height could be useful for ensuring that
* multiple charts positioned in a horizontal stack each have
* an identical time scale height, or for plugins which
* require a bit more space within the time scale pane.
*
* @defaultValue 0
*/
minimumHeight: number;
/**
* Allow major time scale labels to be rendered in a bolder font weight.
*
* @defaultValue true
*/
allowBoldLabels: boolean;
/**
* Ignore time scale points containing only whitespace (for all series) when
* drawing grid lines, tick marks, and snapping the crosshair to time scale points.
*
* For the yield curve chart type it defaults to `true`.
*
* @defaultValue false
*/
ignoreWhitespaceIndices: boolean;
}
/**
* The main interface of a single chart using time for horizontal scale.
*/
export interface IChartApi extends IChartApiBase<Time> {
/**
* Applies new options to the chart
*
* @param options - Any subset of options.
*/
applyOptions(options: DeepPartial<ChartOptions>): void;
}
/**
* The main interface of a single chart.
*/
export interface IChartApiBase<HorzScaleItem = Time> {
/**
* Removes the chart object including all DOM elements. This is an irreversible operation, you cannot do anything with the chart after removing it.
*/
remove(): void;
/**
* Sets fixed size of the chart. By default chart takes up 100% of its container.
*
* If chart has the `autoSize` option enabled, and the ResizeObserver is available then
* the width and height values will be ignored.
*
* @param width - Target width of the chart.
* @param height - Target height of the chart.
* @param forceRepaint - True to initiate resize immediately. One could need this to get screenshot immediately after resize.
*/
resize(width: number, height: number, forceRepaint?: boolean): void;
/**
* Creates a custom series with specified parameters.
*
* A custom series is a generic series which can be extended with a custom renderer to
* implement chart types which the library doesn't support by default.
*
* @param customPaneView - A custom series pane view which implements the custom renderer.
* @param customOptions - Customization parameters of the series being created.
* ```js
* const series = chart.addCustomSeries(myCustomPaneView);
* ```
*/
addCustomSeries<TData extends CustomData<HorzScaleItem>, TOptions extends CustomSeriesOptions, TPartialOptions extends SeriesPartialOptions<TOptions> = SeriesPartialOptions<TOptions>>(customPaneView: ICustomSeriesPaneView<HorzScaleItem, TData, TOptions>, customOptions?: SeriesPartialOptions<TOptions>, paneIndex?: number): ISeriesApi<"Custom", HorzScaleItem, TData | WhitespaceData<HorzScaleItem>, TOptions, TPartialOptions>;
/**
* Creates a series with specified parameters.
*
* @param definition - A series definition.
* @param options - Customization parameters of the series being created.
* @param paneIndex - An index of the pane where the series should be created.
* ```js
* const series = chart.addSeries(LineSeries, { lineWidth: 2 });
* ```
*/
addSeries<T extends SeriesType>(definition: SeriesDefinition<T>, options?: SeriesPartialOptionsMap[T], paneIndex?: number): ISeriesApi<T, HorzScaleItem>;
/**
* Removes a series of any type. This is an irreversible operation, you cannot do anything with the series after removing it.
*
* @example
* ```js
* chart.removeSeries(series);
* ```
*/
removeSeries(seriesApi: ISeriesApi<SeriesType, HorzScaleItem>): void;
/**
* Subscribe to the chart click event.
*
* @param handler - Handler to be called on mouse click.
* @example
* ```js
* function myClickHandler(param) {
* if (!param.point) {
* return;
* }
*
* console.log(`Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);
* }
*
* chart.subscribeClick(myClickHandler);
* ```
*/
subscribeClick(handler: MouseEventHandler<HorzScaleItem>): void;
/**
* Unsubscribe a handler that was previously subscribed using {@link subscribeClick}.
*
* @param handler - Previously subscribed handler
* @example
* ```js
* chart.unsubscribeClick(myClickHandler);
* ```
*/
unsubscribeClick(handler: MouseEventHandler<HorzScaleItem>): void;
/**
* Subscribe to the chart double-click event.
*
* @param handler - Handler to be called on mouse double-click.
* @example
* ```js
* function myDblClickHandler(param) {
* if (!param.point) {
* return;
* }
*
* console.log(`Double Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);
* }
*
* chart.subscribeDblClick(myDblClickHandler);
* ```
*/
subscribeDblClick(handler: MouseEventHandler<HorzScaleItem>): void;
/**
* Unsubscribe a handler that was previously subscribed using {@link subscribeDblClick}.
*
* @param handler - Previously subscr