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