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).
Scale for panel area in pixels.
Scale for panel area in percentages (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 })
LegendBox
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].
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 })
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].
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
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 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
Unsubscribe from event when a cell in the Data Grid is clicked with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is double clicked with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is pressed with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is dragged with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is dragged for first time with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid dragging stops with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is entered with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is left with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is moved over with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is unpressed with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is wheeled with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is no longer touched.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is clicked with mouse.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Unsubscribe from event when a cell in the Data Grid is touched for first time.
// Example usage
const token = DataGrid.onCellMouseEnter(() => {
// Do stuff ...
})
DataGrid.offCellMouseEnter(token)
True if an event handler was actually removed.
Token which was received when event subscription was made.
Subscribe to mouse-click event on Chart background
Subscribe to mouse-doubleClick event on Chart background
Subscribe to mouse-down event on Chart background
Subscribe to mouse-drag event on Chart background
Subscribe to mouse-drag start event on Chart background
Subscribe to mouse-drag stop event on Chart background
Subscribe to mouse-enter event on Chart background
Subscribe to mouse-leave event on Chart background
Subscribe to mouse-move event on Chart background
Subscribe to mouse-up event on Chart background
Subscribe to mouse-wheel event on Chart background
Subscribe to touch-end event on Chart background
Subscribe to touch-move event on Chart background
Subscribe to touch-start event on Chart background
Subscribe to event when a cell in the Data Grid is clicked with mouse.
// Example usage
DataGrid.onCellMouseClick((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is double clicked with mouse.
// Example usage
DataGrid.onCellMouseDoubleClick((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is pressed with mouse.
// Example usage
DataGrid.onCellMouseDown((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is dragged with mouse.
// Example usage
DataGrid.onCellMouseDrag((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is dragged for first time with mouse.
// Example usage
DataGrid.onCellMouseDragStart((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid dragging stops with mouse.
// Example usage
DataGrid.onCellMouseDragStop((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is entered with mouse.
// Example usage
DataGrid.onCellMouseEnter((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is left with mouse.
// Example usage
DataGrid.onCellMouseLeave((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is moved over with mouse.
// Example usage
DataGrid.onCellMouseMove((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is unpressed with mouse.
// Example usage
DataGrid.onCellMouseUp((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is wheeled with mouse.
// Example usage
DataGrid.onCellMouseWheel((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is no longer touched.
// Example usage
DataGrid.onCellTouchEnd((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is touched while moving.
// Example usage
DataGrid.onCellTouchMove((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe to event when a cell in the Data Grid is touched for first time.
// Example usage
DataGrid.onCellTouchStart((cell, event) => {
// Event happened. `cell` object describes which cell was interacted with.
console.log(cell, event)
})
NOTE: Cell mouse events are picked from cell backgrounds.
If the cell background fill is hidden by setting it to emptyFill, the mouse events are not caught.
To attach mouse interactions to a cell without visible background fill, use transparentFill.
Token which can be used to unsubscribe from the event.
Callback function that is triggered upon event.
Subscribe onDispose event.
This event is triggered whenever the Control (Dashboards and all chart types) is disposed.
// Example usage
Chart.onDispose(() => {
console.log('chert was disposed')
})
Chart.dispose()
Token of subscription
Subscribe to resize event.
This event is triggered whenever the area of chart changes (due to document or dashboard resizing).
// Example usage,
ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
})
Token of subscription
Handler function for event
Remove all cells along a specified column. Removing a column shifts the column indexes of all cells to the right of the removed column.
// Example usage
DataGrid.removeColumn(0)
Object itself.
Column index starting from 0.
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.
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 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.
Set background fill style of a single cell at intersection of supplied column and row.
This does not affect any cells that are defined after the method is called.
Column index starting from 0.
Row index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set selection of visible borders of a single cell at intersection of supplied column and row.
This does not affect any cells that are defined after the method is called.
// Example usage
DataGrid.setCellBorders(0, 0, {top: false, bottom: true, })
Column index starting from 0.
Row index starting from 0.
Object describing the selection of which borders to show, OR undefined as a shorthand for no borders (equivalent to {top: false, bottom: false, right: false, left: false}).
Set content of a single cell at intersection of supplied column and row.
This creates a new cell if it doesn't exist, and overrides any previously set content in the cell.
// Example usage
DataGrid
.setCellContent(0, 0, 'First Name')
.setCellContent(0, 1, 'John')
Column index starting from 0.
Row index starting from 0.
Data grid cell content.
Merge several cells together and set their content. Any rectangular set of cells can be merged together, which results in the following effects:
This creates new cells where don't exist, and overrides any previously set content in the cell.
// Example usage
DataGrid
.setCellContent(0, 0, 2, 2, 'Big header')
.setCellContent(2, 0, 'Small header 1')
.setCellContent(2, 1, 'Small header 2')
Object itself
Column index starting from 0.
Row index starting from 0.
Number of columns to fuse together.
Number of rows to fuse together.
Data grid cell content.
Set cell content alignment of a cell at the intersection of the specified row and column.
// Example usage
DataGrid.setCellContentAlignment(1, 2, 'top-left')
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
Row index starting from 0.
Cell content alignment options.
Set highlight state of a single cell at intersection of supplied column and row.
This does not affect any cells that are defined after the method is called.
Column index starting from 0.
Row index starting from 0.
Highlight state as number between 0 and 1 or Boolean.
Set padding of a cell at the intersection of the specified row and column.
This does not affect any cells that are defined after the method is called.
// Example usage
DataGrid
.setCellPadding(0, 5, 5) // Sets all paddings to 5.
.setCellPadding(0, 10, { top: 2, bottom: 10, left: 5, right: 5 }) // Sets specific paddings.
Padding for padding along configurable directions.
Object itself.
Column index starting from 0.
Row index starting from 0.
Either number as shorthand or
Set text fill style of a cell at the intersection of the specified row and column.
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
Row index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set text font of a cell at the intersection of the specified row and column.
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
Row index starting from 0.
FontSettings or function which modifies the current FontSettings.
Set background fill style of all cells.
This method also modifies the default cell background fill style, which is carried over to any cells that are created afterwards.
FillStyle or function which modifies the current FillStyle.
Set the cell border stroke style for all cells.
// Example usage
DataGrid.setCellsBorderStrokeStyle(new SolidLine({thickness: 2}))
This applies to all existing cells as well as any cells that are created afterwards.
Object itself.
LineStyle or function which modifies the current LineStyle.
Set the default selection of which borders are shown for all cells. This default setting is overridden by any methods that set explicit borders for 1 or several cells.
DataGrid.setCellsBorders({top: false, bottom: true, })
This method also modifies the default cell borders, which is carried over to any cells that are created afterwards.
Object describing the selection of which borders to show, OR undefined as a shorthand for no borders (equivalent to {top: false, bottom: false, right: false, left: false}).
Sets the default content alignment for all cells.
This method also modifies the default cell text alignment, which is carried over to any cells that are created afterwards.
// Example usage
DataGrid.setCellsContentAlignment('top-left')
Object itself.
Content alignment options.
Sets the default padding for all cells.
// Example usage
DataGrid
.setCellsPaddings(5) // Sets all paddings to 5.
.setCellsPaddings({ top: 2, bottom: 10, left: 5, right: 5 }) // Sets specific paddings.
This method also modifies the default cell padding, which is carried over to any cells that are created afterwards.
Padding for padding along configurable directions.
Object itself.
Either number as shorthand or
Sets the default text fill style for all cells.
This method also modifies the default cell text fill style, which is carried over to any cells that are created afterwards.
Object itself.
FillStyle or function which modifies the current FillStyle.
Sets the text font style of all cells.
This method also modifies the default cell text font, which is carried over to any cells that are created afterwards.
Object itself.
FillStyle or function which modifies the current FillStyle.
Set background fill style of cells at the supplied column.
This does not affect any cells that are defined after the method is called.
Column index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set selection of visible borders of a column of cells at the supplied column index.
This does not affect any cells that are defined after the method is called.
DataGrid.setColumnBorders(0, {top: false, bottom: true, })
Column index starting from 0.
Object describing the selection of which borders to show, OR undefined as a shorthand for no borders (equivalent to {top: false, bottom: false, right: false, left: false}).
Set contents of cells along a supplied column.
This creates new cells where they don't exist, and overrides any previously set content over modified cells.
Number of cells is supplied as an Array. If there are more cells that extend further than the supplied Array, they are untouched.
// Example usage
DataGrid
.setColumnContent(0, ['First Name', 'Last Name'])
.setColumnContent(1, ['John', 'Smith'])
Object itself.
Column index starting from 0.
Array of data grid cell content.
Set cell content alignment of all cells along a specified column.
// Example usage
DataGrid.setColumnContentAlignment(0, 'right-center')
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
Cell content alignment options.
Set highlight state of cells at the supplied column.
This does not affect any cells that are defined after the method is called.
Column index starting from 0.
Highlight state as number between 0 and 1 or Boolean.
Set padding of all cells along a specified column.
This does not affect any cells that are defined after the method is called.
// Example usage
DataGrid
.setColumnPaddings(0, 5) // Sets all paddings to 5.
.setColumnPaddings(0, { top: 2, bottom: 10, left: 5, right: 5 }) // Sets specific paddings.
Padding for padding along configurable directions.
Object itself.
Column index starting from 0.
Either number as shorthand or
Set text fill style of all cells along a specified column.
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set text font of all cells along a specified column.
This does not affect any cells that are defined after the method is called.
Object itself.
Column index starting from 0.
FontSettings or function which modifies the current FontSettings.
Method sets width of a single column in Data Grid.
Column width can be specified in several ways; width as pixels, fit to content, minimum width as pixels or maximum width as pixels.
// Example usage, set first column width to exactly 200 pixels
DataGrid.setColumnWidth(0, 200)
// Example usage, set first column max width to 200 pixels
DataGrid.setColumnWidth(0, { max: 200 })
Object itself.
Index of column in Data Grid.
Width of column.
Set fill style of the area behind all cells.
Object itself for fluent interface.
Fill style object or function which modifies it.
Enable/disable default Data Grid interaction of scrolling up/down on mouse wheel.
// Example, disable default interaction.
DataGrid.setInteractionScrollOnWheel(false)
Object itself.
Interaction enabled?
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 background fill style of cells at the supplied row.
This does not affect any cells that are defined after the method is called.
Row index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set selection of visible borders of a row of cells at the supplied row index.
This does not affect any cells that are defined after the method is called.
DataGrid.setRowBorders(0, {top: false, bottom: true, })
Row index starting from 0.
Object describing the selection of which borders to show, OR undefined as a shorthand for no borders (equivalent to {top: false, bottom: false, right: false, left: false}).
Set contents of cells along a supplied row.
This creates new cells where they don't exist, and overrides any previously set content over modified cells.
Number of cells is supplied as an Array. If there are more cells that extend further than the supplied Array, they are untouched.
// Example usage
DataGrid
.setRowContent(0, ['First Name', 'Last Name'])
.setRowContent(1, ['John', 'Smith'])
Object itself.
Row index starting from 0.
Array of data grid cell content.
Set cell content alignment of all cells along a specified row.
// Example usage
DataGrid.setRowContentAlignment(1, 'top-left')
This does not affect any cells that are defined after the method is called.
Object itself.
Row index starting from 0.
Cell content alignment options.
Method sets width of a single row in Data Grid.
Row width can be specified in several ways; height as pixels, fit to content, minimum height as pixels or maximum height as pixels.
// Example usage, set first row height to exactly 200 pixels
DataGrid.setRowHeight(0, 200)
// Example usage, set first row max height to 200 pixels
DataGrid.setRowHeight(0, { max: 200 })
Object itself.
Index of row in Data Grid.
Height of row.
Set highlight state of cells at the supplied row.
This does not affect any cells that are defined after the method is called.
Row index starting from 0.
Highlight state as number between 0 and 1 or Boolean.
Set padding of all cells along a specified row.
This does not affect any cells that are defined after the method is called.
// Example usage
DataGrid
.setRowPaddings(0, 5) // Sets all paddings to 5.
.setRowPaddings(0, { top: 2, bottom: 10, left: 5, right: 5 }) // Sets specific paddings.
Padding for padding along configurable directions.
Object itself.
Row index starting from 0.
Either number as shorthand or
Set text fill style of all cells along a specified row.
This does not affect any cells that are defined after the method is called.
Object itself.
Row index starting from 0.
FillStyle or function which modifies the current FillStyle.
Set text font of all cells along a specified row.
This does not affect any cells that are defined after the method is called.
Object itself.
Row index starting from 0.
FontSettings or function which modifies the current FontSettings.
Set contents of a table of cells originating from column 0 and row 0.
This creates new cells where they don't exist, and overrides any previously set content over the table area.
This does not remove any cell content outside the table area.
// Example usage
DataGrid.setTableContent([
['First Name', 'Second Name'],
['John', 'Smith']
])
Object itself.
2D Array of data grid cell content.
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 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.
Component for visualizing data inside a grid structure using a variety of methods.
DataGridcan be created in two different ways - to learn more about creation time configuration ofDataGrid, please refer to:DataGridis built from any number of Cells, that are positioned across Columns, and Rows. The number of cells is fully dynamic, and can be changed at any time. Furthermore, cells can be merged to span over more than 1 column and/or row.Examples featuring some use cases of
DataGridcan be found on the official LightningChart JS Interactive Examples gallery.DataGrid features
Cell content
As mentioned,
DataGridis fully dynamic, as in cells can be created and removed at any time. Cells are defined by specifying their Content.Each cell can contain text, numbers, an Icon or a Spark Chart. To learn of Spark Charts, see their section below.
There are several different methods for specifying cell content, here's a conclusive list:
Cells can be emptied by setting their content to
undefined, or completely removed with following methods:Cell style
Each cell in a
DataGridcan be styled individually. Each cell has following style properties:Here are methods for setting the style of existing cells (cells whose content has been defined according to section #1):
The default style for new cells can be defined separately. These methods both alter the styles of all existing cells, as well as any cells defined afterwards.
Apart from cell-specific styles, there are also more style setters on
DataGrid, see next section.Data Grid style
Data Grid sizing
By default, the Data Grid size is based on the size of its Cells (fit to content). This can be altered by size instructions on any column, and/or row.
Both of these methods accept several types of instructions:
DataGrid.setColumnWidth(0, 200)DataGrid.setColumnWidth(0, { min: 100 })DataGrid.setColumnWidth(0, { max: 300 })DataGrid.setColumnWidth(0, { min: 100, max: 300 })DataGrid.setColumnWidth(undefined)Spark charts
DataGridsupports placing miniature charts (Spark Chart) inside any number of cells. These can be used to "show data at a glance".To place a Spark Chart, specify the content of a Cell like normal, but instead of supplying string or number, supply an object description of the Spark Chart:
To learn of available types of Spark Charts as well as all optional configuration properties, see SparkChart.
To update the data of a Spark Chart, simply redefine the cell content.
User interactions
DataGridallows subscribing to user interaction events like most LightningChart JS components.Important note, for cell mouse interactions to work, their background must have a non empty fill style. This is true by default. To attach mouse interactions to a cell without visible background fill, use transparentFill.
Use the following methods to attach event handlers to events:
To stop listening to an event, use the respective
off...method, for example offCellMouseEnter.