@lightningchart/lcjs
Version:
A high-performance charting library.
1,333 lines (1,332 loc) • 2.28 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;
/**
* Set auto-fit strategy of Cursor.
* Affects logic of automatic fitting of Cursors ResultTable to the screen.
* @param autoFitStrategy - AutoFitStrategy factory or undefined to disable auto-fitting
* @returns Object itself for fluent interface
* @public
*/
setAutoFitStrategy(autoFitStrategy?: AutoFitStrategyFactory): this;
/**
* Get is auto-fit enabled.
* Affects logic of automatic fitting of Cursors ResultTable to the screen.
* @returns Boolean flag whether auto-fit is enabled
* @public
*/
getAutoFitStrategy(): 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;
}
/**
* 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;
/**
* Match legend entry style to reflect components own style.
* @param matchStyleExactly - By default, entries are assigned a smooth looking gradient based on the component color. If this flag is `true`, then this is skipped, and exact component solid fill is used instead.
* @public
*/
styleLegendEntry(entry: LegendBoxEntry, matchStyleExactly?: boolean): void;
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;
/**
* Match legend entry style to reflect components own style.
* @param matchStyleExactly - By default, entries are assigned a smooth looking gradient based on the component color. If this flag is `true`, then this is skipped, and exact component solid fill is used instead.
* @public
*/
styleLegendEntry(entry: LegendBoxEntry, matchStyleExactly?: boolean): void;
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 {
}
/**
* Abstract super class for following series types:
*
* - {@link AreaSeriesPositive}
* - {@link AreaSeriesNegative}
* - {@link AreaSeriesBipolar}
* @public
* @deprecated Deprecated in v6.1.0 in favour of `PointLineAreaSeries`. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare abstract class AreaSeries extends RangeSeries implements ObservableXYData<Point>, DataInputY {
/**
* Append a single `XY` coordinate or list of `XY` coordinates into the *series*.
*
* ```ts
* // Example syntax
* AreaSeries.add({ x: 0, y: 100 })
*
* AreaSeries.add([
* { x: 0, y: 100 },
* { x: 10, y: 50 },
* { x: 20, y: 75 },
* ])
* ```
*
* For more methods of appending data into series, see:
*
* - {@link addArrayY} | Append only Y coordinates.
*
* **Data gaps**
*
* When using {@link LineSeries}, {@link AreaSeries} 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` as either X or Y coordinate.
*
* ```ts
* // Example, data gap syntax.
* AreaSeries.add([
* { x: 0, y: 10 },
* { x: 1, y: 12 },
* { x: 2, y: Number.NaN },
* { x: 3, y: 15 },
* { x: 4, y: 20 }
* ])
* ```
*
* @param points - Single XY coordinate or list of coordinates.
* @returns Object itself for fluent interface.
* @public
*/
add(points: Point | Point[]): this;
/**
* Append new data points into the series by only supplying Y coordinates.
*
* ```ts
* // Example syntax, number array
* AreaSeries.addArrayY([ 5, 1, 2, 0 ])
* ```
*
* This method supports binary data input by using *Typed arrays*.
* If your data comes in any binary format, then using the typed array syntax is recommended for best performance.
*
* ```ts
* // Example syntax, typed array (Float32)
* const float32Array = new Float32Array(4)
* float32Array[0] = 5
* float32Array[1] = 1
* float32Array[2] = 2
* float32Array[3] = 0
* AreaSeries.addArrayY(float32Array)
* ```
*
* Each Y coordinate will be paired with an automatically generated X coordinate.
*
* By default, this continues from the last data point in the series.
* However, the behavior of assigning X coordinates can be controlled with the optional `step` and `start` parameters.
*
* For more methods of appending data into series, see:
*
* - {@link add} | Append XY coordinates.
*
* **Data gaps**
*
* When using {@link LineSeries}, {@link AreaSeries} 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.
* AreaSeries.addArrayY([ 10, 12, Number.NaN, 15, 20 ])
* ```
*
* @param arrayY - Array of Y-values.
* @param step - Optional step between each X coordinate. Defaults to 1.
* @param start - Optional value for first generated X-value. If undefined, will continue after last point's X value in series,
* or 0 if there are no points in series.
* @returns Object itself for fluent interface.
* @public
*/
addArrayY(arrayY: number[], step?: number, start?: number): this;
addEventListener<K extends keyof AreaSeriesEventMap>(type: K, listener: (event: AreaSeriesEventMap[K], info: SolveResultXY) => unknown, options?: LCJSAddEventListenerOptions): void;
removeEventListener<K extends keyof AreaSeriesEventMap>(type: K, listener: (event: AreaSeriesEventMap[K], info: SolveResultXY) => unknown): void;
}
/**
* Implementation of *SeriesXY* for visualizing a collection of progressive *Points* by
* filling the area between the points *Y*-values and a static *baseline* value.
*
* This type of *AreaSeries* shows data on both sides of the *baseline*, and it has individual styles for each side:
* *positive* and *negative*. Each side is also composed of the areas *fill* and *border*.
*
* *AreaSeriesBipolar* are created with {@link ChartXY.addAreaSeries} and selecting *AreaSeriesTypes.Bipolar*.
* @public
* @deprecated Deprecated in v6.1.0 in favour of `PointLineAreaSeries`. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare class AreaSeriesBipolar extends AreaSeries {
solveNearest(from: CoordinateClient, solveMode?: SolveNearestMode): SolveResultXY | undefined;
/**
* Stores the last processed data-point.
* It is required for construction of junction points to handle intersections with the baseline accurately.
*/
private _lastHandledPoint?;
/**
* Set positive area style of Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaSeriesBipolar.setPositiveFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaSeriesBipolar.setPositiveFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaSeriesBipolar.setPositiveFillStyle(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
*/
setPositiveFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Set negative area style of Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaSeriesBipolar.setNegativeFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaSeriesBipolar.setNegativeFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaSeriesBipolar.setNegativeFillStyle(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
*/
setNegativeFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Set positive stroke style of Series.
*
* Example usage:
*```javascript
* // Specified LineStyle
* AreaSeriesBipolar.setPositiveStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
* // Changed thickness
* AreaSeriesBipolar.setPositiveStrokeStyle((solidLine) => solidLine.setThickness(5))
* // Hidden (emptyLine is not supported)
* AreaSeriesBipolar.setPositiveStrokeStyle(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
*/
setPositiveStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Set negative stroke style of Series.
*
* Example usage:
*```javascript
* // Specified LineStyle
* AreaSeriesBipolar.setNegativeStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
* // Changed thickness
* AreaSeriesBipolar.setNegativeStrokeStyle((solidLine) => solidLine.setThickness(5))
* // Hidden (emptyLine is not supported)
* AreaSeriesBipolar.setNegativeStrokeStyle(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
*/
setNegativeStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Get a current fill style used for the coloring of the positive area in the series.
* @returns Current fill style used for the coloring of the positive area in the series.
* @public
*/
getPositiveFillStyle(): FillStyle;
/**
* Get a current fill style used for the coloring of the negative area in the series.
* @returns Current fill style used for the coloring of the negative area in the series.
* @public
*/
getNegativeFillStyle(): FillStyle;
/**
* Get a current line style of a stroke used for the coloring of the positive stroke in the series.
* @returns Current line style of a stroke used for the coloring of the positive stroke.
* @public
*/
getPositiveStrokeStyle(): LineStyle;
/**
* Get a current line style of a border used for the coloring of the negative border in the series.
* @returns Current line style of a border used for the coloring of the negative border.
* @public
*/
getNegativeStrokeStyle(): LineStyle;
/**
* Match legend entry style to reflect components own style.
* @param matchStyleExactly - By default, entries are assigned a smooth looking gradient based on the component color. If this flag is `true`, then this is skipped, and exact component solid fill is used instead.
* @public
*/
styleLegendEntry(entry: LegendBoxEntry, matchStyleExactly?: boolean): void;
}
/**
* Interface of events trackable by {@link AreaSeries.addEventListener} and the respective Event types.
* @public
*/
export declare interface AreaSeriesEventMap extends RangeSeriesEventMap, BasicSeriesEventMap {
}
/**
* The abstract class implements the most part of general logic for specific area series types.
* These series use only one fill style and only one border.
* All the derivative series implements their own logic for processing incoming data.
* @public
* @deprecated Deprecated in v6.1.0 in favour of `PointLineAreaSeries`. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare abstract class AreaSeriesMonopolar extends AreaSeries {
/**
* Set fill style of Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaSeriesMonopolar.setFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaSeriesMonopolar.setFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaSeriesMonopolar.setFillStyle(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
*/
abstract setFillStyle(fill: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Set stroke style of Series.
*
* Supported line styles:
* - {@link SolidLine}
* - {@link DashedLine}
* - {@link emptyLine}
*
* Example usage:
*```javascript
* // Specified SolidLine
* AreaSeriesMonopolar.setStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
* // Changed thickness
* AreaSeriesMonopolar.setStrokeStyle((solidLine) => solidLine.setThickness(5))
* // Hidden (emptyLine is not supported)
* AreaSeriesMonopolar.setStrokeStyle(transparentLine)
* ```
* @param value - Either a SolidLine object or a function, which will be used to create a new SolidLine based on current value.
* @returns Series itself for fluent interface.
* @public
*/
setStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this;
/**
* Get a current fill style used for the coloring of an area in the series.
* @returns Current fill style used for the coloring of an area in the series.
* @public
*/
abstract getFillStyle(): FillStyle;
/**
* Get a current style of a stroke used for the coloring of a series border.
* @returns Current style of a stroke used for the coloring of a border.
* @public
*/
getStrokeStyle(): LineStyle;
}
/**
* Implementation of *SeriesXY* for visualizing a collection of progressive *Points* by
* filling the area between the points *Y*-values and a static *baseline* value.
* This type of *AreaSeries* only shows data that is **below the baseline**.
*
* Composed of the areas *fill* and *border*.
*
* *AreaSeriesNegative* are created with {@link ChartXY.addAreaSeries} and selecting *AreaSeriesTypes.Negative*.
* @public
* @deprecated Deprecated in v6.1.0 in favour of `PointLineAreaSeries`. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare class AreaSeriesNegative extends AreaSeriesMonopolar {
solveNearest(from: CoordinateClient, solveMode?: SolveNearestMode): SolveResultXY | undefined;
/**
* Set fill style of Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaSeriesNegative.setFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaSeriesNegative.setFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaSeriesNegative.setFillStyle(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
*/
setFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Get a current fill style used for the coloring of an area in the series.
* @returns Current fill style used for the coloring of an area in the series.
* @public
*/
getFillStyle(): FillStyle;
/**
* Match legend entry style to reflect components own style.
* @param matchStyleExactly - By default, entries are assigned a smooth looking gradient based on the component color. If this flag is `true`, then this is skipped, and exact component solid fill is used instead.
* @public
*/
styleLegendEntry(entry: LegendBoxEntry, matchStyleExactly?: boolean): void;
}
/**
* Interface can be used to define the X and Y Axis that a series should be attached to,
* a reference number used for comparison and type of area series.
* @public
* @deprecated Deprecated in v6.1.0 along with the respective series type. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare interface AreaSeriesOptions<AreaType extends AreaSeriesTypes> extends SeriesOptionsXY {
/**
* A fixed reference number.
*/
baseline?: number;
/**
* Defines the type of area series. Selected option can enable/disable specific APIs!
*
* See {@link AreaSeriesTypes} for a collection of options.
*/
type?: AreaType;
}
/**
* Implementation of *SeriesXY* for visualizing a collection of progressive *Points* by
* filling the area between the points *Y*-values and a static *baseline* value.
* This type of *AreaSeries* only shows data that is **above the baseline**.
*
* Composed of the areas *fill* and *border*.
*
* *AreaSeriesPositive* are created with {@link ChartXY.addAreaSeries} and selecting *AreaSeriesTypes.Positive*.
* @public
* @deprecated Deprecated in v6.1.0 in favour of `PointLineAreaSeries`. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare class AreaSeriesPositive extends AreaSeriesMonopolar {
solveNearest(from: CoordinateClient, solveMode?: SolveNearestMode): SolveResultXY | undefined;
/**
* Set fill style of Series.
*
*Example Usage:
*```javascript
* // Specified FillStyle
* AreaSeriesPositive.setFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
* // Changed transparency
* AreaSeriesPositive.setFillStyle((solidFill) => solidFill.setA(80))
* // Hidden
* AreaSeriesPositive.setFillStyle(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
*/
setFillStyle(value: FillStyle | ImmutableMutator<FillStyle>): this;
/**
* Get a current fill style used for the coloring of an area in the series.
* @returns Current fill style used for the coloring of an area in the series.
* @public
*/
getFillStyle(): FillStyle;
/**
* Match legend entry style to reflect components own style.
* @param matchStyleExactly - By default, entries are assigned a smooth looking gradient based on the component color. If this flag is `true`, then this is skipped, and exact component solid fill is used instead.
* @public
*/
styleLegendEntry(entry: LegendBoxEntry, matchStyleExactly?: boolean): void;
}
/**
* Collection of *AreaSeries* implementations.
*
* Used when creating an *AreaSeries* with {@link ChartXY.addAreaSeries}.
* Selected option tells what the returned *Series* type will be - different *Series* types can have different *API*s !
*
* - Select AreaSeriesTypes.Positive to show only area above the baseline.
* - Select AreaSeriesTypes.Negative to show only area below the baseline.
* - Select AreaSeriesTypes.Both to show both areas from both sides of the baseline.
* @public
* @deprecated Deprecated in v6.1.0 along with the respective series type. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
*/
export declare const AreaSeriesTypes: {
/**
* Type of *AreaSeries* that only shows data that is **above the baseline**.
*/
Positive: typeof AreaSeriesPositive;
/**
* Type of *AreaSeries* that only shows data that is **below the baseline**.
*/
Negative: typeof AreaSeriesNegative;
/**
* Type of *AreaSeries* that shows data on both sides of baseline.
*
* Has individual styles for positive/negative areas.
*/
Bipolar: typeof AreaSeriesBipolar;
};
/**
* Available Area Series types
* @public
*