Class DataGrid

Add callback function to be triggered when specified event is fired.

 // Example syntax
 object.addEventListener('click', (event) => {
     console.log(event)
 })

Some classes also report extra information about the interacted object with the second parameter:

 // Most series share information about interacted data point
 series.addEventListener('click', (event, info) => {
     console.log(info)
 })

Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:

 // Example this listener will only fire once
 object.addEventListener('click', (event) => {})

Each class has its own list of supported events. Some events are from HTML standard (click, pointerdown, etc.), while others are own events from LightningChart JS (dispose, resize, etc.)

To find what events are available, you can try following:

• If your development environment has TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.
• Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

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

Returns

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.

Returns

Boolean that describes whether drawing the theme effect is enabled around the component or not.

Get last column index in Data Grid, taking into account column span.

The returned value identifies the last occupied column index.

Returns

Last occupied column index in Data Grid.

Gets the fill style of the area behind all cells.

Returns

Current fill style object

Get minimum size of Chart. Depending on the type of class this value might be automatically computed to fit different elements.

Returns

Vec2 minimum size or undefined if unimplemented

Get last row index in Data Grid, taking into account row span.

The returned value identifies the last occupied row index.

Returns

Last occupied row index in Data Grid.

Get currently active user interaction scheme. This does NOT return the last value supplied to setUserInteractions. Rather, it considers the current structure of the chart, all built-in defaults as well as overrides supplied by the user and returns the currently used interaction scheme.

Returns

DataGridInteractions

Introduced in v7.0.0. API may change according to user feedback.

Remove the cell at the intersection of the specified column and row.

 // Example usage
 DataGrid.removeCell(4,0)

Returns

Object itself.

Removes all cells.

 // Example usage
 DataGrid.removeCells()

Returns

Object itself.

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)

Returns

Object itself.

Remove event listener added using addEventListener. The expected argument should be the exact same callback function that was supplied using addEventListener:

 // Basic example syntax
 const listener = () => {}
 obj.addEventListener('click', listener)
 obj.removeEventListener('click', listener)

 // Basic boilerplate of custom interaction when user drags on an object
 obj.addEventListener('pointerdown', (eventDown) => {
     let prevCoord = eventDown
     const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
         const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
         prevCoord = eventMove
         console.log(delta, eventMove.clientX, eventMove.clientY)
     }
     const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
         window.removeEventListener('pointermove', handlePointerMove)
         window.removeEventListener('pointerup', handlePointerUp)
     }
     window.addEventListener('pointermove', handlePointerMove)
     window.addEventListener('pointerup', handlePointerUp)
 })

Remove all cells along a specified row. Removing a row shifts the row indexes of all cells below the removed row.

 // Example usage
 DataGrid.removeRow(5)

Returns

Object itself.

Disable/Enable all animations of the Chart.

NOTE: Data grid doesn't currently have any built in animations, so this method does not do anything.

Returns

Chart itself for fluent interface.

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.

Returns

Object itself.

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.

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, })

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')

Merge several cells together and set their content. Any rectangular set of cells can be merged together, which results in the following effects:

• Merged cells have shared content, style, borders and background.
  • Altering any of the cells will affect the merged cells as one unit.
  • Altering the content of any of the merged cells will undo the merge.
• Merged cells width is equal to the sum of all its columns widths, and vice versa for height.

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')

Returns

Object itself

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.

Returns

Object itself.

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.

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.

See

Padding for padding along configurable directions.

Returns

Object itself.

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.

Returns

Object itself.

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.

Returns

Object itself.

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.

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.

Returns

Object itself.

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.

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')

Returns

Object itself.

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.

See

Padding for padding along configurable directions.

Returns

Object itself.

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.

Returns

Object itself.

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.

Returns

Object itself.

Set background fill style of cells at the supplied column.

This does not affect any cells that are defined after the method is called.

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, })

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'])

Returns

Object itself.

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.

Returns

Object itself.

Set highlight state of cells at the supplied column.

This does not affect any cells that are defined after the method is called.

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.

See

Padding for padding along configurable directions.

Returns

Object itself.

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.

Returns

Object itself.

Set text font of all cells along a specified column.

This does not affect any cells that are defined after the method is called.

Returns

Object itself.

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 })

Returns

Object itself.

Set fill style of the area behind all cells.

Returns

Object itself for fluent interface.

Set background fill style of cells at the supplied row.

This does not affect any cells that are defined after the method is called.

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, })

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'])

Returns

Object itself.

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.

Returns

Object itself.

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 })

Returns

Object itself.

Set highlight state of cells at the supplied row.

This does not affect any cells that are defined after the method is called.

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.

See

Padding for padding along configurable directions.

Returns

Object itself.

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.

Returns

Object itself.

Set text font of all cells along a specified row.

This does not affect any cells that are defined after the method is called.

Returns

Object itself.

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']
 ])

Returns

Object itself.

Configure user interactions from a set of preset options.

Without any explicit configuration, the charts select the default user interaction scheme based on available information, such as axis types, attached series and data supplied to series.

The setUserInteraction methods allow explicitly configuring the used interaction scheme.

 // Example, disable all user interactions
 chart.setUserInteractions(undefined)

Returns

Object itself.

Introduced in v7.0.0. API may change according to user feedback.