Interface LightningChartOptions

Interface for configuring LightningChart JS initialization, before any charts or series are created.

Supplied when lightningChart function is called:

 const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.
     // license: 'my-license-number'
 })

 // Create charts...
 const chart = lcjs.ChartXY()

Hierarchy

  • LightningChartOptions

Properties

license? licenseInformation? overrideInteractionMouseButtons? resourcesBaseUrl? sharedContextOptions? warnings?

Properties

Optional license

license?: string

Optional development or deployment license. If omitted, a community license will be used.

Optional licenseInformation

licenseInformation?: AppDeploymentLicenseInformation

Additional information for license verification. Only required by Application Deployment license.

Optional overrideInteractionMouseButtons

overrideInteractionMouseButtons?: OverrideInteractionMouseButtons

Optionally supplieable data structure for overriding mouse buttons that trigger user interactions.

See OverrideInteractionMouseButtons for full list of supported overrides.

Example usage:

  • Swap ChartXY panning and zoom/fit mouse buttons.
 const lcjs = lightningChart({
     // LightningChartOptions
     overrideInteractionMouseButtons: {
         chartXYPanMouseButton: 0, // LMB
         chartXYRectangleZoomFitMouseButton: 2, // RMB
     }
 })

 // Create charts...
 const chart = lcjs.ChartXY()

Optional resourcesBaseUrl

resourcesBaseUrl?: string

Specify URL path to file server that hosts LightningChart JS resources.

LightningChart JS is distributed along with some resource files, which are required for select features only:

  • MapChart (resources/maps/)
  • OnScreenMenu (resources/osm/)
  • Themes with background pictures (resources/themes)

When any of these features are used, the user has to ensure that the necessary resources are hosted on a file server where LightningChart JS can fetch them. In official LightningChart JS example frameworks, templates and projects, this setup is usually done beforehand.

Example local file server with http-server from node_modules:

 npm i --global http-server
 cd node_modules/@arction/lcjs/dist/resources
 http-server --cors

 const lcjs = lightningChart({
     resourcesBaseUrl: 'http://127.0.0.1:8081', // <--- or whichever port http-server assigned.
 })

Node Js:

When using LightningChart JS in Node JS environment with lcjs-headless you will need to provide a path to the resource files. This path needs to be provided with syntax fs:<path>. For example:

 const lcjs = lightningChart({
     resourcesBaseUrl: `fs:${path.resolve(__dirname, 'node_modules', '@arction', 'lcjs', 'dist', 'resources')}`
 })

Troubleshooting:

If LightningChart JS can't fetch any required resource, it will result in an error. Here is a list of common resource issues:

1. Resources are not hosted.

In LightningChart JS template projects, the hosting of resources is built-in. However, in users own projects, it is the users responsibility to setup a file server for LightningChart JS resources if they are required.

2. Resources server URL is wrong.

Please make sure that the configured resourcesBaseUrl points to URL landing inside resources folder.

resourcesBaseUrl should not end with a '/'. For example, 'http://127.0.0.1:8081' is a valid value. 'http://127.0.0.1:8081/' might result in an error.

3. Request is CORS blocked.

A common issue especially when first starting development / testing. For example, when hosting resources folder with http-server npm module, the extra cors flag must be supplied.

 cd node_modules/@arction/lcjs/dist/resources
 http-server --cors

Optional sharedContextOptions

sharedContextOptions?: {
    antialias?: boolean;
    canvas?: string | HTMLCanvasElement;
    devicePixelRatio?: number | boolean;
    noCanvasStyles?: boolean;
    noCanvasTransform?: boolean;
    useIndividualCanvas?: boolean;
    useStackingOrder?: boolean;
    webgl?: {
        version?: "webgl2" | "webgl1";
    };
}

Options for shared context rendering.

Type declaration

  • Optional antialias?: boolean

    Set preference for anti-aliasing.

    If set to true or undefined and browser supports anti-aliasing then the chart will be anti-aliased. If set to false or browser doesn't support anti-aliasing then the chart will not be anti-aliased.

  • Optional canvas?: string | HTMLCanvasElement

    Provide specific canvas element to use for rendering.

    Allows for more complex layout scenarios. Needed when HTML content is both under and above the charts.

  • Optional devicePixelRatio?: number | boolean

    Device pixel ratio to use for composing the charts to final canvas. Can be different from the pixel ratio used to render the charts.

  • Optional noCanvasStyles?: boolean

    Prevent LCJS from adding it's default CSS styles to the canvas element.

    Can be useful in more complex layout scenarios.

  • Optional noCanvasTransform?: boolean

    Disable LCJS automatically moving the canvas with scrolling to keep it in static position relative to browser viewport.

    Can be useful in more complex layout scenarios.

  • Optional useIndividualCanvas?: boolean

    Enable the usage of individual canvas rendering.

    This rendering method provides better support for more complex web site layouts. The tradeoff is that on some browsers it adds significant overhead slowing down rendering.

    When enabled, each chart will have it's own canvas placed inside of the given container. This allows normal CSS and HTML layout usage to create complex overlapping layouts.

    The default rendering method uses a single canvas to render all charts. This provides a lot more consistent performance but comes with the drawback of making overlapping layouts harder to do and sometimes impossible.

  • Optional useStackingOrder?: boolean

    Disable automatic stacking order updates.

    Only used when not using individual canvas rendering method.

    This can improve performance on large dom trees when stacking of charts on top of each other is not required.

    Set to false to disable. Enabled by default.

  • Optional webgl?: {
        version?: "webgl2" | "webgl1";
    }

    Pass instructions regarding WebGL (rendering engine framework).

    • Optional version?: "webgl2" | "webgl1"

      Force specific WebGL version to be used.

      LightningChart JS supports WebGL versions 2 and 1. WebGL 2 is used when available (better performance).

      If a specific version is selected, then it is always used, or if it is not available then the chart will crash. This can be useful for debugging a specific WebGL version.

Optional warnings

warnings?: boolean

Optional configuration for instructing desired reaction to warnings that can have small side-effects, like decreasing performance or which might indicate issues in application code.

By default these warnings are enabled, which might result in some output to browser console, stdout or such channels.

By setting warnings to false, this kind of warnings can be disabled.

 // Example syntax, disable low-level warnings.
 const chart = lightningChart({
     warnings: false
 }).ChartXY()

Settings

Member Visibility

Theme