Data Grid

DataGrid is a feature that displays content as a flexible grid, with rows and columns and each cell having its own content. Data grid supports a variety of cell content types such as text, numbers, colors, icons and spark charts.

// Creation of DataGrid
const lc = lightningChart()
const dataGrid = lc.DataGrid()

Cell content

Cell content can be set using a few different methods:

dataGrid.setCellContent(0, 0, 'Hello')
dataGrid.setRowContent(0, ['Column 0', 'Column 1'])
dataGrid.setColumnContent(0, ['Row 0', 'Row 1'])
dataGrid.setTableContent([
    ['Header 0', 'Header 1'],
    ['Cell 0.0', 'Cell 0.1'],
    ['Cell 1.0', 'Cell 1.1'],
])

Type of each cell content can be one of: string, number, undefined, Icon or SparkChart.

Icons

Icons are loaded from JavaScript Image objects.

const myImage = new Image()
myImage.src = 'picture.jpg'
const icon = dataGrid.engine.addCustomIcon(myImage, { height: 32 })
dataGrid.setCellContent(0, 0, icon)

Spark charts

Data grid offers following types of spark charts: line charts, bar charts, win-loss charts, area charts and pie charts.

// Example, spark line chart
let data: { x: number, y: number }[]
dataGrid.setCellContent(0, 0, {
    type: 'spark-line',
    data,
})

For full list of available configurations, see SparkChart in API reference.

Content alignment

// Example, set content alignment of 1 cell
dataGrid.setCellContentAlignment(0, 0, 'left-center')
// Example, set default content alignment of all existing and future cells
dataGrid.setCellsContentAlignment('left-center')

Familiar convenience methods are also available:

• DataGrid.setRowContentAlignment
• DataGrid.setColumnContentAlignment

Cell backgrounds

const fillRed = new SolidFill({ color: ColorRGBA(255, 0, 0) })
// Example, set background of 1 cell
dataGrid.setCellBackgroundFillStyle(fillRed)
// Example, set default background of all existing and future cells
dataGrid.setCellsBackgroundFillStyle(fillRed)

Familiar convenience methods are also available:

• DataGrid.setRowBackgroundFillStyle
• DataGrid.setColumnBackgroundFillStyle

For more details about style API, please see Styles, colors and fonts.

Cell borders

// Example, set border visibility of 1 cell
dataGrid.setCellBorders(0, 0, { bottom: true })
// Example, set default border visibility of all existing and future cells
dataGrid.setCellsBorders(undefined)

// Example, border stroke style
dataGrid.setCellsBorderStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }) }))

For more details about style API, please see Styles, colors and fonts.

Cell text font and color

// Example, set text fill of 1 cell
dataGrid.setCellTextFillStyle(0, 0, new SolidFill({ color: ColorRGBA(255, 0, 0) }))
// Example, set default font of all existing and future cells
dataGrid.setCellsTextFont((font) => font.setSize(10))

Familiar convenience methods are also available:

• DataGrid.setRowTextFillStyle
• DataGrid.setColumnTextFillStyle
• DataGrid.setRowTextFont
• DataGrid.setColumnTextFont

For more details about style API, please see Styles, colors and fonts.

Cell padding

// Example, set padding of 1 cell
dataGrid.setPadding(0, 0, { bottom: 10, top: 10 })
// Example, set default padding of all existing and future cells
dataGrid.setCellsPadding(10)

Familiar convenience methods are also available:

• DataGrid.setRowPaddings
• DataGrid.setColumnPaddings

Cell highlighting

Cells can be highlighted, applying a brighter or darker color based on active color theme.

dataGrid.setCellHighlight(0, 0, true)

Familiar convenience methods are also available:

• DataGrid.setRowHighlight
• DataGrid.setColumnHighlight

Grid background color

dataGrid.setGridBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Column widths and Row heights

// 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 })
// Example, set second row height to 100 px
dataGrid.setRowHeight(1, 100)

Title

dataGrid
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style

DataGrid has 2 different levels of backgrounds:

• Chart background (entire chart area)
• Engine background (additional background shared by entire engine)
  • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.

dataGrid
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
dataGrid.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart

dataGrid.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations

const dataGrid = lc.ChartXY({ animationsEnabled: false })

User interactions

Data grid does not have any built-in user interactions. User interactions on cells can be tracked using the Event API:

dataGrid.cells.addEventListener('click', (event, cell) => {
    console.log('user clicked on', cell)
})

Positioning charts

Please see common Positioning charts section.

Color themes

Please see common Color themes section.