Factory for Chart3D.
This Chart visualizes data in a 3-dimensional scene, with camera and light source(s).
Currently supports only Point Series, but more series types will be added later on.
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.
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.
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
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, FunnelChartOptions.type.
Configuration type |
Return chart type |
|---|---|
undefined or omitted |
FunnelChartWithLabelsOnSides |
FunnelChartTypes.LabelsOnSides |
FunnelChartWithLabelsOnSides |
FunnelChartTypes.LabelsInsideSlices |
FunnelChartWithLabelsInsideSlices |
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.
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 LightningChartOptions.resourcesBaseUrl).
The following table documents which resource files are required based on used Map type:
| Map type | Map data file |
|---|---|
MapTypes.World |
'countries_world.json' |
MapTypes.Europe |
'countries_europe.json' |
MapTypes.NorthAmerica |
'countries_northAmerica.json' |
MapTypes.SouthAmerica |
'countries_southAmerica.json' |
MapTypes.Africa |
'countries_africa.json' |
MapTypes.Asia |
'countries_asia.json' |
MapTypes.USA |
'states_usa.json' |
MapTypes.Canada |
'territoriesProvinces_canada.json' |
MapTypes.Australia |
'territories_australia.json' |
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, PieChartOptions.type.
Configuration type |
Return chart type |
|---|---|
undefined or omitted |
PieChartWithLabelsOnSides |
PieChartTypes.LabelsOnSides |
PieChartWithLabelsOnSides |
PieChartTypes.LabelsInsideSlices |
PieChartWithLabelsInsideSlices |
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.
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, PyramidChartOptions.type.
Configuration type |
Return chart type |
|---|---|
undefined or omitted |
PyramidChartWithLabelsOnSides |
PyramidChartTypes.LabelsOnSides |
PyramidChartWithLabelsOnSides |
PyramidChartTypes.LabelsInsideSlices |
PyramidChartWithLabelsInsideSlices |
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.
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.
Main interface of LCJS, which is used to create all top level components - charts and dashboards. Reference to
LightningChartis received with the lightningChart export, which is also used to supply possible license information, and other top-level configuration:const lcjs = lightningChart({ // Either supply license number, or omit for automatic community license. // license: 'my-license-number' }) // Create charts... const chart = lcjs.ChartXY()To get started, browse through the available properties, for example: