Interface LightningChart

Factory for Chart3D. This chart visualizes data in three dimensions. It has built-in Axis and camera functionality, and supports a collection of different series types.

To learn more about its features, refer to Chart3D.

Readonly configuration:

Some properties of Chart3D can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Chart3D({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For Chart3D specific properties, refer to ChartOptions3D.

Returns

Created chart.

Factory for ChartXY. This chart visualizes data between two dimensions X and Y. It has built-in Axis functionality, and supports a large set of series types.

To learn more about its features, refer to ChartXY.

Readonly configuration:

Some properties of ChartXY can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.ChartXY({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For ChartXY specific properties, refer to ChartXYOptions.

Returns

Created chart.

Factory for Dashboard. Dashboard allows placement of multiple charts inside a grid layout. Usage of dashboard is recommended when applicable, due to increased performance (shared rendering context for all charts).

To learn more about dashboard features, refer to Dashboard.

Dashboard configuration:

When a dashboard is created, the user must specify an amount of columns and rows for the grid layout. These dimensions can't be changed afterwards, whereas the distribution of width/height between the columns and rows, can be adjusted at any time.

 // Example, Create a 3x3 dashboard.
 const dashboard = LightningChart.Dashboard({
     // Number of cells along horizontal plane.
     numberOfColumns: 3,
     // Number of cells along vertical plane.
     numberOfRows: 3,
 })

To learn about the effects of columns / rows configuration, please read more here Dashboard.

Optional extra configuration:

Some extra, optional properties of Dashboard can only be configured when it is created. These arguments are all optional, and are wrapped in the same object parameter that is used for supplying numberOfColumns, and numberOfRows.

 // Example, create 3x3 dashboard inside DOM element managed by user. The element must be added to the document, before creating the dashboard.
 const chart = LightningChart.Dashboard({
     // Number of cells along horizontal plane.
     numberOfColumns: 3,
     // Number of cells along vertical plane.
     numberOfRows: 3,
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general dashboard properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For Dashboard specific properties, refer to DashboardOptions.

Dashboard examples:

You can find an interactive gallery of different Dashboard use cases on our web site lightningchart.com

Returns

Created dashboard.

Create a DataGrid component. This component visualizes data inside a grid structure using a variety of methods, such as text, numbers, spark charts and colored backgrounds.

To learn more about its features, refer to DataGrid.

Readonly configuration:

Some properties of DataGrid can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create data grid inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const dataGrid = LightningChart.DataGrid({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For the full list of readonly configuration properties, refer to EngineOptions.

Returns

DataGrid.

Factory for FunnelChart. This chart visualizes proportions and percentages between categories.

To learn more about its features, refer to FunnelChart.

Readonly configuration:

Some properties of FunnelChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Funnel({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For FunnelChart specific properties, refer to FunnelChartOptions.

Return type:

FunnelChart return type depends on supplied readonly configuration! Specifically, type.

Returns

Created chart.

Factory for GaugeChart. Gauge charts indicate where your data point(s) falls over a particular range. This chart type is often used in executive dashboard reports to show key business indicators.

To learn more about its features, refer to SolidGauge.

Readonly configuration:

Some properties of GaugeChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Gauge({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For GaugeChart specific properties, refer to GaugeChartOptions.

Returns

Created chart.

Factory for MapChart. This chart visualizes a Map of the selected part of the world. Defaults to the entire world. It has built-in cursor functionality and supports dynamic region coloring.

To learn more about its features, refer to MapChart.

Readonly configuration:

Some properties of MapChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, specify map type.
 const chart = LightningChart.Map({
     type: MapTypes.Europe
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For MapChart specific properties, refer to MapChartOptions.

Required resources:

MapChart requires external file resources in order to work. These resources are distributed along with the LightningChart JS package (node_modules/@arction/lcjs/dist/resources).

In order to use MapChart the map resources need to be hosted on a file server. When MapChart is created, a GET request will be issued to URL: <resourcesBaseUrl>/maps/<mapDataFile>.

The file server location can be specified by supplying a resourcesBaseUrl (see resourcesBaseUrl).

The following table documents which resource files are required based on used Map type:

Returns

Created chart.

Factory for PieChart. This chart visualizes proportions and percentages between categories, by dividing a circle into proportional segments.

To learn more about its features, refer to PieChart.

Readonly configuration:

Some properties of PieChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Pie({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For PieChart specific properties, refer to PieChartOptions.

Return type:

PieChart return type depends on supplied readonly configuration! Specifically, type.

Returns

Created chart.

Factory for PolarChart. This chart visualizes data in a Polar coordinate system ( angle + amplitude ). It has built-in Axis functionality, and supports a collection of different series types.

To learn more about its features, refer to PolarChart.

Readonly configuration:

Some properties of PolarChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Polar({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For PolarChart specific properties, refer to PolarChartOptions.

Returns

Created chart.

Factory for PyramidChart. This chart visualizes proportions and percentages between categories.

To learn more about its features, refer to PyramidChart.

Readonly configuration:

Some properties of PyramidChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.Pyramid({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For PyramidChart specific properties, refer to PyramidChartOptions.

Return type:

PyramidChart return type depends on supplied readonly configuration! Specifically, type.

Returns

Created chart.

Factory for SpiderChart. This chart visualizes data distributed over several axes. Spider Axes are layed out in a circle, without any set limit on the amount of axes. It supports a collection of different series types.

To learn more about its features, refer to SpiderChart.

Readonly configuration:

Some properties of SpiderChart can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create chart inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const chart = LightningChart.SpiderChart({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-chart-div'
 })

For general chart properties, like specifying DOM container, rendering engine configuration, refer to EngineOptions.

For SpiderChart specific properties, refer to SpiderChartOptions.

Returns

Created chart.

Factory for UIPanel. This component can only be used to anchor UI elements outside of any particular chart.

To learn more about its features, refer to UIPanel.

Readonly configuration:

Some properties of UIPanel can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

 // Example, create panel inside DOM element managed by user. The element must be added to the document, before creating the chart.
 const panel = LightningChart.UIPanel({
     // Argument can be either *element id* or actual reference to the HTML element.
     container: 'my-panel-div'
 })

For full list of available properties, refer to EngineOptions.

Returns

Created UI panel.