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

Data grid is currently not available as part of free trials downloaded from our web site! To trial data grid, please contact us.

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.onCellMouseClick((cell, event) => {
    console.log('user clicked on', cell)
})

Positioning charts

Please see common Positioning charts section.

Color themes

Please see common Color themes section.