@lightningchart/lcjs
Version:
A high-performance charting library.
1,400 lines (1,399 loc) • 2.12 MB
TypeScript
declare namespace lcjs {
/**
* @public
*/
declare interface AbstractAxisStrategy {
}
/**
* @public
* @privateRemarks Ideally internal but not feasible; has to be public so it is included in typings but the actual name is still obfuscated in docs and types.
*/
declare class _AbstractAxisTick implements Disposable {
/**
* **Permanently** destroy the component.
*
* To fully allow Garbage-Collection to free the resources used by the component, make sure to remove **any references**
* **to the component and its children** in application code.
* ```javascript
* let chart = ...ChartXY()
* let axisX = chart.getDefaultAxisX()
* // Dispose Chart, and remove all references so that they can be garbage-collected.
* chart.dispose()
* chart = undefined
* axisX = undefined
* ```
* @returns Object itself for fluent interface
* @public
*/
dispose(): this;
}
/**
* @public
*/
export declare abstract class AbstractCursor<CursorPositionType extends AbstractCursorPosition = AbstractCursorPosition, ResultTableBackgroundType extends UIBackground = UIBackground> implements Plotable, Hideable, DisposableEvents {
/**
* @public
*/
readonly scale: ScaleXY;
/**
* Set cursor position.
* @param cursorPositions - Abstract interface that describes cursor position. Actual type depends on type of cursor (XY, 3D, Polar, etc...)
* @returns Object itself.
* @public
*/
abstract setPosition(...cursorPositions: CursorPositionType[]): this;
/**
* Check whether the object is disposed.
* Disposed objects should not be used!
*
* @returns `true` if object is disposed.
* @public
*/
isDisposed(): boolean;
/**
* Set point marker visible or not.
*
* @param visible - Point marker visible?
* @returns Object itself.
* @public
*/
setPointMarkerVisible(visible: boolean): this;
/**
* Get point marker visible or not.
*
* @returns Boolean.
* @public
*/
getPointMarkerVisible(): boolean;
/**
* Mutator function for Cursors PointMarker.
* PointMarker is a visual that is displayed at the Cursors position
* @param mutator - Mutator function for PointMarker
* @returns Object itself for fluent interface
* @public
*/
setPointMarker(mutator: Mutator<PointMarker>): this;
/**
* Set result table visible or not.
*
* @param visible - Result table visible?
* @returns Object itself.
* @public
*/
setResultTableVisible(visible: boolean): this;
/**
* Get result table visible or not.
*
* @returns Boolean.
* @public
*/
getResultTableVisible(): boolean;
/**
* Mutator function for Cursors ResultTable.
* ResultTable is a visual that displays currently pointed data next to its location
* @param mutator - Mutator function for ResultTable
* @returns Object itself for fluent interface
* @public
*/
setResultTable(mutator: Mutator<ResultTable<ResultTableBackgroundType>>): this;
/**
* @param enabled - Auto fitting enabled or disabled
* @returns Object itself for fluent interface
* @public
*/
setAutoFit(enabled: boolean): this;
/**
* Get is auto-fit enabled.
* @returns Boolean flag whether auto-fit is enabled
* @public
*/
getAutoFit(): boolean;
/**
* Set element visibility.
*
* @param state - `true` when element should be visible and `false` when element should be hidden.
* @returns Object itself.
* @public
*/
setVisible(state: boolean): this;
/**
* Get element visibility.
*
* @returns `true` when element is set to be visible and `false` otherwise.
* @public
*/
getVisible(): boolean;
/**
* **Permanently** destroy the component.
*
* To fully allow Garbage-Collection to free the resources used by the component, make sure to remove **any references**
* **to the component and its children** in application code.
* ```javascript
* let chart = ...ChartXY()
* let axisX = chart.getDefaultAxisX()
* // Dispose Chart, and remove all references so that they can be garbage-collected.
* chart.dispose()
* chart = undefined
* axisX = undefined
* ```
* @returns Object itself for fluent interface
*/
dispose(): this;
addEventListener<K extends keyof AbstractCursorEventMap>(type: K, listener: (event: AbstractCursorEventMap[K], info: unknown) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener<K extends keyof AbstractCursorEventMap>(type: K, listener: (event: AbstractCursorEventMap[K], info: unknown) => unknown): void;
}
/**
* Interface of events trackable by {@link AbstractCursor.addEventListener} and the respective Event types.
* @public
*/
export declare interface AbstractCursorEventMap extends DisposableEventMap {
}
/**
* @public
*/
declare interface AbstractCursorPosition {
resultTable: Point;
resultTableScale: UserScaleDefinition;
pointMarkerFillStyle?: FillStyle;
pointMarkerStrokeStyle?: LineStyle;
pointMarkerShape?: PointShape;
pointMarkerSize?: Point;
}
/**
* End user managed Tick. Custom ticks are just like default ticks, except they can be completely controlled by the end user.
*
* For example, their position, text, text fill style, gridline style, etc. everything can be customized.
* They can be created whenever and destroyed whenever.
*
* This definition of Custom Tick is abstract, meaning that it is not tied to any specific chart type.
* See specific implementations:
*
* - {@link CustomTick}
* - {@link CustomTick3D}
* - {@link ParallelCoordinateAxisCustomTick}
*
* @public
*/
export declare interface AbstractCustomTick extends Disposable, DisposableEvents, Hideable, HideableEvents {
/**
* Set location of custom tick on its Axis.
*
* ```ts
* // Example usage
* CustomTick.setValue(5)
* ```
*
* @param value - Location on axis.
* @returns Object itself
* @public
*/
setValue(value: number): this;
/**
* Get location of custom tick on its Axis.
* @returns Location on axis.
* @public
*/
getValue(): number;
/**
* Set style of custom ticks tickline.
* This line connects the text to its Axis, generally a very short line (6 pixels, or so).
*
* ```ts
* // Example syntax, specify LineStyle
* CustomTick.setTickStyle(new SolidLine({
* thickness: 2,
* fillStyle: new SolidFill({ color: ColorHEX('#F00') })
* }))
* ```
*
* ```ts
* // Example syntax, change thickness only
* CustomTick.setTickStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
* ```
*
* ```ts
* // Example syntax, disable stroke
* CustomTick.setTickStyle(emptyLine)
* ```
*
* @param value - LineStyle or function which returns a LineStyle based on previous value.
* @returns Object itself.
* @public
*/
setTickStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Get style of custom ticks tickline.
* @returns LineStyle
* @public
*/
getTickStyle(): LineStyle;
/**
* Set tickline length as pixels.
*
* ```ts
* // Example usage
* CustomTick.setTickLength(5)
* ```
*
* @param length - Tickline length as pixels
* @returns Object itself
* @public
*/
setTickLength(length: number): this;
/**
* Get tickline length as pixels.
* @returns Tickline length as pixels.
* @public
*/
getTickLength(): number;
/**
* Set style of custom ticks gridline.
* This line highlights the tick location under the series area.
*
* ```ts
* // Example syntax, specify LineStyle
* CustomTick.setGridStrokeStyle(new SolidLine({
* thickness: 2,
* fillStyle: new SolidFill({ color: ColorHEX('#F00') })
* }))
* ```
*
* ```ts
* // Example syntax, change thickness only
* CustomTick.setGridStrokeStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
* ```
*
* ```ts
* // Example syntax, disable stroke
* CustomTick.setGridStrokeStyle(emptyLine)
* ```
*
* @param value - LineStyle or function which returns a LineStyle based on previous value.
* @returns Object itself.
* @public
*/
setGridStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Get style of custom ticks gridline.
* @returns LineStyle
* @public
*/
getGridStrokeStyle(): LineStyle;
/**
* Set padding between CustomTick tickline and text.
*
* ```ts
* // Example usage
* CustomTick.setTextPadding(5)
* ```
*
* @param padding - Padding as pixels
* @returns Object itself
* @public
*/
setTextPadding(padding: number): this;
/**
* Get padding between CustomTick tickline and text.
* @returns Padding as pixels
* @public
*/
getTextPadding(): number;
/**
* Set custom tick text rotation as degrees.
*
* ```ts
* // Example usage
* CustomTick.setTextRotation(90)
* ```
*
* @param value - Rotation as degrees.
* @returns Object itself
* @public
*/
setTextRotation(value: number): this;
/**
* Get custom tick text rotation as degrees.
* @returns Rotation as degrees.
* @public
*/
getTextRotation(): number;
/**
* Set fill style of custom ticks text.
*
* ```ts
* // Example syntax, red fill
* CustomTick.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
* ```
*
* ```ts
* // Example syntax, disable fill
* CustomTick.setTextFillStyle(emptyFill)
* ```
*
* @param value - FillStyle or function which returns a FillStyle based on previous value.
* @returns Object itself.
* @public
*/
setTextFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Get fill style of custom ticks text.
* @returns FillStyle
* @public
*/
getTextFillStyle(): FillStyle;
/**
* Set font of custom ticks text.
*
* ```ts
* // Example syntax, specify FontSettings
* CustomTick.setTextFont(new FontSettings({
* size: 14,
* family: 'Arial',
* weight: 'normal',
* }))
* ```
*
* ```ts
* // Example syntax, change to italic
* CustomTick.setTextFont(font => font.setStyle('italic'))
* ```
*
* To remove custom tick text, use {@link setTextFillStyle}
*
* @param value - FontSettings or function which returns a FontSettings based on previous value.
* @returns Object itself.
* @public
*/
setTextFont(value: FontSettings | ImmutableMutator<FontSettings>): this;
/**
* Get font of custom ticks text.
* @returns FontSettings
* @public
*/
getTextFont(): FontSettings;
/**
* Set text formatting of custom tick as a callback function.
*
* ```ts
* // Example usage
* CustomTick.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)
* ```
*
* The supplied callback function is called with the current axis location of the custom tick.
* To provide hard defined text, just ignore the `value`.
*
* ```ts
* // Example, hard defined custom tick text.
* CustomTick.setTextFormatter(() => `My tick text`)
* ```
*
* @param textFormatter - Callback function which returns custom tick text as string.
* @returns Object itself
* @public
*/
setTextFormatter(textFormatter: (value: number) => string): this;
/**
* Set component mouse interactions enabled or disabled.
*
* Disabling mouse interactions means that the objects below this component can be interacted _through_ it.
*
* @param state - Specifies state of mouse interactions
* @returns Object itself for fluent interface
* @public
*/
setPointerEvents(state: boolean): this;
/**
* Get mouse interactions enabled or disabled.
* @returns Mouse interactions state
* @public
*/
getPointerEvents(): boolean;
addEventListener(type: 'dispose', listener: (event: DisposeEvent, info: unknown) => unknown, options?: LCJSAddEventListenerOptions): void;
addEventListener(type: 'visiblechange', listener: (event: VisibleChangedEvent, info: unknown) => unknown, options?: LCJSAddEventListenerOptions): void;
addEventListener(type: 'valuechange', listener: (event: CustomTickValueChangeEvent, info: unknown) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener(type: 'dispose', listener: (event: DisposeEvent, info: unknown) => unknown): void;
removeEventListener(type: 'visiblechange', listener: (event: VisibleChangedEvent, info: unknown) => unknown): void;
removeEventListener(type: 'valuechange', listener: (event: CustomTickValueChangeEvent, info: unknown) => unknown): void;
}
/**
* Abstract base class for Point Series 3D implementations.
*
* Implements full series logic except for Point Style API and segment length.
* @public
*/
declare abstract class AbstractPointSeries3D<Style extends TriangulatedPoints3D | PixelatedPoints3D> extends Series3D implements XYZDataInput {
/**
* Append a single `XYZ` coordinate or list of coordinates into the *series*.
*
* ```ts
* // Example, add single data point.
* pointSeries.add({ x: 0, y: 0, z: 0 })
*
* // Example, add list of data points.
* pointSeries.add([
* { x: 0, y: 100, z: 50 },
* { x: 10, y: 50, z: 150 },
* { x: 20, y: 75, z: 100 },
* ])
* ```
*
* Performance-wise, it is more efficient to call `add` just 1 time with an Array of points, instead of calling `add` several times with 1 point at a time.
*
* Data points can also be grouped with extra optional properties:
* - `size` | Point size.
* - `color` | Point color.
* - `value` | Point value for dynamic coloring.
*
* {@link setPointStyle} method documentation contains detailed information about each of these features and how to use them.
*
* @param points - Single XYZ coordinate or list of coordinates.
* @returns Object itself for fluent interface.
* @public
*/
add(data: Point3D | Point3D[]): this;
/**
* Clear all previously pushed data points from the *series*.
*
* ```ts
* // Example usage
* pointSeries.clear()
* ```
*
* @returns Object itself for fluent interface.
* @public
*/
clear(): this;
/**
* Get amount of points that series currently has.
* @returns Number of points
* @public
*/
getPointAmount(): number;
addEventListener<K extends keyof ChartComponentEventMap>(type: K, listener: (event: ChartComponentEventMap[K], info: SolveResult3D) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener<K extends keyof ChartComponentEventMap>(type: K, listener: (event: ChartComponentEventMap[K], info: SolveResult3D) => unknown): void;
}
/**
* Class for animation handling
* @param delta - Delta time from start of animation
* @param eases - Array of Eases animation functions
* @param nextAnimations - Queue of future animations
* @param action - Function for handling of interframe modification
* @param duration - Animation duration in milliseconds
* @param easing - Ease animation function factory
* @public
*/
declare class Animation_2 {
/**
* @public
*/
delta: number;
/**
* @public
*/
eases: Array<Ease>;
/**
* @public
*/
readonly nextAnimations: Animation_2[];
/**
* @public
*/
readonly values: Array<[number, number]>;
/**
* @public
*/
readonly action: AnimationFrameCallback;
/**
* @public
*/
readonly duration: number;
/**
* @public
*/
readonly easing: AnimationEasing;
/**
* Starts an animation
* @returns Object itself for fluent interface
* @public
*/
start(): this;
/**
* Add animations which has to be executed subsequently
* @param animations - Subsequent Animation or Array of them
* @returns Object itself for fluent interface
* @public
*/
addNextAnimations(animations: Animation_2 | Array<Animation_2>): this;
/**
* Add and create animation which has to be executed subsequently
* @param values - Array of start and end animation values
* @param action - Function for handling of interframe modification
* @returns new Animation
* @public
*/
NextAnimation(values: Array<[number, number]>, action: AnimationFrameCallback, duration?: number, easing?: AnimationEasing): Animation_2;
/**
* Finish current animation and start the next one on the sequence
* @param emitEvents - Flag that tells whether the function should emit any events
* @returns Future animations or undefined
* @public
*/
finish(emitEvents?: boolean): Animation_2 | undefined;
/**
* Finish all animations
* @param emitEvents - Flag that tells whether the function should emit any events
* @public
*/
finishAll(emitEvents?: boolean): void;
/**
* Get is animation over and there are no queued animations
* @public
*/
isOver: () => boolean;
/**
* Get final value of queued animations
* @returns Final values of the animations
* @public
*/
getFinalValues(): number[];
/**
* Get time until all queued animations will finish
* @public
*/
getTimeUntilFinish(): number;
addEventListener<K extends keyof AnimatorEventMap>(type: K, listener: (event: AnimatorEventMap[K], info: unknown) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener<K extends keyof AnimatorEventMap>(type: K, listener: (event: AnimatorEventMap[K], info: unknown) => unknown): void;
}
export { Animation_2 as Animation }
/**
* Interface for {@link AnimationEasing}.
*
* See {@link AnimationEasings} for a collection of default options.
* @param start - Starting value of the animation
* @param end - End value of the animation
* @param duration - Animation Duration in milliseconds
* @public
*/
export declare type AnimationEasing = (start: number, end: number, duration: number) => Ease;
/**
* {@link AnimationEasing} collection to use with {@link Animator}.
* @public
*/
export declare const AnimationEasings: {
linear: (start: number, end: number, duration: number) => Ease;
easeIn: (start: number, end: number, duration: number) => Ease;
easeOut: (start: number, end: number, duration: number) => Ease;
ease: (start: number, end: number, duration: number) => Ease;
/**
* Scroll easing factory for logarithmic axes.
*/
logarithmic: (base: number) => AnimationEasing;
};
/**
* Type of Animation Factory
* @param values - Array of start and end animation values
* @param action - Function for handling of interframe modification
* @param customDuration - Override default duration of animation
* @public
*/
export declare type AnimationFactory = (values: Array<[number, number]>, action: AnimationFrameCallback, customDuration?: number) => Animation_2;
/**
* Function for handling of interframe modification
* @param values - Values calculated by Ease function
* @public
*/
export declare type AnimationFrameCallback = (values: Array<number>) => void;
/**
* Animator factory.
*
* **Unpolished API, usage can be copied from Examples set but it is not further encouraged**.
* @param afterUpdate - After all animation update callback
* @param fps - Desirable frame rate for all animations (Limited to around 60fps by browser)
* @public
*/
export declare const Animator: (afterUpdate: () => void, fps?: number) => (duration?: number, easing?: AnimationEasing) => AnimationFactory;
/**
* Interface of events trackable by {@link Animator.addEventListener} and the respective Event types.
* @public
*/
export declare interface AnimatorEventMap {
start: {};
end: {
nextAnimation?: Animation_2;
};
everyAnimationEnd: {
nextAnimation?: Animation_2;
};
allAnimationEnd: {};
}
/**
* Application deployment license information.
* @public
*/
export declare interface AppDeploymentLicenseInformation {
/**
* Company name
*/
company: string;
/**
* Application title
*/
appTitle: string;
[key: string]: string;
}
/**
* Rectangular area in cartesian coordinates
* @param x - X position of the area
* @param y - Y position of the area
* @param width - Width of the area
* @param height - Height of the area
*/
declare interface Area {
x: number;
y: number;
width: number;
height: number;
}
/**
* Interface for a data-structure which represents a 2-dimensional location, but with one of the planes
* having two values instead of just one to create an area in the given location.
*
* Used to supply points to AreaRangeSeries.
* @public
*/
export declare interface AreaPoint {
/**
* Position of Point.
*/
readonly position: number;
/**
* High value of Point in the given position.
*/
readonly high: number;
/**
* Low value of Point in the given position.
*/
readonly low: number;
}
/**
* Implementation of *SeriesXY* for visualizing a collection of progressive *AreaPoints*
* (which consist of one *X*-value, and two *Y*-values) by filling the area between the points two *Y*-values.
*
* Composed of the areas *fill* and *border*, both of which have two possible styles:
* - **High**
* - **Low**. This is used for *AreaPoints* whose *high*-value is **lower** than the *low*-value.
*
* *AreaRangeSeries* are created with {@link ChartXY.addAreaRangeSeries}.
* @public
*/
export declare class AreaRangeSeries extends RangeSeries implements ObservableXYData<AreaPoint>, DataInputHighLow {
solveNearest(from: CoordinateClient, solveMode?: SolveNearestMode): SolveResultXY | undefined;
/**
* Add point or array of points to the dataset.
*
* ```ts
* // Example syntax
* AreaRangeSeries.add({ position: 0, low: 10, high: 100 })
*
* AreaRangeSeries.add([
* { position: 0, low: 100, high: 200 },
* { position: 10, low: 50, high: 220 },
* { position: 20, low: 75, high: 250 },
* ])
* ```
*
* **Data gaps**
*
* When using {@link LineSeries}, {@link AreaSeries}, {@link AreaRangeSeries} or other series types which connect data points together,
* the connections between specific data points can be removed by adding gap data points.
*
* A gap data point is specified by using `Number.NaN`.
*
* ```ts
* // Example, data gap syntax.
* AreaRangeSeries.add([
* { position: 0, low: 10, high: 30 },
* { position: 1, low: 12, high: 32 },
* { position: 2, low: Number.NaN, high: Number.NaN },
* { position: 10, low: 15, high: 38 },
* { position: 11, low: 20, high: 35 },
* { position: 12, low: 18, high: 30 }
* ])
* ```
* @param points - Single new point or an array of new points.
* @returns Series itself for fluent interface.
* @public
*/
add(data: AreaPoint | AreaPoint[]): this;
/**
* Add two individual Arrays, one for high values, and another for low values.
* @param arrayHigh - Array of High values.
* @param arrayLow - Array of Low values. Length should be equal to length of *array1*.
* @returns Object itself for fluent interface.
* @public
*/
addArraysHighLow(arrayHigh: number[] | TypedArray, arrayLow: number[] | TypedArray, step?: number, start?: number): this;
/**
* Set fill style of high area of the Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaRangeSeries.setHighFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaRangeSeries.setHighFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaRangeSeries.setHighFillStyle(emptyFill)
* ```
*
* Supports following styles:
* - {@link SolidFill}
* - {@link LinearGradientFill}
* - {@link RadialGradientFill}
* - {@link PalettedFill} (x and y lookup modes)
* - {@link emptyFill}
*
* @param value - Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
* @returns Series itself for fluent interface.
* @public
*/
setHighFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Set fill style of low area of the Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaRangeSeries.setLowFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaRangeSeries.setLowFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaRangeSeries.setLowFillStyle(emptyFill)
* ```
*
* Supports following styles:
* - {@link SolidFill}
* - {@link LinearGradientFill}
* - {@link RadialGradientFill}
* - {@link PalettedFill} (x and y lookup modes)
* - {@link emptyFill}
*
* @param value - Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
* @returns Series itself for fluent interface.
* @public
*/
setLowFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Set style of the Series high stroke.
*
* Example usage:
*```javascript
* // Specified LineStyle
* AreaRangeSeries.setHighStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
* // Changed thickness
* AreaRangeSeries.setHighStrokeStyle((solidLine) => solidLine.setThickness(5))
* // Hidden (emptyLine is not supported)
* AreaRangeSeries.setHighStrokeStyle(transparentLine)
* ```
* @param value - Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
* @returns Series itself for fluent interface.
* @public
*/
setHighStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Set style of the Series low stroke.
*
* Example usage:
*```javascript
* // Specified LineStyle
* AreaRangeSeries.setLowStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
* // Changed thickness
* AreaRangeSeries.setLowStrokeStyle((solidLine) => solidLine.setThickness(5))
* // Hidden (emptyLine is not supported)
* AreaRangeSeries.setLowStrokeStyle(transparentLine)
* ```
* @param value - Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
* @returns Series itself for fluent interface.
* @public
*/
setLowStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Get a current fill style used for the coloring of the high area in the series.
* @returns Current fill style used for the coloring of the high area in the series.
* @public
*/
getHighFillStyle(): FillStyle;
/**
* Get a current fill style used for the coloring of the low area in the series.
* @returns Current fill style used for the coloring of the low area in the series.
* @public
*/
getLowFillStyle(): FillStyle;
/**
* Get a current line style of a stroke used for the coloring of the high border in the series.
* @returns Current line style of a stroke used for the coloring of the high border.
* @public
*/
getHighStrokeStyle(): LineStyle;
/**
* Get a current line style of a border used for the coloring of the low border in the series.
* @returns Current line style of a border used for the coloring of the low border.
* @public
*/
getLowStrokeStyle(): LineStyle;
addEventListener<K extends keyof AreaRangeSeriesEventMap>(type: K, listener: (event: AreaRangeSeriesEventMap[K], info: SolveResultXY) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener<K extends keyof AreaRangeSeriesEventMap>(type: K, listener: (event: AreaRangeSeriesEventMap[K], info: SolveResultXY) => unknown): void;
}
/**
* Interface of events trackable by {@link AreaRangeSeries.addEventListener} and the respective Event types.
* @public
*/
export declare interface AreaRangeSeriesEventMap extends RangeSeriesEventMap {
}
/**
* Interface for supplying readonly configurations to a {@link AreaRangeSeries}.
* @public
*/
export declare interface AreaRangeSeriesOptions extends SeriesOptionsXY {
}
/**
* Object which can be attached to a Legend
* @public
*/
export declare interface Attachable {
/**
* Get component visibility.
*/
getVisible?: () => boolean;
/**
* Set component visibility.
*/
setVisible?: (visible: boolean) => unknown;
/**
* Get component name for legend entry.
*/
getName?: () => string;
}
/**
* Data structure of a territory of Australia.
* @public
*/
export declare interface AustraliaTerritory {
/**
* Name of the territory. Eq. 'Queensland'. This is case insensitive.
*/
name: string;
}
/**
* Interface for describing *auto dispose mode* of an UI element.
*
* Can be used to set a condition, where the UI element is automatically *disposed*, removing it from view.
* Use with {@link UIElement.setAutoDispose}.
*
* ```ts
* // Example, remove UI element when it is larger than 20% of viewport.
* UIElement.setAutoDispose({
* type: 'max-width',
* maxWidth: 0.20,
* })
* ```
* @public
*/
export declare type AutoDisposeMode = undefined | {
type: 'max-width';
maxWidth: number;
} | {
type: 'max-height';
maxHeight: number;
};
/**
* *Axis* is a child component of *ChartXY*. It defines a numeric range on a single plane (*X* or *Y*),
* that will be used to scale attached *Series* to the *ChartXY*s viewport.
*
* The default `Axis` can be referenced with {@link ChartXY.getDefaultAxisX} and {@link ChartXY.getDefaultAxisY}.
*
* `ChartXY` doesn't have a limit on number of *axes*. Additional *axes* can be created with {@link ChartXY.addAxisX} and {@link ChartXY.addAxisY}.
* Multiple *Axes* can be stacked on top of another, and *axes* can be positioned on either side of the *chart* (left, right, top, bottom, see {@link AxisOptions}).
*
* The visual components of *axis* are:
* - Title. By default *axis* has no title. It can be enabled with {@link Axis.setTitle}.
* - Axis line. A single horizontal line for *X axes*, and vertical line for *Y axes*. It can be styled with {@link Axis.setStrokeStyle}.
* - [Ticks](#axis-ticks). Labels that help understand the data visualized along an axis.
* - [Numeric ticks](#numeric-ticks)
* - [Datetime ticks](#datetime-ticks)
* - [Custom ticks](#custom-ticks)
*
* - [Highlighters](#axis-highlighters). Can be used to highlight positions or areas on an *axis*.
*
* See [Scrolling and interval configuration](#axis-automatic-scrolling-and-axis-intervals-configuration) for detailed information about management of *axis interval*.
*
* #### Axis Ticks
*
* Ticks are labels attached to the *axis line* that visualize the progression of values along the *axis*. A tick consists of three individually stylable parts:
* - Label (text)
* - Tick line.
* - Grid line.
*
* There are currently three different ways of managing axis ticks:
* 1. Automatic numeric ticks (default).
* 3. Automatic time ticks.
* 2. Automatic datetime ticks.
* 4. Custom ticks.
*
* ##### Numeric ticks
*
* Numeric ticks are enabled by default for all *axes*.
* They are designed for depicting numeric values of all magnitudes.
*
* Configuring the ticks is done with {@link Axis.setTickStrategy}.
*
* ```typescript
* Axis.setTickStrategy(AxisTickStrategies.Numeric, (strategy) => strategy
* // Configure NumericTickStrategy
* .setMinorFormattingFunction((tickPosition) => `X: ${tickPosition}`)
* .setMinorTickStyle((tickStyle: TickStyle) => tickStyle
* .setTickLength(12)
* .setTickPadding(2)
* )
* )
* ```
*
* Frequently used API:
*
* - {@link NumericTickStrategy.setMajorFormattingFunction} | set formatting of major ticks labels text.
* - {@link NumericTickStrategy.setMinorFormattingFunction} | set formatting of minor ticks labels text.
* - {@link NumericTickStrategy.setMajorTickStyle} | set style of major ticks.
* - {@link NumericTickStrategy.setMinorTickStyle} | set style of minor ticks.
*
* For full list of configuration API, see {@link NumericTickStrategy}.
*
* Examples showcasing *numeric axes*:
* - [Shared Axis example](https://lightningchart.com/lightningchart-js-interactive-examples/examples/lcjs-example-0007-sharedAxis.html)
*
* ##### Time ticks
*
* Time ticks are designed for depicting time ranges between hundreds of hours to individual nanoseconds.
*
* They are enabled, as well as configured, with {@link Axis.setTickStrategy}.
*
* ```typescript
* Axis.setTickStrategy(AxisTickStrategies.Time, (strategy) => strategy
* // Configure TimeTickStrategy
* .setMinorFormattingFunction((tickPosition) => `X: ${tickPosition}`)
* .setMinorTickStyle((tickStyle: TickStyle) => tickStyle
* .setTickLength(12)
* .setTickPadding(2)
* )
* )
* ```
*
* Frequently used API:
*
* - {@link TimeTickStrategy.setMajorTickStyle} | set style of major ticks.
* - {@link TimeTickStrategy.setMinorTickStyle} | set style of minor ticks.
*
* For full list of configuration API, see {@link TimeTickStrategy}.
*
* Examples showcasing `TimeTickStrategy`:
* - No listed examples as of yet.
*
* ##### Datetime ticks
*
* DateTime ticks are enabled, as well as configured, with {@link Axis.setTickStrategy}.
*
* ```typescript
* Axis.setTickStrategy(AxisTickStrategies.DateTime, (strategy) => strategy
* // Configure DateTimeTickStrategy
* .setMinorTickStyle((tickStyle: TickStyle) => tickStyle
* .setTickLength(12)
* .setTickPadding(2)
* )
* )
* ```
*
* Frequently used API:
* - {@link DateTimeTickStrategy.setMajorTickStyle} | set style of major ticks.
* - {@link DateTimeTickStrategy.setMinorTickStyle} | set style of minor ticks.
* - {@link DateTimeTickStrategy.setDateOrigin} | set date origin (required for most applications with zooming enabled).
*
* For full list of configuration API, see {@link DateTimeTickStrategy}.
*
* Examples showcasing *datetime axes*:
* - [Datetime Axis example](https://lightningchart.com/lightningchart-js-interactive-examples/examples/lcjs-example-0020-dateTimeAxis.html)
*
* ##### Custom ticks
*
* Automatic creation of ticks can be disabled with {@link Axis.setTickStrategy}:
*
* ```typescript
* // Disable automatic axis ticks.
* Axis.setTickStrategy(AxisTickStrategies.Empty)
* ```
*
* *Custom ticks* can be created with {@link Axis.addCustomTick}:
*
* ```typescript
* // Create custom ticks.
* for (let x = 0; x < 100; x += 10) {
* const tick = Axis.addCustomTick(UIElementBuilders.AxisTickMajor)
* }
* ```
*
* Frequently used `CustomTick` API:
* - {@link CustomTick.setValue} | configure position of tick on *axis*.
* - {@link CustomTick.setTextFormatter} | configure text displayed by tick label using a callback function.
* - {@link CustomTick.setTickLength} | configure length of tick line.
* - {@link CustomTick.setGridStrokeStyle} | style tick grid line.
* - {@link CustomTick.setMarker} | style tick label and/or tick line.
* - {@link CustomTick.dispose} | destroy tick permanently
*
* Examples showcasing *custom axis ticks*:
* - [Custom Axis Ticks example](https://lightningchart.com/lightningchart-js-interactive-examples/examples/lcjs-example-0011-customTicksScrolling.html)
*
* #### Axis automatic scrolling and Axis intervals configuration
*
* *Axis interval* is the range of data values that are visible on the *Axis*, they are referred to as *start* and *end*.
*
* By default, all *axes* fit the interval automatically to reveal all attached *series*. This behavior is called *fitting scroll strategy*.
*
* Automatic scrolling behavior can be controlled by selecting the *scroll strategy*, with {@link Axis.setScrollStrategy}:
*
* ```typescript
* // Select scrolling strategy.
* Axis.setScrollStrategy(AxisScrollStrategies.scrolling)
* ```
*
* For different options see {@link AxisScrollStrategies}
*
* Axis interval can be manually set with {@link Axis.setInterval}:
*
* ```typescript
* // Axis start = 0, end = 100.
* Axis.setInterval({ start: 0, end: 100 })
* ```
*
* Setting Axis interval stops axis scrolling by default. To specify axis interval and keep auto scrolling enabled, use the optional `stopAxisAfter` parameter:
* ```typescript
* Axis.setInterval({ start: 0, end: 100, stopAxisAfter: false })
* ```
*
* Frequently used methods:
* - {@link Axis.setScrollStrategy} | configure automatic scrolling behavior.
* - {@link Axis.setInterval} | configure active axis interval.
* - {@link Axis.getInterval} | get active axis interval.
* - {@link Axis.fit} | fit axis interval to contain all attached series boundaries.
* - {@link Axis.stop} | stop automatic scrolling momentarily.
* - {@link Axis.onIntervalChange} | trigger a custom action whenever axis scale changes.
* - {@link Axis.setAnimationScroll} | Enable/disable automatic scrolling animation.
*
* ##### Axis interval limitations
*
* *LightningChart JS* is easily the market leader in zooming interactions and visualization resolution, and contrary to most chart libraries, we are open about axis zooming limits;
*
* "Axis zooming limits" refer to constraints on the magnitude of Axis interval, which is calculated as `Math.abs(end - start)`.
* When the limit is reached, the Axis will not be able to zoom in and out further by programmatic calls ({@link Axis.setInterval}) or user interactions.
*
* The constraints are primarily affected by two factors:
* - Active *Tick Strategy*.
* - Axis type.
*
* Both of these factors have their own definition of support minimum and maximum Axis interval, and when combined the lesser values are used.
* For example, if *Tick Strategy* would allow min interval of `0.001` and *Axis type* `0.005`, effectively the min interval would be `0.001`.
*
* The Axis interval limits imposed by each available *Tick Strategy* are documented at {@link AxisTickStrategies}.
*
* The Axis interval limits imposed by *Axis Type* are documented at {@link AxisOptions}.
*
* #### Axis highlighters
*
* Two kinds of *highlighters* are supported:
* - {@link ConstantLine} | highlights a position on the Axis.
* - {@link Band} | highlights a range on the Axis.
*
* Examples showcasing *axis highlighters*:
* - [Bands and ConstantLines example](https://lightningchart.com/lightningchart-js-interactive-examples/examples/lcjs-example-0701-bandsConstantlines.html)
* @public
*/
export declare class Axis extends GenericAxis<LinearScale1D | LogarithmicScale1D, DimensionalAxisStrategy, Tick, _UpdateInputAxisXY, _TickPlottingVariablesXY, _TickXYInfo, _UpdateOutputAxisXY> implements Validatable, StylableAxisLine, Hideable, HideableEvents, Interactable, Highlightable {
/**
* @public
*/
readonly isX: boolean;
/**
* @public
*/
readonly isY: boolean;
setHighlight(highlight: boolean | number): this;
getHighlight(): number;
/**
* Configure whether axis should keep axis tick labels in its boundaries.
* This is done by shifting the label so that it fits (doesn't go outside axis bounds).
* This effect can cause labels to overlap with each other, but generally it does not occur in normal scenarios.
* This is enabled by default.
*
* ```ts
* // Example, disable
* chart.axisX.setKeepTickLabelsInAxisBounds(false)
* ```
* @param enabled - Boolean
* @returns Object itself
* @public
*/
setKeepTickLabelsInAxisBounds(enabled: boolean): this;
/**
* Check whether axis should keep axis tick labels in its boundaries.
* This is done by shifting the label so that it fits (doesn't go outside axis bounds).
* This effect can cause labels to overlap with each other, but generally it does not occur in normal scenarios.
* This is enabled by default.
* @returns Boolean
* @public
*/
getKeepTickLabelsInAxisBounds(): boolean;
/**
* Set *TickStrategy* of *Axis*.
*
* The *TickStrategy* defines the positioning and formatting logic of *Axis* ticks
* as well as the style of created ticks.
*
* **Example usage**:
*
* **DateTime Axis**:
* ```javascript
* Axis.setTickStrategy( AxisTickStrategies.DateTime )
* ```
*
* **Disable automatic ticks completely**:
* ```javascript
* Axis.setTickStrategy( AxisTickStrategies.Empty )
* ```
*
* **Customized TickStrategy**:
* ```javascript
* Axis.setTickStrategy( AxisTickStrategies.Numeric, ( tickStrategy: NumericTickStrategy ) => tickStrategy
* .setNumericUnits( true )
* .setMajorTickStyle( ( tickStyle ) => tickStyle
* .setLabelFont( ( font ) => font
* .setWeight( 'bold' )
* )
* )
* )
* ```
*
* **Type table for optional second parameter ('styler')**:
*
* | tickStrategy | styler |
* | :------------- | :------------------------------------------------------------ |
* | 'Numeric' | `( tickStrategy: **NumericTickStrategy** ) => tickStrategy` |
* | 'Time' | `( tickStrategy: **TimeTickStrategy** ) => tickStrategy` |
* | 'DateTime' | `( tickStrategy: **DateTimeTickStrategy** ) => tickStrategy` |
* | 'Empty' | `undefined` |
*
*
* @param tickStrategy - Selected TickStrategy.
* See {@link AxisTickStrategies} for a collection of options.
* @param styler - Optional callback that can be used to customize the *TickStrategy*.
* The type of supplied *TickStrategy* object depends on what was supplied to 'tickStrategy' parameter;
* See the above method documentation for a value table.
* @returns Object itself for fluent interface.
* @public
*/
setTickStrategy<TickStrategy extends TickStrategyType>(tickStrategy: TickStrategy, styler?: TickStrategyStyler<TickStrategyParameters, TickStrategy>): this;
/**
* Get the currently used tick strategy
* @public
*/
getTickStrategy(): TickStrategyType;
/**
* Add a highlighter Band to the Axis.
* A Band can be used to highlight an interval on the Axis.
*
* @param onTop - Is Band rendered above Series, or below. Default to above.
* @returns Band object.
* @public
*/
addBand(options?: {
onTop?: boolean;
legend?: LegendEntryOptions;
}): Band;
/**
* Add a highlighter ConstantLine to the Axis.
* A ConstantLine can be used to highlight a specific value on the Axis.
*
* @param onTop - Is ConstantLine rendered above Series, or below. Default to above.
* @returns ConstantLine object.
* @public
*/
addConstantLine(options?: {
onTop?: boolean;
legend?: LegendEntryOptions;
}): ConstantLine;
/**
* Get all Highlighters of Axis.
* @returns array of highlighters
* @public
*/
getHighlighters(): Highlighter[];
/**
* Set Axis *thickness* as pixels.
*
* For X Axis, this means Axis height.
*
* For Y Axis, this means Axis width.
*
* ```
* // Example syntax,
* Axis.setThickness( 60 )
* ```
*
* @param thickness - Explicit thickness of Axis as pixels.
* @returns Object itself for fluent interface.
* @public
*/
setThickness(thickness: number | undefined): this;
/**
* Configure Axis *thickness* min/max limits as pixels.
*
* The thickness of Axis is calculated based on ticks, title, axis line, etc.
* By setting `min` and/or `max` thickness, the size allocated for Axis can be restricted to desired limits.
*
* For X Axis, this means Axis height.
*
* For Y Axis, this means Axis width.
*
* ```
* // Example syntax, set axis to at least 100 px thick, but allow larger axis thickness if labels are large, or other such scenario.
* Axis.setThickness({ min: 100, max: undefined })
* ```
*
* @param thickness - Explicit thickness of Axis as pixels.
* @returns Object itself for fluent interface.
* @public
*/
setThickness(thickness: {
min?: number;
max?: number;
}): this;
/**
* Get Axis *thickness* min/max limits as pixels.
*
* For X Axis, this means Axis height.
*
* For Y Axis, this means Axis width.
*
* By default, Axis has no thickness restrictions, so `getThickness` should return `{ min: undefined, max: undefined }`.
*
* @returns Actively configured Axis thickness limits as pixels.
* @public
*/
getThickness(): {
min: number | undefined;
max: number | undefined;
};
/**
* Used in phase 1: after we know what ticks will be displayed, formulate generic information for chart layout calculations (e.g. XY layout for XY charts).
*/
protected _getAbstractUpdateResult(input: _UpdateInputAxisXY, ticksInfo: Map<Tick, _TickXYInfo>, updatedTicks: boolean): _UpdateOutputAxisXY;
/**
* Configure length of axis.
* E.g. height for Y axis, width for X axis.
*
* Axis length can be set in two ways:
* - Relative length
* - Length as pixels
*
* **Relative length**
*
* Set relative size of axis in its own "Stack".
*
* For example, if you have a chart with 2 stacked Y axes, by default they will have equal heights.
* By altering axis relative size, you can adjust how the chart height is distributed between these two axes.
*
* By default, every axis length is set to `{ relative: 1 }`
*
* ```ts
* // Example scenario
* const chart = lightningChart().ChartXY()
* const y1 = chart.getDefaultAxisY().setTitle('Y 1').setLength({ relative: 2 })
* const y2 = chart.addAxisY({ iParallel: 0, iStack: 1 }).setTitle('Y 2')
* ```
*
* **Length as pixels**
*
* Hardcoded length as pixels.
*
* ```ts
* // Example scenario
* const chart = lightningChart().ChartXY()
* const y1 = chart.getDefaultAxisY().setTitle('Y 1').setLength({ pixels: 200 })
* const y2 = chart.addAxisY({ iParallel: 0, iStack: 1 }).setTitle('Y 2')
* ```
* @public
*/
setLength(length: {
pixels: number;
} | {
relative: number;
}): this;
/**
* Get relative size of axis in its own "Stack".
*
* For example, if you have a chart with 2 stacked Y axes, by default they will have equal heights.
* By altering axis relative size, you can adjust how the chart height is distributed between these two axes.
*
* Defaults always to `1`.
* @public
*/
getLength(): {
pixels: number;
} | {
relative: number;
};
/**
* Add empty space at either end of the axis, without affecting the relative size of the Axis.
*
* ```ts
* // Example, 20 pixels margin at "start" side of Axis.
* Axis.setMargins(20, 0)
* ```
*
* @public
*/
setMargins(startMarginPx: number, endMarginPx: number): this;
/**
* Get axis margins as set with {@link setMargins}.
*
* @public
*/
getMargins(): {
start: number;
end: number;
};
/**
* Get index of Axis in its own "Stack".
* This simply retrieves same value which was used (or defaulted) when axis was created.
* See {@link AxisOptions.iStack}.
* @public
*/
getStackIndex(): number;
/**
* Get index of Axis in its own "Parallel".
* This simply retrieves same value which was used (or defaulted) when axis was created.
* See {@link AxisOptions.iParallel}.
* @public
*/
getParallelIndex(): number;
/**
* Pan scale by pixel value delta.
*
* Used by ChartXY as well as Axis itself.
* @param amount - Amount to shift scale of axis in pixels
* @public
*/
pan(amount: pixel, opts?: {
releaseScrollingAxisIfLiveReached?: boolean;
}): void;
/**
* Zoom scale from/to a position.
*
* Used by ChartXY as well as Axis itself.
* @param referencePosition - Position to zoom towards or from