Add new Chart3D to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new ChartXY to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new FunnelChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new GaugeChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Create a new legend box panel, a convenience component for placing legend box items from multiple different charts into a single row layout, to dashboard at specified location and span.
Refer to UILegendBoxPanel for more information, like example usage.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Factory for MapChart
. This chart visualizes a Map of the selected part of the world. Defaults to the entire world.
It has built-in cursor functionality and supports dynamic region coloring.
To learn more about its features, refer to MapChart.
Dashboard cell configuration:
When inside a Dashboard
, the chart location relative to the Dashboard
must be supplied when it is created.
// Example, dashboard cell configuration.
const chart = Dashboard.createMapChart({
// X location, 0 = left.
columnIndex: 0,
// Y location, 0 = top.
rowIndex: 0,
// Amount of X cells allocated for this chart.
columnSpan: 1,
// Amount of Y cells allocated for this chart.
rowSpan: 1,
})
Readonly configuration:
Some properties of MapChart
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example, specify map type.
const chart = LightningChart.Map({
type: MapTypes.Europe
})
For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.
For MapChart
specific properties, refer to MapChartOptions.
Add new PieChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new PolarChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new PyramidChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboard's numberOfColumns/Rows.
Add new SpiderChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Create a container for UI objects on dashboard with specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Add new ZoomBandChart to dashboard at specified location and span.
Throws an error if either column/row index is less than 0 or index + span is more than Dashboards numberOfColumns/Rows.
Public, safe interface for Dashboards rendering engine.
Scale that represents dashboard area in percents (0-100).
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.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Inside Dashboard, a UILegendBoxPanel can also be used for simplified creation of legendboxes for several charts.
LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].
Object with two interfaces: LegendBox and UIElement.
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.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Dashboard in percentages [0, 100].
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Disable all animations for all charts in the dashboard.
After calling this function, animations (Zooming, scaling) for all Charts will be disabled. Animations must be recreated manually for each chart afterwards.
Dashboard itself for fluent interface.
Permanently dispose 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
Use forEach function on charts inside dashboard. Dashboard filters any other types of cells out.
forEach function for Chart
Get animations disable/enable state.
Animations default state.
Get fillStyle of dashboard
FillStyle
Get stroke style of dashboard background.
LineStyle
Get width of a column in relation to other columns. By default all column widths are 1
.
Example usage:
dashboard.getColumnWidth( 0 )
Index of the column (starts from 0)
Relative width of the column.
Get the minimum and maximum vertical boundaries used for the Dashboard.
Vertical boundaries as a tuple [minSize, maxSize]
Get height of a row in relation to other rows. By default all row heights are 1
.
Example usage:
dashboard.getRowHeight( 0 )
Index of the row (starts from 0)
Get style of Dashboard splitters.
LineStyle object
Get style of Dashboard splitters when highlighted.
LineStyle object
Get theme used for the dashboard.
Theme
Get the minimum and maximum horizontal boundaries used for the Dashboard.
Horizontal boundaries as a tuple [minSize, maxSize]
Use mapping function on all charts inside dashboard. Dashboard filters any other types of cells out.
Map function for Chart
Remove event listener from dispose event.
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Subscribe onDispose
event.
This event is triggered whenever the Control (Dashboards and all chart types) is disposed.
// Example usage
Dashboard.onDispose(() => {
console.log('Dashboard was disposed')
})
Dashboard.dispose()
Handler function for event
Token of subscription
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'
Dashboard.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Dashboard.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Dashboard.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.
Disable/Enable all animations of the Chart.
Boolean value to enable or disable animations.
Chart itself for fluent interface.
Set fillStyle of dashboard background.
FillStyle or mutator to modify existing one
Object itself
Set stroke style of dashboard background.
LineStyle
Object itself
Set width of a column in relation to other columns. By default all column widths are 1
.
By changing one columns width to 2
, it would make that column allocate twice as much width as others.
// Example, Dashboard with 3 columns with widths (20%, 20%, 60%) of dashboard width
dashboard.setColumnWidth( 0, 1 )
dashboard.setColumnWidth( 1, 1 )
dashboard.setColumnWidth( 2, 3 )
Index of the column (starts from 0)
Relative width of the column, can be any number.
Set the minimum and maximum boundaries for dashBoard vertical size.
Single value applied to both minimum and maximum size, or a tuple for [min, max] size in pixels.
Set height of a row in relation to other rows. By default all row heights are 1
.
By changing one rows height to 2
, it would make that row allocate twice as much height as others.
// Dashboard with 3 rows with heights (20%, 20%, 60%) of dashboard height
dashboard.setRowHeight( 0, 1 )
dashboard.setRowHeight( 1, 1 )
dashboard.setRowHeight( 2, 3 )
Index of the row (starts from 0)
Relative height of the row
Set style of Dashboard splitters.
Example usage:
// Specified LineStyle
Dashboard.setSplitterStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
// Changed thickness
Dashboard.setSplitterStyle((solidLine) => solidLine.setThickness(5))
// Hidden
Dashboard.setSplitterStyle(emptyLine)
Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
Chart itself
Set style of Dashboard splitters when highlighted.
Example usage:
// Specified LineStyle
Dashboard.setSplitterStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
// Changed thickness
Dashboard.setSplitterStyle((solidLine) => solidLine.setThickness(5))
// Hidden
Dashboard.setSplitterStyle(emptyLine)
Either a LineStyle object or a function, which will be used to modify current value or undefined for automatic value based on normal style.
Chart itself
Set the minimum and maximum boundaries for dashBoard horizontal size.
Single value for static engine size, or a tuple for size range [min, max] in pixels.
Dashboard is a component for flexible positioning of multiple Charts efficiently. It is created with LightningChart.Dashboard method.
Upon its creation an amount of columns and rows is specified. Charts and other components can then be placed in cells with given column and row-locations and sizes (using methods of Dashboard. For example: Dashboard.createChartXY.
The Dashboard will distribute the available space for columns and rows, which users can resize with mouse and touch interactions or programmatically.