Grouping charts

LightningChart JS excels at applications that require several charts to be visible on the same web page. In normal use cases, the library groups all charts to use a shared rendering engine for the best performance.

All the user has to do, is ensure that they initialize only 1 instance of LightningChart:

const lc = lightningChart()
const chart1 = lc.ChartXY()
const chart2 = lc.ChartXY()
...

Each individual chart can be positioned independently using CSS, just like normal (Positioning charts). This makes it straight-forward to create applications involving complex layouts and hiding or rearranging charts.

Below you can find some concrete examples of the most common Dashboard use cases:

• Re-arrangeable Dashboard
• Scrollable Dashboard
• Dynamic Dashboard

Advanced use cases

In most situations, charts grouping doesn't require any attention from user apart from the things listed above. However, there are WebGL context sharing configuration options available that can be relevant in very specific situations.

Shared canvas mode

By default, LightningChart gives each chart their own individual HTML <canvas> element. In most cases, this is the best mode of operation. However, in some cases there is a potential alternative, "shared canvas mode", which uses 1 <canvas> to display all charts of the LightningChart instance (created with lightningChart function). This can be more performant for example when:

• Your application has 20+ charts visible at the same time.
• Your application has only ~10 charts visible at the same time, but they have considerably heavy content.
• Your application has multiple charts and are very large (for example, 4K display full-screen dashboard).

Apart from these reasons, there may also be browser specific motivators to use shared canvas mode. At time of writing, Mozilla Firefox was tested to have relatively poor performance when using individual <canvas> elements.

Shared canvas mode can be enabled as follows:

const lc = lightningChart({
    sharedContextOptions: {
        useIndividualCanvas: false
    }
})

More information

For all available shared context options, you can find LightningChartOptions in API documentation and browse to sharedContextOptions property.

Legacy Dashboard feature

Before version 5.0.0 and the introduction of WebGL context sharing, chart grouping was usually done using the Dashboard feature. This could and still can be used to create a grid of panels where you can place any number of charts which reuse the same WebGL instance. Dashboard is still used in many online examples.

For new end user integrations, we recommend to not use Dashboard any more, and rather follow the basic guidance of grouping charts using WebGL context sharing.

Usage of Dashboard feature looks like this:

const dashboard = lightningChart().Dashboard({
    numberOfColumns: 2,
    numberOfRows: 2
})
const chart1 = dashboard.createChartXY({
    columnIndex: 0,
    rowIndex: 0,
})
...

Instead of this, we recommend to use CSS based layouts with each chart having their own <div> container.