HTML Div element that contains the rendering Engine.
Restore Mouse style.
Optional key: numberKey generated using 'setMouseStyle'
Set Mouse style.
Key that can be used to restore Mouse style
Name of a Mouse preset in js.
Optional existingKey: numberKey for existing request to refresh
Register a custom Icon that can be used within the engine (all charts, panels, series, etc. using the same engine).
Note that currently the Icon concept is not widely supported, and can only be used with the DataGrid feature as cell content. In the future, Icons will be more widely utilizable, for example in Legends, Cursors and UI elements.
// Example, load a custom icon.
const img = new Image()
img.src = `my-icon-url.jpg`
const icon = chart.engine.addCustomIcon(img, {})
Icon properties can be supplied with the optional second parameter. For all available options, see IconProperties.
// Example, specify icon width as pixels and maintain source aspect ratio.
const icon = chart.engine.addCustomIcon(img, { width: 32 })
Icon properties can also be adjusted using setter methods on an existing Icon object.
All setters return a new Icon object, leaving the original Icon unmodified!
// Example, make a second Icon object by adjusting an existing one.
const icon2 = icon.setSize(16, 24)
When a custom icon is no longer needed, it is recommended to inform the engine by disposing the Icon:
// Example, inform engine that an Icon is no longer needed.
icon.dispose()
Icon object.
Graphics source for the Icon.
Optional opts: Partial<IconProperties>Optional properties for configuring the Icon.
Capture state of rendering Engines canvas. Returns the captured image as a Blob-object.
Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
JavaScript Blob whose 'type' depends on what was passed to 'type' parameter of this method. Or as a data url if the asDataUrl option was set to true
Defaults to image/png
Optional type: stringA DOMString indicating the image format. The default format type is image/png.
Optional encoderOptions: numberA Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.
Optional type: stringOptional encoderOptions: numberOptional asDataUrl: booleanCalculate the layout again.
This is used to inform charts that their position may have changed as a result of an Event that the charts are not aware of. For example, if the chart is positioned within a scrollable DIV.
// Example syntax, trigger chart layout when it is scrolled.
div.onscroll = () => chart.engine.layout()
Add callback function which is triggered whenever the engine renders a frame.
Can be used for FPS measurement and debugging mainly.
Token which can be used to unsubscribe from event.
Function which is called on event.
Render a frame of specific size to a ArrayBuffer.
Mainly for Node JS usage. In browser the chart itself will not be resized correctly.
Horizontal resolution
Vertical resolution
Optional noFlip: booleanLeave the image upside down
Set Fill Style of engine background.
Every LCJS component has an Engine background under it. In case of Dashboard, there is only 1 shared engine background.
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or mutator to modify existing one.
Set Stroke Style of engine background.
Object itself
LineStyle
Interface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).
Commonly used properties: