Angular interval object defines the minimum and maximum interval in degrees.
Interface for AnimationEasing.
See AnimationEasings for a collection of default options.
Type of Animation Factory
Function for handling of interframe modification
Available Area Series types
Interface for specifying Axis (XY) configurations that can't be changed after creation of the Axis.
Example usage:
ChartXY({
defaultAxisY: {
opposite: true,
}
}) ChartXY({
defaultAxisX: {
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:
Type of a BoxSeriesFormatter function. Defines what Cursor ResultTables show.
Mutator function that is used for modifying a Cursor during runtime.
Interface for function which specifies CustomTick text.
Type union of supported methods of defining a formatting behavior for DateTime TickStrategy.
1. Intl.DateTimeFormatOptions:
Use JavaScript API for formatting logic by supplying a Intl.DateTimeFormatOptions object. Example usage:
// 'January 2015'
{ year: 'numeric', month: 'long' }For complete documentation of valid keys and values, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
2. Custom formatting function:
Specify custom formatting logic by supplying a function that returns a string. Example usage:
( value, range ) => {
// 'value' = number position of tick along the *Axis*.
// 'range' = *FormattingRange* object that can be used to find the total range of the *Axis*, if needed.
// Return *string*.
return "any string"
}
( value ) => {
// JS *Date* API can be used to interpret numeric *Axis* positions as *UTC Date/Time*, exposing a multitude of handy methods.
const date = new Date( value )
return date.toLocaleTimeString()
}JS Date documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Type definition for a dynamic mouse style setting. This allows for mouse styles that depend on situation.
Type of dimension for engine; can be a tuple of boundaries, a single static dimension or undefined for container size. When using a tuple to specify boundaries [min, max], actual size for engine will be the size of its container clamped to the specified pixel boundaries. Any of the values inside the tuple can be undefined. Using a single number will set a static size for engine dimension, meaning no resizing of engine will take effect.
Interface that can be used to configure rendering Engine of LCJS charts and dashboards.
Commonly used properties:
Example usage:
// Example 1, create chart without specifying DOM container. LCJS will automatically append a <div> in the document.
// Recommended for testing, mainly.
const chart = LightningChart.ChartXY({}) // Example 2, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
const chart = LightningChart.ChartXY({
// Argument can be either *element id* or actual reference to the HTML element.
container: 'my-chart-div'
})Interface for a function which builds ResultTable content when pointing at a FigureSeries.
Type for styler function for Figure
Type definition for [[FontSettings.style]] property.
Type definition for [[FontSettings.weight]] property.
Type definition for a pure formatting function.
The formatter is supplied a numeric value, and it formats it into a string, that can be displayed on an Axis tick, for example.
Possible Shape types for parts of a Slice.
Event handler for gauge angle interval changed
Possible Shape types for parts of a Slice.
Type of a mutator function for abstract, immutable object. Function provides functionality for creating a new object based on an existing one.
Interface for a function which builds ResultTable content when pointing at a IntensitySeries.
Interval change event listener.
Interface defines a LUT lookup table configurations.
Optional configuration options that can be supplied when adding entries to a LegendBox.
Optional builder for custom entry
Optional flag that determines whether clicking the LegendBoxEntry will dispose the Attached objects
Type union of LineStyle types supported by LineSeries3D.
Equal to that of 2D lines.
Type union of possible values for 'lookUpProperty' configuration of a PalettedFill.
Points to a property to be used when picking colours from a Look Up Table.
Use alongside PalettedFill and LUT.
Generic multi-dimensional array of specified type.
Event handler for mouse drag
Event handler for mouse drag start
Event handler for mouse drag
Event handler for mouse move
Event handler for mouse wheel
Type of a mutator function for abstract object. Function provides functionality for modifying an object.
Type of styler function for OHLC figures
Interface for a function which builds ResultTable content when pointing at an OHLCSeries.
Available OHLC Series types
Interface for a data-structure which represents a measurement of four sides. Has number properties for:
This data-structure is mainly used for specifying Chart paddings and UIElement paddings/margins.
Duplicate of Margin.
Type of an abstract Palette function. NOTE: It is common for applications dealing with Palettes to assume that they are continuous, meaning that when supplied an overflowing index, it will return loop back to start.
Type of an abstract Palette factory.
Possible Shape types for parts of a Slice.
Interface for a function which builds ResultTable content when pointing at a PolarSeries.
Possible Shape types for parts of a Slice.
Interface for a function which builds ResultTable content when pointing at a RangeSeries.
Interface that represents content displayable by a ResultTable.
Currently simply a grid of strings, but in the future this could be extended to contain images or such.
Interface for a function which builds ResultTable content when pointing at a SeriesXY.
Type of function which is used to format text of Slice Labels. It is a function which generates a string based on a Slice along with some additional information.
See SliceLabelFormatters-collection for quick access to some example implementations.
Use with [[SlicedCharts.setLabelFormatter]]
Example usage:
// Use a default implementation
SlicedCharts.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue)
// Use a custom implementation
SlicedCharts.setLabelFormatter((slice, relativeValue) => slice.getValue() + ' €')Type of function which is used to sort Slices of a Chart with Slices. It is a comparator function used with JavaScript API: Array.sort.
See SliceSorters collection for quick access to some example implementations.
Use with [[SlicedCharts.setSliceSorter]]
Example usage:
// Use a default implementation
SlicedCharts.setSliceSorter(SliceSorters.SortByValueDescending)
// Use a custom implementation
SlicedCharts.setSliceSorter((a, b) => a.getValue() - b.getValue())Type of an axis label strategy function. Defines how axis labels are aligned.
Type of a scale label strategy function. Defines how scale labels are aligned.
Interface for a function which builds ResultTable content when pointing at a SpiderSeries.
Type union of different tick levels of DateTime TickStrategy.
Great tick(s): The greatest tick of DateTime Axis. These are not visible, and are only used to synchronize positioning of Major and Minor ticks. There are separate "Visible Great ticks" that are implemented as Independent Tick Levels.
Major ticks: The main tick type.
Minor ticks: Ticks placed in between Major ticks.
Event handler for pointer event (touch)
Type of function for styling a generic UIElement.
Type definition for a mouse style setting. This tells how mouse should look when hovering over an UIElement.
For a collection of mouse styles, see MouseStyles.
Interface for builder for UITick.
Type union for supported ways for users to define a Scale for positioning UI elements and Legend Boxes.
Value change event listener.
Ordered tuple that contains values for:
Type of Series that ZoomBandChart uses internally.
Type of a function that is used to override the style of all Series created by ZoomBandChart.
Singleton object which indicates that component should not have fill color.
When emptyFill is used, the area that would be filled does NOT trigger mouse / touch -events (if this is desired, use a transparent SolidFill instead).
emptyFill Usage:
Use emptyFill with:
setFillStyle methods:
// Example
PointSeries.setPointFillStyle(emptyFill) // Example, construct a SolidLine.
const lineStyle = new SolidLine({
thickness: 1,
fillStyle: emptyFill
})Related information:
For more fill styles, see:
Singleton object which specifies that a line should not be rendered.
When emptyLine is used, the configured line does NOT trigger mouse / touch -events (if this is desired, use a transparent SolidLine instead).
emptyLine Usage:
Use emptyLine as argument of:
setStrokeStyle methods:
// Example
LineSeries.setStrokeStyle(emptyLine)Related information:
For more line styles, see:
TickStyle singleton, which can be used to indicate that Ticks shouldn't be displayed.
Can be used with TickStrategies.
Example usage:
// Get Default Y Axis of XY Chart.
chart.getDefaultAxisY()
// Modify the Axis' TickStrategy.
.setTickStrategy(
// Using a Numeric TickStrategy, modify it's Styler.
AxisTickStrategies.Numeric, ( numericTickStrategy ) => numericTickStrategy
// Set the Minor TickStyle of the TickStrategy as EmptyTick.
.setMinorTickStyle( emptyTick )
)A SolidFill singleton for a completely transparent fill. Can be useful in at least following cases:
User wants to hide something but still have it interactable by mouse/touch
User wants to hide something that does not support emptyFill
Otherwise, emptyFill should be preferred for better performance.
A SolidLine singleton for a completely transparent line. Can be useful in at least following cases:
User wants to hide something but still have it interactable by mouse/touch
User wants to hide something that does not support emptyFill
Otherwise, emptyLine should be preferred for better performance.
Animator factory.
Unpolished API, usage can be copied from Examples set but it is not further encouraged.
After all animation update callback
Desirable frame rate for all animations (Limited to around 60fps by browser)
One of the many available factories for Color. This variant has a single parameter that follows the CSS suite of describing colors. Can be especially useful when tying LightningChart JS styling together with user front-end application CSS.
Example usage:
const colorRed = ColorCSS('red')
const colorTransparentGreen = ColorCSS('rgba(0, 255, 0, 0.5)')Supported formats:
Basically all commonly used CSS color syntaxes are supported, but here is a list for reference:
For more convenience factories, see:
CSS string description of a color. For example, 'red'.
Color object. Please refer to Color API document, on extended information how to use LCJS Colors.
One of the many available factories for Color. This variant has a single parameter that follows the CSS suite of describing colors as hexadecimal strings.
Example usage:
const colorRed = ColorHEX('#ff0000')
const colorTransparentGreen = ColorHEX('#00ff0010')Supported formats:
Basically all commonly used hexadecimal color syntaxes are supported, but here is a full list:
For more convenience factories, see:
Hexadecimal value for constructing a Color. Eq. '#FF0000' = Red
Color object. Please refer to Color API document, on extended information how to use LCJS Colors.
One of the many available factories for Color. This variant receives input arguments in HSV color space. HSV is popular in generating smooth, looping color ranges, for example (red -> green -> blue -> red).
Example usage:
// Hue = angle of color circle where 0 deg = red, 120 deg = green, 240 deg = blue.
const colorRed = ColorHSV(0)
const colorYellow = ColorHSV(60)
// Generate a simple color palette.
const colors10 = new Array(10).fill(undefined).map((_, iColor) =>
// Array will receive colors starting from red, moving through green, blue and ending just before red.
ColorHSV( 0 + (iColor / 10) * 360 )
)
// 'saturation' and 'value' arguments can be supplied optionally.
const colorRedDim = ColorHSV(0, 1.0, 0.5)For more convenience factories, see:
Hue value as degrees [0, 360] (0 = red, 120 = green, 240 = blue, 360 = red, and so on...).
Saturation in range [0, 1]. Defaults to 1.
Value in range [0, 1]. Defaults to 1.
Color object. Please refer to Color API document, on extended information how to use LCJS Colors.
One of the many available factories for Color. This variant receives individual values for red, green, blue, and optionally alpha channels. Input values are in range [0, 255].
Example usage:
// Create Color from RGB [0, 255] values (completely red).
const color = ColorRGBA( 255, 0, 0 )
// Create transparent Color.
const transparentColor = ColorRGBA( 255, 0, 0, 127 )For more convenience factories, see:
Red from 0 to 255
Green from 0 to 255
Blue from 0 to 255
Alpha from 0 to 255 (can be omitted, defaulting to 255)
Color object. Please refer to Color API document, on extended information how to use LCJS Colors.
Factory for creating a LinearGradientFill palette.
Collection of default colors from PaletteFactory
Amount of colors in the palette
Angle for the Linear Gradient. Set to 90 degrees by default.
A new LinearGradientFill palette
Factory for creating a RadialGradientFill palette.
Collection of default colors from PaletteFactory
Amount of colors in the palette
A new RadialGradientFill palette
Factory for creating a SolidFill palette.
Collection of default colors from PaletteFactory
Amount of colors in the palette
A new SolidFill palette
Method for creating a custom theme by modifying individual settings. Can be used with customSimpleTheme.
Theme to base the modifications on
Modifications to the base theme
// Define a new theme with different colored background
const myTheme = customComplexTheme(Themes.light, {chart: {fill: {color: ColorHex('#FF7')}}})
const chart = lightningChart().ChartXY( { theme: myTheme } )Function for defining a new custom theme with only few parameters.
Only required variable. Is used in headers and labels.
If not provided, will use primary color instead. Used in graphs, labels and subheaders.
Theme to use as a base. Will be used for background, grid and constantlines.
Custom font for all elements. IMPORTANT! Font must be used and loaded on the page where this variable is used before rendering chart. You can ensure that font has been loaded by using function 'document.fonts.ready'.
new Theme
// Define new theme with one color
const myTheme = customSimpleTheme(ColorHEX('#C90'), , Themes.light, 'Comic Sans')
const chart = lightningChart().ChartXY( { theme: myTheme } )Create a custom theme to use. New theme uses an existing theme as basis, so users can customize only the parts they want from a preset theme. This gives more control over each stylable object than customSimpleTheme and customComplexTheme. See Theme for each customizable object available.
Usage example:
// Modify the dashboard background color for the dark theme:
const customTheme = customTheme(Themes.dark, { dashboardBackGroundFillStyle: new SolidFill({color: ColorHEX('#f121')}) } )Theme to use as basis for the new theme.
New theme or part of new theme to apply over the base theme.
New theme.
Function for initializing the LightningChart library.
Returns the main interface of LCJS, which is used to create all top level components - charts and dashboards.
const lcjs = lightningChart({
// Either supply license number, or omit for automatic community license.
// license: 'my-license-number'
})
// Create charts...
const chart = lcjs.ChartXY()Object containing any properties supported by LightningChartOptions interface. Most importantly used for supplying license information.
string license can be supplied to support old syntax, but this will be deprecated eventually, consider using { license: 'my-license' } syntax instead.
Additional information for license verification. Only required by Application Deployment license.
Consider using { licenseInformation: ... } arg1 syntax instead.
A LightningChart object for creating Charts and components.
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'
saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
saveToFile('fileName', 'image/jpeg', 0.50)Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
A DOMString indicating the image format. The default format type is image/png.
A 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.
Function for translating a XY coordinate between different coordinate systems.
A coordinate system can be selected by a scale property of chart, or by specifying a pair of Axis.
// Example 1, translate from percentage location in chart, to pixel location in chart.
const pixelLocation = translatePoint(
// percentage location within chart, where [0,0] = bottom left, and [100,100] = top right.
{ x: 10, y: 10 },
chart.uiScale,
chart.pixelScale
) // Example 2, translate axis coordinate to pixel location in chart.
const pixelLocation = translatePoint(
// axis coordinate.
{ x: 116.9, y: 26.4 },
{
x: chart.getDefaultAxisX(),
y: chart.getDefaultAxisY(),
},
chart.pixelScale
)
// NOTE: Translation from chart pixel coordinates to *document* is done using `engineLocation2Client` method.
const pixelLocationDocument = chart.engine.engineLocation2Client(pixelLocation.x, pixelLocation.y)
// `pixelLocationDocument` can now be used for absolute positioning HTML elements, or other such things...
Available chart coordinate systems:
Every LCJS chart class has two available coordinate systems:
uiScale | Percentage based coordinate system, where [0,0] = bottom left, and [100,100] = top right.pixelScale | Pixel based coordinate system, where [0,0] = bottom left.With ChartXY, axes can be also used (see example usage above).
XY coordinate.
Source coordinate system.
Target coordinate system.
Coordinate that corresponds value on target coordinate system.
AnimationEasing collection to use with Animator.
Scroll easing factory for logarithmic axes.
Collection of AreaSeries implementations.
Used when creating an AreaSeries with ChartXY.addAreaSeries. Selected option tells what the returned Series type will be - different Series types can have different APIs !
Type of AreaSeries that shows data on both sides of baseline.
Has individual styles for positive/negative areas.
Type of AreaSeries that only shows data that is below the baseline.
Type of AreaSeries that only shows data that is above the baseline.
Collection of AutoCursorBuilders.
AutoCursorBuilders are used to modify structure of AutoCursors of Charts, by passing one when the Chart is created.
Each item is associated with a specific Chart-type, that it can only be used with.
AutoCursorBuilder for PolarChart.
Used to modify structure of AutoCursor, by passing one when creating a PolarChart.
AutoCursorBuilder for SpiderChart.
Used to modify structure of AutoCursor, by passing one when creating a SpiderChart.
Collection of AutoFitStrategyFactories.
Used with AutoCursors and Markers setAutoFitStrategy() to customize logic for keeping ResultTable in view.
Factory for AutoFitStrategy which attempts to fit ResultTable by flipping it when it goes out of view.
Example usage:
ChartXY.setAutoCursor((autoCursor) => autoCursor.setAutoFitStrategy( AutoFitStrategies.Flip ))
Factory for AutoFitStrategyFactory for strategy which attempts to fit ResultTable by reducing its font size when it goes out of view.
Example usage:
ChartXY.setAutoCursor((autoCursor) => autoCursor.setAutoFitStrategy( AutoFitStrategies.FontSize(5, 5) ))
Collection of available AxisScrollStrategies.
AxisScrollStrategies can be used to customize the behavior of Axis scrolling.
Use with Axis.setScrollStrategy
Axis will scroll to fit Series that are out of view, but it won't shrink even if there is empty space (like "fitting" does).
Axis will constantly scroll to fit attached Series.
Axis will scroll to show new, progressive data, but will keep its interval constant - leaving older data out of view.
Axis will scroll to show new, regressive data, but will keep its interval constant - leaving older data out of view.
Collection of available AxisTickStrategies.
AxisTickStrategies modify logic of drawing Axis Ticks and formatting to better suit different user applications. For example, a DateTime Axis is created by selecting AxisTickStrategies.DateTime.
DateTime Axis TickStrategy. Creates ticks at relevant Dates and Times.
Has separate styles for each tick level: great, major and minor. Each tick level is placed along a different DateTime unit (eq. second, day, month, year), which is dynamically selected from the active Axis range.
Example usage:
Default style:
Axis.setTickStrategy( AxisTickStrategies.DateTime )Customized style:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setMinorTickStyle(( tickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)Formatting based on a specific locale:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
.setLocale( 'fi )
)Specifying an offset between Axis-values and Dates:
Axis.setTickStrategy(
AxisTickStrategies.DateTime,
( tickStrategy: DateTimeTickStrategy ) => tickStrategy
// This will format a data-point with value 0 as current Date and Time.
.setDateOrigin( new Date( ) )
)Disables all automatic creation of Axis ticks.
CustomTicks can still be created manually.
Example usage:
Axis.setTickStrategy( AxisTickStrategies.Empty )Default Axis TickStrategy. Creates ticks at relevant intervals of powers of 10 and its fractions.
Has optional "extreme ticks", which always display the start and end values of the Axis.
Has separate styles for each tick level: major, minor and extreme.
Example usage:
Default style:
Axis.setTickStrategy( AxisTickStrategies.Numeric )Customized style:
Axis.setTickStrategy(
AxisTickStrategies.Numeric,
( tickStrategy: NumericTickStrategy ) => tickStrategy
.setMinorTickStyle(( tickStyle ) => tickStyle
.setLabelFont(( font ) => font
.setWeight( 'bold' )
)
)
)Collection of default Color PaletteFactories.
Items are mostly functions that take a single argument, length, and return a Color Palette of that given length.
Color Palettes are functions that give a Color based on a given index.
Enum-like object for implementations of default Formatting functions.
Formats a number.
Value on range to format
FormatingRange
Value formated as string
Formats a number by range-dependant rounding and usage of units.
Value on range to format
FormatingRange
Value formated as string with units
Collection of FunnelChart implementations. Each option can have their own visual design, and API for customization of it.
This must be specified when the FunnelChart is created (or default one will be used).
Example usage:
// Create a FunnelChart with default type
LightningChart.Funnel()
// Create a FunnelChart with specified type
LightningChart.Funnel({ type: FunnelChartTypes.LabelsInsideSlices })Funnel Chart type, where Slice Labels inside the Slices.
Funnel Chart type, where Slice Labels are positioned on the either left or right sides of Chart. The side can be set using setLabelSide Labels are connected to their Slices with lines, which can be styled using unique API for this Funnel Chart type.
Collection of GaugeChart implementations. Each option can have their own visual design, and API for customization of it.
Note, at this time, there is only a single type available, leaving this API effectively unusable.
This must be specified when the GaugeChart is created (or default one will be used).
Example usage:
// Create a GaugeChart with specified type
LightningChart.Gauge({ type: GaugeChartTypes.Solid })Solid Gauge Chart type, which contains a single slice represents a value within the interval.
IntensityGridSeries for visualization of magnitude in two dimensions.
IntensityMeshSeries for visualization of magnitude in two dimensions.
Mesh allows to edit the geometry of the displayed intensity series.
Collection of available LegendBox builders. To build LegendBoxes you must pass one of these to method: addLegendBox(). This method can be accessed through Charts, Dashboard, Etc.
Example usage:
// Create a HorizontalLegendBox on a ChartXY
ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
// Create a HorizontalLegendBox on a Dashboard
Dashboard.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)Horizontal implementation of LegendBox.
Example usage:
// Create a Horizontal LegendBox
Chart.addUIElement(UIElementBuilders.HorizontalLegendBox)Vertical implementation of LegendBox.
Example usage:
// Create a Vertical LegendBox
Chart.addUIElement(UIElementBuilders.VerticalLegendBox)Collection of StaticCursorBuilders.
StaticCursorBuilders are used to modify structure of Markers, by passing one when the Marker is created.
Each item is associated with a specific Chart-type, that it can only be used with.
StaticCursorBuilder for creation of MarkerXY.
Used to modify structure of MarkerXY when it is created. There are two versions of MarkerXY:
Collection of OHLCFigure options.
Used for selecting different figure designs for OHLCSeries. eq.
Example usage:
// Specify OHLCFigure of OHLCSeries
ChartXY.addOHLCSeries(undefined, undefined, OHLCFigures.Candlestick)Bar OHLCFigure.
Candlestick OHLCFigure.
Collection of OHLCSeries types.
By default, OHLCSeries will be OHLCSeriesTraditional, but different types can be created with these options. Note, that based on the selection the Series can have different API!
Example usage:
// Create OHLCSeries with automatic packing
ChartXY.addOHLCSeries(undefined, undefined, undefined, undefined, OHLCSeriesTypes.AutomaticPacking)OHLCSeries type that takes data as X-progressive Points. The Series automatically packs these into OHLC-segments.
If this option is selected, the "add()"-method of the created Series will only accept Points, rather than XOHLC-values.
OHLCSeries type that takes data traditionally in XOHLC-tuples.
Collection of PieChart implementations. Each option can have their own visual design, and API for customization of it.
This must be specified when the PieChart is created (or default one will be used).
Example usage:
// Create a PieChart with specified type
LightningChart.Pie({ type: PieChartTypes.LabelsInsideSlices })Pie Chart type, where Slice Labels inside the Slices. Works well when Label texts are short and there are not a lot of Slices, as the actual Pie has more space.
Pie Chart type, where Slice Labels are positioned on the left and right sides of Chart. Labels are connected to their Slices with lines, which can be styled using unique API for this Pie Chart type.
Collection of available PointMarker implementations.
PointMarkers are interactable UIElements that belong to AutoCursors and Markers, indicating their location.
PointMarker can be specified when creating an AutoCursor or Marker, by method of their builder.
Example usage:
// Create SeriesMarkerXY with specified PointMarker
SeriesXY.addMarker(MarkerBuilders.XY.setPointMarker(PointMarkers.UICircle))
// Specify PointMarker of AutoCursor
LightningChart.ChartXY({ autoCursorBuilder: AutoCursorBuilders.XY.setPointMarker(PointMarkers.UIDiamond) })No pointMarker.
Circular pointMarker.
45 degree rotated rectangle pointMarker.
Rectangular pointMarker.
Collection of PointSeries3D implementations.
Used when creating an PointSeries3D with Chart3D.addPointSeries. Selected option tells what the returned Series type will be - PointSeries3D implementations are otherwise equal, but their styling APIs expect different Style objects.
Type of Point Series 3D that visualized points by pixels styled using PointStyle3D.Pixelated.
Type of Point Series 3D that visualized points by shaded geometry styled using PointStyle3D.Triangulated.
Collection of constructors for specifying style of 3D points rendering.
Used with:
A style class used to specify style of 3D points rendering as pixelated squares.
This rendering style is optimal for rendering large numbers of points that do not require great individual detail.
A style class used to specify style of 3D points rendering as triangulated Cubes.
Collection of PyramidChart implementations. Each option can have their own visual type, and API for customization of it.
This must be specified when the PyramidChart is created (or default one will be used).
Example usage:
// Create a PyramidChart with default type
LightningChart.Pyramid()
// Create a PyramidChart with specified type
LightningChart.Pyramid({ type: PyramidChartTypes.LabelsInsideSlices })Pyramid Chart type, where Slice Labels inside the Slices.
Pyramid Chart type, where Slice Labels are positioned on the either left or right sides of Chart. The side can be set using setLabelSide Labels are connected to their Slices with lines, which can be styled using unique API for this Pyramid Chart type.
Collection of some example implementations of SliceLabelFormatters.
Use with [[SlicedCharts.setLabelFormatter]]
Example usage:
// Use a default implementation
SlicedCharts.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue)
// Use a custom implementation
SlicedCharts.setLabelFormatter((slice, relativeValue) => slice.getValue() + ' €')Slice Label formatter for ${name}.
Slice Label formatter for ${name}: ${(relativeValue * 100).toFixed(1)}%.
Slice Label formatter for ${name}: ${Math.round(animatedValue)}.
Collection of some example implementations of SliceSorter
Use with [[SlicedCharts.setSliceSorter]]
Example usage:
// Use a default implementation
SlicedCharts.setSliceSorter(SliceSorters.SortByValueDescending)
// Use a custom implementation
SlicedCharts.setSliceSorter((a, b) => a.getValue() - b.getValue())Disabled Slice sorting.
SliceSorter that sorts Slices based on their names using JS API: String.localeCompare.
SliceSorter that sorts Slices to ascending value order.
SliceSorter that sorts Slices to descending value order.
Collection of SurfaceSeries3D implementations.
Used when creating an SurfaceSeries3D with Chart3D.addSurfaceSeries. Selected option tells what the returned Series type will be - SurfaceSeries3D implementations are otherwise equal, except Mesh type has additional methods to freely manipulate the surface geometry, not just in Y plane, but also XZ.
Type of Surface Series 3D that exists on the XZ plane, and allows the user to define a height map from given Y values.
Type of Surface Series 3D that can be warped to any 3 dimensional surface.
A collection of default library color theme implementations.
Color theme of components must be specified when it is created, and can't be changed afterwards (without destroying and recreating the component). See ChartXY for example usage on specifying a color theme - the syntax is the same for every other component.
LCJS default theme is Themes.dark.
Aurora Borealis theme
Blue SciFi Theme
Relaxing and earth-like theme
A predominantly dark theme.
Dark theme with gradients
Green theme
Cool lavender theme
Cool lavender theme with gradients
Theme with light backgrounds.
Light theme with gradients
Light green theme
Light purple theme
Light red theme
Dark gradient theme with pink
Monochrome Theme
Colorful dark theme
Purple theme
Rainbow theme
Dark theme with pink
Red theme
Sunset Theme
Collection of available UIBackgrounds Can be used to customize the background of an UIElement.
Background must be specified when the UIElement is created by method of its builder.
Example usage:
// Create TextBox with specified Background
Chart.addUIElement(UIElementBuilders.TextBox.setBackground(UIBackgrounds.Circle))Circular background.
45 degree rotated rectangle background.
No background.
Arrow-like background.
The Pointers direction can be modified by, for example:
UIElement.setBackground((pointer) => pointer.setDirection(UIDirections.Up))
This will throw an error if used on an UIElement with any other Background!
Rectangular background.
Collection of available UIButtonPictures. Can be used to customize the shape of buttons and checkboxes of UIElements.
ButtonPicture must be specified when the UIElement is created by method of its builder.
Example usage:
// Create ButtonBox with specified ButtonPicture
Chart.addUIElement(UIElementBuilders.ButtonBox.setPictureOff(UIButtonPictures.Circle))
// Create LegendBox with specified ButtonPicture
Chart.addUIElement(UIElementBuilders.HorizontalLegendBox.setEntry(
UIElementBuilders.TextBox.setPictureOff(UIButtonPictures.Circle)))Circular picture.
45 degree rotated rectangle picture.
Rectangular picture.
Collection of available UIElement builders. To build UIElements you must pass one of these to method: addUIElement(). This method can be accessed through Charts, Dashboard, Etc.
Example usage:
// Create a TextBox on a ChartXY
ChartXY.addUIElement(UIElementBuilders.TextBox)
// Create a CheckBox on a Dashboard
Dashboard.addUIElement(UIElementBuilders.CheckBox)UIElement builder that is intended to be used with custom axis ticks. See Axis.addCustomTick for example usage, and more information.
AxisTick is a text label connected to a tick line - fundamentally equal to a default axis tick shape.
UIElement that displays a button and text over a Background.
By default, Background is empty. To show it you must specify it using method of the builder, setBackground
Example usage:
// Create a ButtonBox
Chart.addUIElement(UIElementBuilders.ButtonBox)
// Create a ButtonBox with specified Background
Chart.addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Circle))
// Create a ButtonBox with specified ButtonPicture
Chart.addUIElement(UIElementBuilders.ButtonBox.setPictureOff(UIButtonPictures.Diamond))UIElement that displays a toggleable checkbox and text over a Background.
By default, Background is empty. To show it you must specify it using method of the builder, setBackground
Example usage:
// Create a CheckBox
Chart.addUIElement(UIElementBuilders.CheckBox)
// Create a CheckBox with specified Background
Chart.addUIElement(UIElementBuilders.CheckBox.setBackground(UIBackgrounds.Circle))
// Create a CheckBox with specified ButtonPicture
Chart.addUIElement(UIElementBuilders.CheckBox.setPictureOff(UIButtonPictures.Diamond))UIElement builder that is intended to be used with custom axis ticks. See Axis.addCustomTick for example usage, and more information.
PointableTextBox is a text label enclosed within a background shaped in the form of an arrow.
UIElement that displays text over a Background.
By default, Background is empty. To show it you must specify it using method of the builder, setBackground
Example usage:
// Create a TextBox
Chart.addUIElement(UIElementBuilders.TextBox)
// Create a TextBox with specified Background
Chart.addUIElement(UIElementBuilders.TextBox.setBackground(UIBackgrounds.Circle))Collection of UIElementBuilders for Layouts. These allow positioning multiple UIElements relative to each other.
UIElement for column layout, added UIElements will be layed out after one another vertically. Has a Background.
By default, Background is hidden (style = emptyFill). To show it you must give it a style with: UIColumn.setFillStyle
Example usage:
// Create a Column
Chart.addUIElement(UILayouts.Column)
// Create a Column with specified Background
Chart.addUIElement(UILayouts.Column.setBackground(UIBackgrounds.Circle))UIElement for row layout, added UIElements will be layed out after one another horizontally. Has a Background.
By default, Background is hidden (style = emptyFill). To show it you must give it a style with: UIRow.setFillStyle
Example usage:
// Create a Row
Chart.addUIElement(UILayouts.Row)
// Create a Row with specified Background
Chart.addUIElement(*UILayouts.Row.setBackground(UIBackgrounds.Circle))Collection of fast-access arguments for UIElement.setOrigin
Collection of math utilities for numeric Vec3s.
Get the length of a 3-dimensional Vector.
3-dimensional Vector.
Length of a 3-dimensional Vector.
MultidimensionalStrategy for X Dimension
Two dimensional value height of which has to be extracted
Height of Vec2
Two dimensional value width of which has to be extracted
Width of Vec2
Combine argument with the tick value to create relevant Vec2
Value on height Scale units
Vec2 which represents relevant for custom tick position
Combine argument with the tick value to create relevant Vec2
Value on height Scale units
Vec2 which represents relevant for custom tick position
MultidimensionalStrategy for X Dimension
Two dimensional value height of which has to be extracted
Height of Vec2
Two dimensional value width of which has to be extracted
Width of Vec2
Combine argument with the tick value to create relevant Vec2
Value on height Scale units
Vec2 which represents relevant for custom tick position
Combine argument with the tick value to create relevant Vec2
Value on height Scale units
Vec2 which represents relevant for custom tick position
Event handler for mouse event that is 'abrupt'. Meaning that the event can be triggered as a side-effect of something totally unrelated, without an actual mouse-event. ( Designed for making sure that mouse-leave is handled when hovered entity is disposed )
Object
Browser MouseEvent that triggered the event of undefined if event is abrupt