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
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 of Dashboard resize-event interface. This interface is injected into Panels created by Dashboard. The Panel should use it to subscribe to Dashboard-resize events.
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 Charts and other LCJS components.
Example usage:
| Desired result | Value |
|---|---|
| Automatically generated DIV on document | undefined |
| Embed Engine in a DOM element | { containerId: 'dashboard_div_id' } |
Interface for a function which builds ResultTable content when pointing at a FigureSeries.
Type for styler function for Figure
The font-style attribute specifies whether the text is to be rendered using a normal, italic or oblique face.
The font-weight property specifies the weight (or boldness) of the font. The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold.
Event handler for gauge angle interval changed
Available Gauge Chart types.
Type of a mutator function for abstract, immutable object. Function provides functionality for creating a new object based on an existing one.
Interval change event listener.
Interface defines a LUT lookup table configurations.
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.
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:
| Desired result | 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:
| Desired result | 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.
Public interface for TickMarkers of CustomTicks.
Event handler for pointer event (touch)
Type of function for styling a generic UIElement.
LegendBox that is a standalone 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.
Value change event listener.
Ordered tuple that contains values for:
Type of a function that is used to override the style of all Series created by ZoomBandChart.
Singleton object which indicates that shape should not be filled.
When emptyFill is used, the area that would be filled does NOT trigger mouse / touch -events, and its rendering process is skipped, which results in saved performance.
Singleton object which specifies that line should not be rendered.
When emptyLine is used, the line that would be rendered does NOT trigger mouse / touch -events, and its rendering process is skipped, which results in saved performance.
Singleton object which is used to disable Axis Ticks. Use with Axis.setTickStyle
When emptyTick is used, the whole logic of creating Axis Ticks is skipped, which results in saved performance.
A SolidFill singleton for a completely transparent fill. Can be useful in at least following cases:
1) User wants to hide something but still have it interactable by mouse/touch
2) 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:
1) User wants to hide something but still have it interactable by mouse/touch
2) 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)
Factory for creating a Color object given a hexadecimal-formatted string. Supports the following input formats (value after '#' or '0x' is case insensitive):
Other formats will throw an Error!
Example:
let color = ColorHex('0xFF00AABB')
color = ColorHex('0xff00aabb')
color = ColorHex('#FF00AABB')
color = ColorHex('#ff00aabb')
color = ColorHex('0xF0AB')
color = ColorHex('#F0AB')Color objects are seldom used independently, but rather used to form more sophisticated Settings-objects, such as:
Hexadecimal value for constructing a Color. Eq. #FF0000 = Red
Color object
Factory for creating a Color object from HSV values.
Color objects are seldom used independently, but rather used to form more sophisticated Settings-objects, such as:
Hue in range [0, 360].
Saturation in range [0, 1]. Defaults to 1
Value in range [0, 1]. Defaults to 1
Color object
Factory for creating a Color object given individual values for Red, Green, Blue and optionally Alpha -channels. Values are from 0 to 255.
Color objects are seldom used independently, but rather used to form more sophisticated Settings-objects, such as:
Red from 0 to 255
Green from 0 to 255
Blue from 0 to 255
Alpha from 0 to 255
Color object
Factory for creating a SolidFill palette.
Collection of default colors from PaletteFactory
Amount of colors in the palette
A new SolidFill palette
Pure implementation of transforming X value array to Point array for DataInputXY implementations.
Array of X-values.
Optional step between each Y coordinate. Defaults to 1.
Start value for first generated Y-value. If undefined, Y values will start from 0.
Point Array, with automatically generated Y values.
Pure implementation of transforming X and Y value arrays to point for DataInputXY implementations.
Array of X-values
Array of Y-values
point array generated by mapping X and Y values
Pure implementation of transforming Y value array to Point array for DataInputXY implementations.
Array of Y-values.
Optional step between each X coordinate. Defaults to 1.
Start Value for first generated X-value. If undefined, X values will start from 0.
Point Array, with automatically generated X values.
Pure function for concatting a single list of data points from a list of segments that have separate arrays for unprocessed and processed vertices. Note, that the vertices arrays can have a different type definition from data points Array, which is returned (eq. Junction segments).
List of segments.
Optionally injectable logic for cases where vertices arrays have different type from data points.
Concatted list of processed and unprocessed data points, without joints.
Check if a Series contributes to a Chart's AutoCursor to determine if Series Hover event should be emitted.
Flag for Cursor enabled of Series
Eventer of the Series
Chart the Series belongs to, or undefined if the Chart is not a Chart2D instance.
True if Series contributes to Chart's AutoCursor, false if not.
Function for initializing the LightningChart library.
Returns an object, with properties for creating different Charts and components. See LightningChart interface for all available properties.
Optional development or deployment license. If omitted, a community license will be used.
Additional information for license verification. Only required by Application Deployment license.
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:
| Desired result | Arguments |
|---|---|
| Download 'screenshot.png' | 'screenshot' |
| Attempt download 'maybeNotSupported.bmp' | 'maybeNotSupported', 'image/bmp' |
| Attempt download jpeg.file with specified compression quality | '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.
AnimationEasing collection to use with Animator.
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 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 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.
AxisTickStrategy must be specified when an Axis is created (or default one is used).
AxisTickStrategy for numeric axes. Formats values simply as numbers and tries to place ticks at round intervals.
Example usage:
| Desired result | Usage |
|---|---|
| Create Numeric X Axis | ChartXY.addAxisX(undefined, AxisTickStrategies.Numeric) |
| Specify default X Axis as Numeric | LightningChart.ChartXY({ defaultAxisXTickStrategy: AxisTickStrategies.Numeric }) |
AxisTickStrategy for numeric axes. Formats values as numbers and tries to utilize different units (K, M, Etc) for more compact display.
Can also be useful for not displaying fractions (for intervals bigger than 10).
Example usage:
| Desired result | Usage |
|---|---|
| Create NumericWithUnits X Axis | ChartXY.addAxisX(undefined, AxisTickStrategies.NumericWithUnits) |
| Specify default X Axis as NumericWithUnits | LightningChart.ChartXY({ defaultAxisXTickStrategy: AxisTickStrategies.NumericWithUnits }) |
Factory for DateTime AxisTickStrategy. Formats values as Dates according to JavaScript API:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Example usage:
| Desired result | Usage |
|---|---|
| Create DateTime X Axis that formats 0 as '1.1.1970' | ChartXY.addAxisX(undefined, AxisTickStrategies.DateTime()) |
| Specify default X Axis as DateTime that formats 0 as '1.1.2019' | LightningChart.ChartXY({ defaultAxisXTickStrategy: AxisTickStrategies.DateTime(2019, 0, 1) }) |
| DateTime formatting like: 'Thursday, 9 AM' | AxisTickStrategies.DateTime(undefined, undefined, { weekday: 'long', hour: 'numeric' }) |
Origin date. Value 0 will be interpreted as this date. Defaults to javascript Date origin - January 1, 1970 UTC. Proper usage can drastically improve achievable zoom resolution
Valid javascript Date locale string, that specifies a geographical, political or cultural region.
Valid javascript Intl.DateTimeFormat options object, that specifies a weekday, year, month and day formats.
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.
Options collection for selecting optimizations for data with a specific pattern. Knowing the pattern of incoming data can enable massive optimizations.
This must be specified when Series is created. Note, that not all Series support specifying pattern of data.
Example usage:
| Desired result | Usage |
|---|---|
| Create LineSeries with progressive data on X | ChartXY.addLineSeries({ dataPattern: DataPatterns.HorizontalProgressivePattern }) |
If the Series is supplied with data that does not respect the given DataPattern, it might behave unexpectedly.
Indicates that incoming data has no pattern, and can go in any direction from any given point. Data-point solving is EXTREMELY HEAVY for freeform data, consider using other DataPatterns if possible.
Example usage:
| Desired result | Usage |
|---|---|
| Create freeform LineSeries | ChartXY.addLineSeries({ dataPattern: DataPatterns.freeform }) |
Indicates that incoming data always progresses in positive X direction and enables optimizations for this scenario.
Example usage:
| Desired result | Usage |
|---|---|
| Create LineSeries with progressive data on X | ChartXY.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive }) |
Indicates that incoming data always progresses in negative X direction and enables optimizations for this scenario.
Example usage:
| Desired result | Usage |
|---|---|
| Create LineSeries with regressive data on X | ChartXY.addLineSeries({ dataPattern: DataPatterns.horizontalRegressive }) |
Indicates that incoming data always progresses in positive Y direction and enables optimizations for this scenario.
Example usage:
| Desired result | Usage |
|---|---|
| Create LineSeries with progressive data on Y | ChartXY.addLineSeries({ dataPattern: DataPatterns.verticalProgressive }) |
Indicates that incoming data always progresses in negative Y direction and enables optimizations for this scenario.
Example usage:
| Desired result | Usage |
|---|---|
| Create LineSeries with regressive data on Y | ChartXY.addLineSeries({ dataPattern: DataPatterns.verticalRegressive }) |
Collection of default styles used for the whole library.
Can be referenced in applications for mimicking style, or just fast access to some styles.
Default style for axis grid lines
Default fill style for axis labels
Default font for axis title
Default fill style for highlighted axis nibs (mouse-picking area)
Default line style for axis nibs
Default fill style for highlighted axes (mouse-picking area)
Default fill style for axes
Default style for axis ticks
Default fill style for axis title
Default font for axis title
Default fill style for chart background fill.
Default stroke style for chart background stroke.
Default fill style for chart XY fitting rectangle
Default fill style for chart XY fitting rectangle stroke
Get default FontSettings for chart XY title
Default fill style for chart XY zooming rectangle
Default fill style for chart XY zooming rectangle stroke
Default style for custom tick grid stroke.
Default fill style for Dashboard background
Default stroke style for Dashboard background.
Default fill style for Dashboard splitter lines
Default fill style for UI Band
Default stroke style for UI Band
Default line style for Box Figures Line
Default line style for Box Figures Median Line
Default line style for Box Figures stroke
Default fill style for Box Figures
Default negative fill style for OHLC candle sticks
Default positive fill style for OHLC candle sticks
Default line style for OHLC candle sticks
Default stroke style for Axis ConstantLine
Default line series line style
Default style for filling of mountain-series (Area AreaRange).
Default style for inverted filling of mountain-series (Area AreaRange).
Default style for inverted strokes of mountain-series (Area AreaRange).
Default style for strokes of mountain-series (Area AreaRange).
Default line style for negative OHLC Bars
Default line style for positive OHLC Bars
Default FontSettings for Funnel Chart title.
Default LineStyle for Funnel Label connectors.
Default fillStyle for Funnel Labels.
Default FontSettings for Funnel Labels.
Default FillStyle Palette for Funnel Slices.
Default LineStyle for Funnel Slices Stroke.
Default fill style for Panel background
Default stroke style for Panel background.
Default FontSettings for Pie Chart title.
Default LineStyle for Pie Label connectors.
Default fillStyle for Pie Labels.
Default FontSettings for Pie Labels.
Default FillStyle Palette for Pie Slices.
Default LineStyle for Pie Slices stroke.
Default fill style for point line series points
Default fill style for Cursor PointMarker
Default line style for Cursor PointMarker
Default FontSettings for Pyramid Chart title.
Default LineStyle for Pyramid Label connectors.
Default fillStyle for Pyramid Labels.
Default FontSettings for Pyramid Labels.
Default FillStyle Palette for Pyramid Slices.
Default LineStyle for Pyramid Slices Stroke.
Default fill style for Cursor ResultTable
Default line style for Cursor ResultTable
Default fill style for Cursor ResultTable text
Default line style for segment series
Default fill style for Series
Default FillStyle for Spider axis labels.
Default FontSettings for Spider axis labels.
Default axis line style for Spider Chart.
Default FontSettings for Spider Chart title.
Default FillStyle for Spider scale labels.
Default FontSettings for Spider scale labels.
Fill style using an opaque white color.
Default series fill style for Spider Chart.
Default web line style for Spider Chart.
Default fill style for UI Element Background
Default stroke style for UI Element Background
Default fill style for UI Button
Default size for UI Button
Default fill style for UI Text
Function that styles a 'Button' given a single FillStyle (default design for Buttons).
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:
| Desired result | 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.
This must be specified when the GaugeChart is created (or default one will be used).
Example usage:
| Desired result | 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:
| Desired result | Usage |
|---|---|
| Create a HorizontalLegendBox on a ChartXY | ChartXY.addLegendBox(LegendBoxBuilders.TextBox) |
| Create a HorizontalLegendBox on a Dashboard | Dashboard.addLegendBox(LegendBoxBuilders.CheckBox) |
Horizontal implementation of LegendBox.
Lays out each unique group after one another horizontally. Items inside each group are layed out vertically.
Example usage:
| Desired result | Usage |
|---|---|
| Create a Horizontal LegendBox | Chart.addUIElement(UIElementBuilders.HorizontalLegendBox) |
Vertical implementation of LegendBox.
Lays out each unique group after one another vertically. Items inside each group are layed out horizontally.
Example usage:
| Desired result | Usage |
|---|---|
| Create a Vertical LegendBox | Chart.addUIElement(UIElementBuilders.VerticalLegendBox) |
Collection of StaticCursorBuilders.
StaticCursorBuilder*s 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:
| Desired result | 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:
| Desired result | 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:
| Desired result | 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:
| Desired result | 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 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:
| Desired result | 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:
| Desired result | 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:
| Desired result | 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.
Themes used to set the coloring scheme of all elements in Dashboard, Charts, UIElements. A Theme can be passed to a Dashboard or Chart as a parameter upon creation.
A predominantly dark theme.
Theme with light backgrounds.
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:
| Desired result | 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 UIButtonPicture*s. 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:
| Desired result | 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:
| Desired result | Usage |
|---|---|
| Create a TextBox on a ChartXY | ChartXY.addUIElement(UIElementBuilders.TextBox) |
| Create a CheckBox on a Dashboard | Dashboard.addUIElement(UIElementBuilders.CheckBox) |
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:
| Desired result | 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:
| Desired result | 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 that displays text over a PointableBackground
Direction can be changed with PointableTextBox.setDirection
Example usage:
| Desired result | Usage |
|---|---|
| Create a PointableTextBox | Chart.addUIElement(UIElementBuilders.PointableTextBox) |
| Create a PointableTextBox with specified PointableBackground |
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:
| Desired result | 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:
| Desired result | 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:
| Desired result | 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
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