JavaScript Dashboard With LegendBox

This example shows a simple dashboard with multiple chart types and LegendBox Panel.

The dashboard allows rendering of multiple scenes in a single view port highly efficiently with minimal memory resources. During the creation of a dashboard instance, the amount of rows and columns will have to be specified. This can not be changed afterwards.

// Create a dashboard with three rows and two columns.
const dashboard = lightningChart().Dashboard({
    numberOfRows: 3,
    numberOfColumns: 2,
})

Charts and Panels can then be added to the dashboard like follows:

// Create a ChartXY that occupies the top row of the dashboard.
const chartXY = dashboard.createChartXY({
    // Row index (starting from bottom).
    columnIndex: 2,
    // Column index (starting from left).
    rowIndex: 0,
    // Row span (height, basically).
    columnSpan: 1,
    // Column span (width, basically).
    rowSpan: 2,
})

Dashboards have separate methods for adding a different kind of Charts or Panels. Dashboard represents a grid with rows & columns. During the creation of the element, the row & column indices and the horizontal & vertical spans should be specified to position it in the correct place and fill the desired amount of cells.

// Create a spider chart and attach to dashboard.
// Row 0, Column 0, Rows to fill 2, Columns to fill 1.
const spiderChart = dashboard.createSpider(0, 0, 2, 1)

// Create a Legend Box Panel and attach to dashboard.
// Row 0, Column 1, Rows to fill 2, Columns to fill 1.
const legendBox = dashboard.createLegendBoxPanel({
    columnIndex: 0,
    rowIndex: 1,
    columnSpan: 2,
    rowSpan: 1,
})

The dashboard rows and columns can have varying heights and widths respectively - you can resize them by clicking and dragging on the grid line separating the columns and rows from each other, or by using methods to set them programmatically:

// Set height of the first row of a dashboard.
// By default each row and column has a size of 1.
// The size is always relative to the combined size of each row / column.
dashboard.setRowHeight(0, 2)
// Set width of the first and the second column of a dashboard.
// First column width will be 2/5 of the entire view's width.
dashboard.setColumnWidth(0, 2)
// Second column width will be 3/5 of the entire view's width.
dashboard.setColumnWidth(1, 3)