Protected _isFlag that is set whenever Panel or any scale is resized.
Will be handled before plot to update scale and trigger resize event just once per frame.
Readonly backgroundInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on chart background.
// Example syntax
chart.background.addEventListener('click', (event) => {
console.log(event)
})
For syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Please note that many chart types have a separate "series background" (area enclosed by axes), which has its own separate events. This is accessed via seriesBackground property.
Readonly coordsSelector for "client" Coordinate System.
This references the coordinate system used in HTML.
It starts at top left of the web page and is measured in pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from top.
JavaScript events are tracked and HTML elements are positioned in the client coordinate system.
This selector can be used for translating client coordinates to other coordinate systems and vice versa. For example, in order to:
See translateCoordinate for more detailed use case information and example usage.
Readonly coordsSelector for "relative" Coordinate System.
This coordinate system is relative to the bottom left corner of the Control (chart/dashboard/etc.), and is measured as pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from bottom.
This selector can be used for two purposes:
Positioning LCJS UI elements in pixels:
// Position UI element in pixels by supplying `Control.coordsRelative` as its positioning system.
const textBox = Control.addUIElement(UIElementBuilders.TextBox, Control.coordsRelative)
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 100, y: 20 })
Translations between coordinate systems:
Use with translateCoordinate method to translate coordinates from "relative" to another coordinate system.
Readonly engineInterface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).
Readonly seriesInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on chart series background (area enclosed by axes).
// Example syntax
chart.seriesBackground.addEventListener('click', (event) => {
console.log(event)
})
For more syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Readonly titleInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on chart title.
// Example syntax
chart.title.addEventListener('click', (event) => {
console.log(event)
})
For syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Scale for panel area in percentages (0-100).
While it is not functionally equal to this, using coordsRelative coordinate system is preferred (more confidence for long term support).
Convenience getter property that does the same as getDefaultAxisX.
Convenience getter property that does the same as getDefaultAxisY.
Selector for default Axis Coordinate System, measured along the active default X and Y axes of the chart.
This is a convenience selector that is equal to following declaration:
{ x: ChartXY.getDefaultAxisX(), y: ChartXY.getDefaultAxisY() }
This selector can be used for translating Axis coordinates to other coordinate systems and vice versa. For example, in order to:
See translateCoordinate for more detailed use case information and example usage.
Convenience getter property that does the same as getDefaultAxisX.
Convenience getter property that does the same as getDefaultAxisY.
Method for adding a new AreaRangeSeries to the chart. This series type is used for visualizing bands of data between two curves of data.
AreaRangeSeries is optimized for large amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to AreaRangeSeries.
Readonly configuration:
Some properties of AreaRangeSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addAreaRangeSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to AreaRangeSeriesOptions.
New series.
Optional options: AreaRangeSeriesOptionsOptional object with readonly configuration arguments for AreaRangeSeries.
Method for adding a new AreaSeries to the chart. This series type is used for visualizing area between a static base line and supplied curve data.
AreaSeries is optimized for large amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to AreaSeries.
Readonly configuration:
Some properties of AreaSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addAreaSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to AreaSeriesOptions.
Return type:
AreaSeries return type depends on supplied readonly configuration! Specifically, type.
Configuration type |
Return series type |
|---|---|
undefined or omitted |
AreaSeriesPositive |
AreaSeriesTypes.Positive |
AreaSeriesPositive |
AreaSeriesTypes.Negative |
AreaSeriesNegative |
AreaSeriesTypes.Bipolar |
AreaSeriesBipolar |
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: AreaSeriesOptions<AreaType>Optional object with readonly configuration arguments for AreaSeries.
Add new X Axis to the Chart.
Example usage:
ChartXY.addAxisX({
opposite: true,
})
ChartXY.addAxisX({
type: 'logarithmic',
base: 10,
})
ChartXY.addAxisX({
type: 'logarithmic',
base: 'natural',
})
NOTE: Not all series types support logarithmic axes! Attaching a non-supported Series will crash the application.
List of series that support logarithmic Axes:
List of series that do not support logarithmic Axes:
Axis object.
Optional opts: AxisOptionsOptional AxisOptions object for specifying Axis configurations that can't be changed during runtime.
Add new Y Axis to the Chart.
Example usage:
ChartXY.addAxisY({
opposite: true,
})
ChartXY.addAxisY({
type: 'logarithmic',
base: 10,
})
ChartXY.addAxisY({
type: 'logarithmic',
base: 'natural',
})
NOTE: Not all series types support logarithmic axes! Attaching a non-supported Series will crash the application.
List of series that support logarithmic Axes:
List of series that do not support logarithmic Axes:
Axis object.
Optional opts: AxisOptionsOptional AxisOptions object for specifying Axis configurations that can't be changed during runtime.
Method for adding a new BoxSeries to the chart. This series type is used for visualizing data groups through quartiles.
To learn more about its features and usage, refer to BoxSeries.
Readonly configuration:
Some properties of BoxSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addBoxSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to BoxSeriesOptions.
New series.
Optional options: BoxSeriesOptionsOptional object with readonly configuration arguments for BoxSeries.
Add manually controlled Cursor object. These have exactly same functions as built-in cursors but they can be freely controlled by application logic.
const cursor = chart.addCursor()
Styling works same as built-in cursors (e.g. setCursor).
Position is set using setPosition method and displayed content using setResultTable(table => table.setContent(...))
For more details, see Developer documentation > Features > Cursor > Manual cursors
Cursor object.
Builder for cursor. Can be used to tweak a handful of properties which can't be changed during runtime.
Method for adding a new EllipseSeries to the chart. This series type visualizes a collection of ellipses.
To learn more about its features and usage, refer to EllipseSeries.
Readonly configuration:
Some properties of EllipseSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addEllipseSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to EllipseSeriesOptions.
New series.
Optional options: EllipseSeriesOptionsOptional object with readonly configuration arguments for EllipseSeries.
Add callback function to be triggered when specified event is fired.
// Example syntax
object.addEventListener('click', (event) => {
console.log(event)
})
Some classes also report extra information about the interacted object with the second parameter:
// Most series share information about interacted data point
series.addEventListener('click', (event, info) => {
console.log(info)
})
Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:
// Example this listener will only fire once
object.addEventListener('click', (event) => {})
Each class has its own list of supported events.
Some events are from HTML standard (click, pointerdown, etc.),
while others are own events from LightningChart JS (dispose, resize, etc.)
To find what events are available, you can try following:
TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.K type parameter extends.Callback function that is triggered when event is fired.
Optional options: LCJSAddEventListenerOptionsOptional extra configuration options.
Add a Series for visualizing a Heatmap Grid with a static column and grid count. Has API for fast modification of cell values.
HeatmapGridSeries is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:
1000x1000) is cold started in ~0.3 seconds.1000x1000) is re-populated (change data set) in ~0.050 seconds.4000x4000) is cold started in ~2.0 seconds.4000x4000) is re-populated (change data set) in ~0.5 seconds.HeatmapGridSeries max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS.
If by increasing the amount of columns and rows you encounter suddenly weak performance, it is likely that there is not enough RAM memory available.
To learn more about its features and usage, refer to HeatmapGridSeriesIntensityValues.
Readonly configuration:
Some properties of HeatmapSeries can only be configured when it is created. Some of these arguments are mandatory, while some are optional.
They are wrapped in a single object parameter:
// Example,
const series = ChartXY.addHeatmapGridSeries({
columns: 100,
rows: 100
})
To learn about available properties, refer to HeatmapGridSeriesOptions.
Heatmap data format is specified with heatmapDataType: 'intensity' property;
in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a
Color look up table (LUT).
For scrolling heatmap grids, see addHeatmapScrollingGridSeries.
Heatmap Grid Series.
Configuration parameters for Heatmap Grid Series.
Add a Series for visualizing a Heatmap Grid, with API for pushing data in a scrolling manner (append new data on top of existing data).
HeatmapScrollingGridSeries is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:
rows: 2048, 1000 columns/s) runs consistently and smoothly with 60 FPS and no stuttering. CPU usage stays easily below 40%.rows: 4096, 2000 columns/s) runs consistently and smoothly with 60 FPS and minor stuttering.HeatmapScrollingGridSeries max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS.
If performance suddenly plummets at some approximate data threshold, then it is likely that there is not enough RAM available.
Use data cleaning configuration and suitable Axis intervals to adjust to your hardware limitations.
To learn more about its features and usage, refer to HeatmapScrollingGridSeriesIntensityValues.
Readonly configuration:
Some properties of ScrollingHeatmapSeries can only be configured when it is created. Some of these arguments are mandatory, while some are optional.
They are wrapped in a single object parameter:
// Example,
const series = ChartXY.addHeatmapGridSeries({
resolution: 100
})
To learn about available properties, refer to HeatmapScrollingGridSeriesOptions.
Heatmap data format is specified with heatmapDataType: 'intensity' property;
in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a
Color look up table (LUT).
For static heatmap grids, see addHeatmapGridSeries.
Scrolling Heatmap Grid Series.
Configuration parameters for Heatmap Grid Series.
Add a legendbox.
Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.
The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.
Legendbox alignment:
Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:
// Default (vertical) LegendBox.
const legendBox = ChartXY.addLegendBox()
// Horizontal LegendBox.
const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
Custom Legendbox positioning:
By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).
A custom location can be configured with UIElement API:
Position coordinate system is specified when creating legendbox.
addLegendBox( LegendBoxBuilders.VerticalLegendBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.coordsRelative )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
For more information on LegendBox features, and usage, see LegendBox.
LegendBox
Optional builder: UILegendBoxBuilder<InternalBackground>LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional scale: UserScaleDefinitionOptional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in pixels.
Method for adding a new LineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a continuous stroke. LineSeries is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to LineSeries.
Readonly configuration:
Some properties of LineSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const lineSeries = ChartXY.addLineSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to LineSeriesOptions.
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: LineSeriesOptionsOptional object with readonly configuration arguments for LineSeries.
Method for adding a new OHLCSeries to the chart. This series type is used for visualizing trading figures in large quantities and/or with real-time data input.
OHLC Series is only usable with a Trading license for LightningChart JS
To learn more about its features and usage, refer to OHLCSeries.
Readonly configuration:
Some properties of OHLCSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addOHLCSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to OHLCSeriesOptions.
New series.
Optional options: OHLCSeriesOptions<Type>Optional object with readonly configuration arguments for OHLCSeries.
Beta
Api to add OSM menu to the chart
A 2d array which describes the type of buttons to be added and their positions (row, column).
Optional osmButtonShape: OnScreenMenuButtonShapeOptional parameter to specify the shape of the on-screen menu icons. This feature is considered experimental and might be changed in minor release.
Add series that can visualize any combination of Lines, Points and Area filling. Supports both real-time and static data visualization.
Also supports different preprocessing options (step/spline/disabled).
Some properties of PointLineAreaSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addPointLineAreaSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PointLineAreaSeriesOptions. Examples:
Different data visualizations can be achieved simply by changing the style of the series.
// Area series
const series = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
// Point-Line series
const series = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
.setAreaFillStyle(emptyFill)
// Point series
const series = ChartXY.addPointLineAreaSeries({ dataPattern: null })
.setAreaFillStyle(emptyFill)
.setStrokeStyle(emptyLine)
// Step series
const series = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
.setAreaFillStyle(emptyFill)
.setCurvePreprocessing({ type: 'step', step: 'middle' })
// Spline series
const series = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
.setAreaFillStyle(emptyFill)
.setCurvePreprocessing({ type: 'spline' })
More documentation can be found at:
Optional options: PointLineAreaSeriesOptionsMethod for adding a new PointLineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a continuous stroke and configurable markers over each coordinate. PointLineSeries is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointLineSeries.
Readonly configuration:
Some properties of PointLineSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const pointLineSeries = ChartXY.addPointLineSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PointLineSeriesOptions.
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: PointLineSeriesOptionsOptional object with readonly configuration arguments for PointLineSeries.
Method for adding a new PointSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with configurable markers over each coordinate. PointSeries is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointSeries.
Readonly configuration:
Some properties of PointSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const pointSeries = ChartXY.addPointSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PointSeriesOptions.
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: PointSeriesOptionsOptional object with readonly configuration arguments for PointSeries.
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
Method for adding a new PolygonSeries to the chart. This series type visualizes a collection of polygons.
To learn more about its features and usage, refer to PolygonSeries.
Readonly configuration:
Some properties of PolygonSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const polygonSeries = ChartXY.addPolygonSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to PolygonSeriesOptions.
New series.
Optional options: PolygonSeriesOptionsOptional object with readonly configuration arguments for PolygonSeries.
Method for adding a new RectangleSeries to the chart. This series type visualizes a collection of rectangles.
To learn more about its features and usage, refer to RectangleSeries.
Readonly configuration:
Some properties of RectangleSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const rectSeries = ChartXY.addRectangleSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to RectangleSeriesOptions.
New series.
Optional options: RectangleSeriesOptionsOptional object with readonly configuration arguments for RectangleSeries.
Method for adding a new SegmentSeries to the chart. This series type visualizes a collection of line segments (A -> B).
To learn more about its features and usage, refer to SegmentSeries.
Readonly configuration:
Some properties of SegmentSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const series = ChartXY.addSegmentSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to SegmentSeriesOptions.
New series.
Optional options: SegmentSeriesOptionsOptional object with readonly configuration arguments for SegmentSeries.
Method for adding a new SplineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a smoothed curve stroke + point markers over each data point.
To learn more about its features and usage, refer to SplineSeries.
Readonly configuration:
Some properties of SplineSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const splineSeries = ChartXY.addSplineSeries({
// Select shape of point markers.
pointShape: PointShape.Circle
})
To learn about available properties, refer to SplineSeriesOptions.
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: SplineSeriesOptionsOptional object with readonly configuration arguments for SplineSeries.
Method for adding a new StepSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates),
with a stepped stroke + point markers over each data point.
Possible step modes are: 'before', 'middle' and 'after'.
To learn more about its features and usage, refer to StepSeries.
Readonly configuration:
Some properties of StepSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const stepSeries = ChartXY.addStepSeries({
// Select shape of point markers.
pointShape: PointShape.Circle
})
To learn about available properties, refer to StepSeriesOptions.
NOTE: Using addPointLineAreaSeries is strongly recommended instead!
New series.
Deprecated in v6.1.0 in favour of addPointLineAreaSeries. For more information, see https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Optional options: StepSeriesOptionsOptional object with readonly configuration arguments for StepSeries.
Method for adding a new TextSeries to the chart. This series type can be used to display a set of Text objects inside the series area.
To learn more about its features and usage, refer to TextSeries.
Readonly configuration:
Some properties of TextSeries can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const rectSeries = ChartXY.addTextSeries({
// Specify non-default X Axis to attach series to.
xAxis: myNonDefaultAxisX
})
To learn about available properties, refer to TextSeriesOptions.
New series.
Optional options: TextSeriesOptionsOptional object with readonly configuration arguments for TextSeries.
Add a stand-alone UIElement using a builder.
Example usage:
addUIElement( UIElementBuilders.TextBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addUIElement( UIElementBuilders.TextBox, chart.coordsRelative )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].
Beta
Clear zoom state history which is used by restorePreviousZoomState as well as any built-in "restorePrevious" user interactions.
// Example usage, set axis interval and ensure any previous zoom state history is deleted.
chart.axisX.setInterval({ start: 0, end: 100 })
chart.clearPreviousZoomStateHistory()
The order of above operations is important.
Object itself.
Introduced in v7.0.0. API may change according to user feedback.
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.
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
Object itself for fluent interface
An array of axis. Sorted to increasing order based on iStack in case of multiple axis results.
Rest ...axisPositions: AxisPosition[]array of axis positions which have to be included to the output empty array indicates all of positions are included
Get current Cursor during Axis animations state.
Axis Animations are Axis Scale changes that are animated, such as Zooming and Scrolling done by using API
(such as Axis.setInterval) or by using the mouse to click & drag on the Chart.
True if Cursor is enabled during Axis Animations, false if not.
Get active cursor formatter.
Cursor formatter.
Get current cursor behavior.
SolveNearestMode or undefined
Convenience method to get a tuple of the Charts default X and Y axes.
Equal to [ChartXY.getDefaultAxisX(), ChartXY.getDefaultAxisY()]
Intended for conveniently applying same modifications to both X and Y axes.
[chart.getDefaultAxisX(), chart.getDefaultAxisY()]
Beta
Get chart layout information.
This is a getter variant of ChartXYLayoutChangedEvent. In most cases, ChartXYLayoutChangedEvent is more convenient as it fires whenever the layout changes.
For more information about the returned value and use cases, please read ChartXYLayoutChangedEvent.
// Example syntax
chart.getLayout().then(layout => {
console.log(layout)
})
Promise of layout information.
Introduced in v7.0.0. API may be changed according to user feedback.
Get Array of all legend boxes created using addLegendBox method.
This will not include any legend boxes that were destroyed with dispose method.
Array of legend boxes.
Get series of a chart
Array of series
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get size of control as pixels.
For stand-alone component, the size will be equal to the size of its containing HTML <div> (Control.engine.container)
For component inside Dashboard, the size will only include the component itself, so size can be less than the size of containing HTML <div>.
Object with x and y properties { x: number, y: number }, where both are pixel values.
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get font of Chart title.
FontSettings object
Get position of ChartXY title.
Title position.
Beta
Not to be confused with GlowEffect
Introduced in v7.0. API may be changed according to user feedback and reports.
Beta
Get currently active user interaction scheme. This does NOT return the last value supplied to setUserInteractions. Rather, it considers the current structure of the chart, all built-in defaults as well as overrides supplied by the user and returns the currently used interaction scheme.
ChartXYUserInteractions
Introduced in v7.0.0. API may change according to user feedback.
Remove event listener added using addEventListener.
The expected argument should be the exact same callback function that was supplied using addEventListener:
// Basic example syntax
const listener = () => {}
obj.addEventListener('click', listener)
obj.removeEventListener('click', listener)
// Basic boilerplate of custom interaction when user drags on an object
obj.addEventListener('pointerdown', (eventDown) => {
let prevCoord = eventDown
const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
prevCoord = eventMove
console.log(delta, eventMove.clientX, eventMove.clientY)
}
const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerup', handlePointerUp)
}
window.addEventListener('pointermove', handlePointerMove)
window.addEventListener('pointerup', handlePointerUp)
})
Listener that was added using addEventListener.
Beta
Restore previous zoom state of all Axes.
ChartXY automatically follows the state of its axes. The previous state can be restored using this method.
// Example usage
chart.restorePreviousZoomState()
// Example, all properties
chart.restorePreviousZoomState({
whitelist: [specificAxis],
animate: 1000, // 1000 ms animation
stopAxisAfter: true
})
Object itself.
Introduced in v7.0.0. API may change according to user feedback.
Optional opts: { Optional extra control options.
Capture rendered state in an image file. Prompts the browser to download the created file.
NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.
Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Example usage:
// Download 'screenshot.png'
Panel.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Panel.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Panel.saveToFile('fileName', 'image/jpeg', 0.50)
If 'type' is not supported by browser, an Error will be thrown.
Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
Optional type: stringA DOMString indicating the image format. The default format type is image/png.
Optional encoderOptions: numberA Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.
Disable/Enable all animations of the Chart.
Chart itself for fluent interface.
Boolean value to enable or disable animations.
Set FillStyle of chart background.
// Example usage,
ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of chart background border stroke.
// Example usage,
ChartXY.setBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle or function which mutates the active LineStyle.
Style chart cursor using a callback function. Available style APIs can depend on the type of chart.
// Example syntax
chart.setCursor((cursor) => cursor
.setGridStrokeXStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))
)
See Cursor2D, CursorXY or Cursor3D for all available methods for configuring the cursor.
Example usage:
// Example 1, disable Y Axis tick marker & grid line.
chart.setCursor((cursor) => cursor
.setTickMarkerYVisible(false)
.setGridStrokeYStyle(emptyLine)
)
// Example 2, style cursor ResultTable.
chart.setCursor((cursor) => cursor
.setResultTable((resultTable) => resultTable
.setOrigin(UIOrigins.LeftTop)
.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
.setTextFont((font) => font
.setSize(12)
.setFamily('sans-serif')
)
.setBackground((background) => background
.setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
)
)
)
// Example 3, style cursor TickMarker X.
chart.setCursor((cursor) => cursor
.setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
.setTextFont((font) => font.setWeight('bold'))
.setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
.setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
)
)
Object itself for fluent interface.
Disable/Enable Cursor during Axis Animations.
Axis Animations are Axis Scale changes that are animated, such as Zooming and Scrolling done by using API
(such as Axis.setInterval) or by using the mouse to click & drag on the Chart.
Chart itself for fluent interface.
Boolean value to enable or disable Cursor during Axis Animations.
Set cursor formatting, controlling the text displayed in built-in cursor.
chart.setCursorFormatting((_, hit, hits) => {
return [
['Cursor pointing at'],
[hit.series], // returning a series will display the series color and its name automatically.
['X', '', hit.axisX.formatValue(hit.x)], // utilizing axis formatValue is useful for considering active zoom level and type of axis
['Y', '', hit.y.toFixed(2)], // empty string '' results in gap between cells
[{ text: 'Example', font: { weight: 'bold' }, fillStyle: fillRed }] // any cell can also be styled individually
]
})
Before overriding default cursor formatting, it is recommended to check if using setUnits or configuring Axis cursor formatting would be enough.
In order to use series specific data properties (e.g. Heatmap sample "intensity"),
you should use type guards to assert the type of the SolveResult:
// Example of using type guard in cursor formatter
Chart.setCursorFormatting((chart, hit, hits) => {
if (!isHitHeatmap(hit)) return undefined
return [hit.intensity.toFixed(1)]
})
More details in Developer documentation (Features > Cursor).
Object itself
Callback function for cursor formatting.
Set cursor behavior. This affects both built-in cursor as well as any custom cursor connected using setCustomCursor.
For possible values see SolveNearestMode.
Additionally, you can supply undefined value to disable cursor completely.
// Example, show 1 nearest solve result only
chart.setCursorMode('show-nearest')
// Example, disable cursor
chart.setCursorMode(undefined)
// Example, enable interpolation
chart.setCursorMode('show-all-interpolated')
Object itself
SolveNearestMode or undefined
Connect a custom cursor to the chart. This has 2 effects:
Custom cursors are still affected by other cursor behavior controls such as:
setCursorEnabledThe custom cursor can be anything defined by the user, such as:
// Example of plugging in a custom cursor
chart.setCustomCursor((event) => {
if (event) {
// Display custom cursor
} else {
// Hide custom cursor
}
})
Object itself
undefined to restore built-in cursor or callback function that should be triggered to display custom cursor.
Set padding around Chart in pixels.
// Example 1, specify complete padding (four sides).
ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
// Example 2, specify only single padding.
ChartXY.setPadding({ right: 64 })
Object itself
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set FillStyle of series background (area behind series).
// Example usage,
ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of series background border stroke.
// Example usage,
ChartXY.setSeriesBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle or function which mutates the active LineStyle.
Set the state for all Series in the Chart to highlight on mouse hover.
Object itself for fluent interface.
True if all Series should be highlighted on mouse hover, false if not.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set fill style of Chart Title.
Example usage:
// Create a new style
Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
Chart.setTitleFillStyle(emptyFill)
Chart itself
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Set font of Chart Title.
Example usage:
// Create a new FontSettings
Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))
Chart itself
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example 1, specify vertical margins
ChartXY.setTitleMargin({ top: 0, bottom: 10 })
// Example 2, specify margins for all sides with same value for Title.
ChartXY.setTitleMargin(40)
Chart itself for fluent interface
Gap after the chart title in pixels.
Set position of ChartXY title.
// Example usage
ChartXY.setTitlePosition(ChartXYTitlePositionOptions.LeftTop)
// Or
ChartXY.setTitlePosition('left-top')
For available options, see ChartXYTitlePosition
To tweak title position, you may use setTitleMargin
Title position.
Beta
Not to be confused with GlowEffect
Introduced in v7.0. API may be changed according to user feedback and reports.
Beta
Configure user interactions from a set of preset options.
Without any explicit configuration, the charts select the default user interaction scheme based on available information, such as axis types, attached series and data supplied to series.
The setUserInteraction methods allow explicitly configuring the used interaction scheme.
This is not a definitive operation, but rather modifies the current state.
For example, modifying pan interaction does not affect the state of any other interactions.
// Example, LMB pan, RMB rectangle zoom
chart.setUserInteractions({
pan: {
lmb: { drag: true },
rmb: false,
},
rectangleZoom: {
lmb: false,
rmb: {},
},
})
// Example, disable default "restore default view" interaction, enable "restore previous view"
chart.setUserInteractions({
restoreDefault: false,
restorePrevious: {
doubleClick: true,
ctrlZ: true
},
})
// Example, disable all interactions
chart.setUserInteractions(undefined)
// Example, restore default interactions
chart.setUserInteractions({})
Object itself.
Introduced in v7.0.0. API may change according to user feedback.
Option with any set of properties of ChartXYUserInteractions or undefined to disable all interactions.
Set fillStyle for zooming rectangle when zooming.
Object itself
FillStyle or mutator to modify existing one
Set stroke style for zooming rectangle when zooming.
Object itself
LineStyle or mutator to modify existing one
Method for solving the nearest data point from all existing series relative to a given coordinate on screen.
// Example syntax
chart.onSeriesBackgroundMouseClick((_, event) => {
const solve1 = chart.solveNearest(event, 'show-nearest') // solve nearest location (1)
const solve2 = chart.solveNearest(event, 'show-all') // solve all locations
})
SolveResult object.
Optional from: CoordinateClientReference coordinate on web page as client coordinates. This can for example be directly an Event object. undefined results in using last registered mouse location.
Optional control for solve nearest behavior
Beta
Swap the positions of two Axes.
Only supports swapping between same planes of Axis. For example, two X axes, or two Y axes.
Currently also doesn't support swapping between different modes of opposite axes. For example, between X axis on left and X axis on right.
Object itself Released as beta feature in v5.2.0 feature may still change according to user feedback and experiences.
Translate a coordinate in HTML client coordinate system to another coordinate system.
(1) arbitrary X and Y axes coordinate system:
ChartXY.onSeriesBackgroundMouseClick((_, event) => {
const locationAxis = chart.translateCoordinate(event, chart.coordsAxis)
// locationAxis tells the clicked location along Axis interval (in same value range as data points).
})
chart.coordsAxis is a convenience selector for the active default axes (X and Y). Arbitrary set of X and Y axes can be selected like this:
const locationAxis = chart.translateCoordinate(event, { x: myAxisX, y: myAxisY })
(2) relative control coordinate system:
const locationClient = { clientX: document.body.clientWidth * 0.2, clientY: document.body.clientHeight * 0.5 }
const locationRelative = chart.translateCoordinate(locationClient, chart.coordsRelative)
// locationRelative is in pixels relative to bottom left corner of the chart
Relative coordinates can be used for positioning LightningChart JS UI components:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
// Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 20, y: 20 })
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Translate a coordinate to another coordinate system.
| Supported INPUT coordinate systems | Syntax | Syntax 2 |
|---|---|---|
| arbitrary X and Y axes | chart.coordsAxis |
{ x: Axis, y: Axis } |
| relative coordinates | chart.coordsRelative |
| Supported OUTPUT coordinate systems | Syntax | Syntax 2 |
|---|---|---|
| arbitrary X and Y axes | chart.coordsAxis |
{ x: Axis, y: Axis } |
| relative coordinates | chart.coordsRelative |
|
| HTML client coordinates | chart.coordsClient |
Most common example use cases:
(1) Translate a coordinate from axes to HTML client coordinates
const locationAxis = { x: 2, y: 5 }
const locationClient = chart.translateCoordinate(locationAxis, chart.coordsAxis, chart.coordsClient)
Client coordinates can be used to absolute position HTML elements using CSS, for example.
myHTMLElement.style.position = 'absolute'
myHTMLElement.style.left = locationClient.clientX
myHTMLElement.style.top = locationClient.clientY
(2) Translate a coordinate from HTML client coordinates to axes
ChartXY.onSeriesBackgroundMouseClick((_, event) => {
const locationAxis = chart.translateCoordinate(event, chart.coordsAxis)
// locationAxis tells the clicked location along Axis interval (in same value range as data points).
})
(3) Translate a coordinate from axes to relative chart coordinates
const locationAxis = { x: 2, y: 5 }
const locationRelative = chart.translateCoordinate(locationAxis, chart.coordsAxis, chart.coordsRelative)
Relative coordinates can be used for positioning LightningChart JS UI components:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
// Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 20, y: 20 })
(4) Translate a coordinate from relative chart coordinates to axes
const locationRelative = { x: 0, y: 0 }
const locationAxis = chart.translateCoordinate(locationRelative, chart.coordsRelative, chart.coordsAxis)
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Translate a coordinate in HTML client coordinate system to relative coordinates within the component.
const locationClient = { clientX: document.body.clientWidth * 0.2, clientY: document.body.clientHeight * 0.5 }
const locationRelative = chart.translateCoordinate(locationClient, chart.coordsRelative)
// locationRelative is in pixels relative to bottom left corner of the chart
Relative coordinates can be used for positioning LightningChart JS UI components:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
// Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 20, y: 20 })
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Translate a coordinate from relative control coordinates to HTML client coordinate system.
// 10 pixels left and 20 pixels up from controls bottom left corner
const locationRelative = { x: 10, y: 20 }
const locationClient = chart.translateCoordinate(locationRelative, chart.coordsRelative, chart.coordsClient)
Client coordinates can be used to absolute position HTML elements using CSS, for example.
myHTMLElement.style.position = 'absolute'
myHTMLElement.style.left = locationClient.clientX
myHTMLElement.style.top = locationClient.clientY
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Chart type for visualizing data between two dimensions, X and Y. It has built-in Axis functionality, and supports a large set of series types.
ChartXYcan be created in two different ways - to learn more about creation time configuration ofChartXY, please refer to:ChartXY features
ChartXYalways has at least one X and Y axes.The default
Axiscan be referenced with getDefaultAxisX and getDefaultAxisY. See Axis for features of axis.ChartXYdoesn't have a limit on number of axes. Additional axes can be created with addAxisX and 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 AxisOptions).ChartXYsupports a variety of different series types, each with their own method of data visualization. Series are created withChartXY.add...Seriesmethods, for example:When created, a series is always attached to a pair of X and Y Axes. The Axes can be specified by user, or the chart default Axes will be used.
ChartXYhas built-in cursor functionality for displaying data on user interaction above charts. This can be controlled using:ChartXYhas built-in legend box functionality for listing the series names in a user interface. The legend box also provides additional logic, like hiding selected series by clicking on the legend box, and visualizing color look-up tables (LUT) in applications where they are used.Legend box is added using addLegendBox.
ChartXYhas a built-in title component, which can be configured using setTitle.ChartXYcontains two separate background components:Custom UI elements can be placed on
ChartXYin same way as all other charts, using addUIElement.Other APIs worthy of mention:
ChartXYcan be configured with setPadding.ChartXYcan be removed permanently with dispose.