Interface EngineSettings

Interface specifies settings for Engine.

Hierarchy

  • EngineSettings

Properties

antialias? devicePixelRatio? interactable? lineAntiAlias? maxFps? pickingPrecision? textPixelSnappingEnabled? theme? webgl?

Properties

Optional Readonly antialias

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 Readonly devicePixelRatio

devicePixelRatio?: number | boolean

Set device pixel ratio.

This ratio is used to support high DPI devices. This should be set to true when the meta tag "viewport" has been set to "width=device-width" and you want to let the chart automatically determine the device pixel ratio to use.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Set this to a specific number if you want to use a specific device pixel ratio.

By default, device pixel ratio of 1 will be used.

If this option is not specified the ratio will be automatically decided based on the existence of the viewport meta tag and the content of the tag if found.

Optional Readonly interactable

interactable?: boolean

Flag that can be used to disable all user interactions from created chart components.

This can be useful in server side rendering applications and also on frontend side when the user interactions are not needed.

Disabling user interactions can provide significant benefits to the performance and loading speed of charts.

By default, charts are always interactable.

 // Example, create chart without user interactions.
 const chart = lightningChart().ChartXY({
     interactable: false,
 })

Optional Readonly lineAntiAlias

lineAntiAlias?: boolean

Set preference for high quality line anti-aliasing.

If set to true or undefined and browser supports OES_standard_derivatives or WebGL2 then the non-primitive lines (thickness !== -1) will be anti-aliased. If set to false or browser doesn't support the OES_standard_derivatives extension or WebGl2 then the lines will not be anti-aliased with high quality but the line might me anti-aliased with default hardware anti-aliasing.

Setting antialias to false will also disable line anti-aliasing.

Optional Readonly maxFps

maxFps?: number

Max FPS (frames-per-second). Setting this will postpone rendering events that would otherwise happen, if it would result in FPS higher than the value.

NOTE: This property can't be used to accurately specify actual FPS as it is dictated by the browser. The purpose for 'maxFps' is to limit unnecessary rendering loads where they are not needed.

Optional Readonly pickingPrecision

pickingPrecision?: "high" | "low" | "best"

Specify precision level for interacting on charts with mouse, touch and other pointer devices.

The required precision can have a significant effect on charts performance. By default, a relatively low precision is used. When required, the precision can be increased by supplying a different value with this parameter.

Possible values:

  • undefined | Default picking precision.
  • 'low' | Use lower precision than the default. This will result in better performance but less precision with mouse, touch and other pointers.
  • 'high' | Use higher precision than the default. This will result in decreased performance but better precision with mouse, touch and other pointers.
  • 'best' | Use the best available picking precision. This will result in decreased performance but better precision with mouse, touch and other pointers.

Example usage:

 // Specify picking precision when a chart or dashboard is created.
 const chart = lightningChart().ChartXY({
     pickingPrecision: 'high'
 })

Optional Readonly Beta textPixelSnappingEnabled

textPixelSnappingEnabled?: boolean

Text snapping to pixel enabled or disabled. By default true.

Text quality is sharper and clearer with pixel snapping, but in some cases it can show as undesirable "moving" or "bouncing" of text. So far this has been observed in slowly scrolling applications. If this becomes an issue in your application, try disabling text pixel snapping like below:

 // Example, disable text pixel snapping
 const chart = lightningChart().ChartXY({ textPixelSnappingEnabled: false })

This is an experimental feature, meaning that if it should become deprecated it will likely be immediately removed even without a major release. However, in this case an alternative method or fix to the issues solved with textPixelSnappingEnabled will also be introduced.

If you need to use textPixelSnappingEnabled in your application, please consider informing the developers of LightningChart JS at [email protected] You do not need to share any extensive details about yourself, your company or your use case. However, it is important for us to get some idea if users start depending on this property. A simple message like "Hi, I just encountered a problem related to text pixel snapping and had to disable it with the textPixelSnappingEnabled flag." will do perfectly fine.

Optional Readonly theme

theme?: Theme

Color theme for the component.

A collection of default implementations can be accessed by Themes.

 // Example, specify color theme of chart.
 const chart = LightningChart.ChartXY({
     theme: Themes.light
 })

For custom color themes, refer to FAQ in API documentation and read section "How to use Custom Color Themes?".

Optional Readonly webgl

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

Pass instructions regarding WebGL (rendering engine framework).

Type declaration

  • 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.

Settings

Member Visibility

Theme