Interface PublicEngine

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()

Returns

Icon object.

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

Returns

JavaScript Blob whose 'type' depends on what was passed to 'type' parameter of this method. Defaults to image/png

Translates a coordinate on the web page (for example, MouseEvent.clientX, MouseEvent.clientY) that originates from browser top-left, to scale.

 // Example usage, listen to chartXY background mouse move and console the location on default axis.
 chart.onSeriesBackgroundMouseMove((_, event) => {
     // Translate mouse location to LCJS coordinate system for solving data points from series, and translating to Axes.
     const mouseLocationEngine = chart.engine.clientLocation2Engine(
         event.clientX,
         event.clientY
     );

     // Translate LCJS coordinate to default chart axes.
     const mouseLocationAxis = translatePoint(mouseLocationEngine, chart.engine.scale, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY() })
     console.log('axis', mouseLocationAxis)
 })

To further translate a location on engine.scale to another coordinate system, like axis, use translatePoint function.

This feature is extremely powerful since it allows combining of LCJS and HTML/CSS or any web UI framework.

Returns

Respective coordinate on engine.scale

Translates a coordinate on engine.scale that originates from LCJS bottom-left to respective location on the web page currently.

This coordinate can, for example, be used with absolute CSS positioning:

 // Example usage, absolute position a HTML element on a coordinate along two LCJS Axes.
 const element = document.createElement('span')
 chart.engine.container.append(element)
 element.style.position = 'absolute'
 element.style.display = 'block'
 element.innerHTML = 'hello'
 element.style.color = 'red'

 const repositionElement = () => {
     // Position HTML element with CSS by translating LCJS Axis location to web page.
     const locationAxis = { x: chart.getDefaultAxisX().getInterval().start, y: chart.getDefaultAxisY().getInterval().end }
     const locationEngine = translatePoint(locationAxis, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY() }, chart.engine.scale)
     const locationDocument = chart.engine.engineLocation2Client(locationEngine.x, locationEngine.y)
     element.style.left = `${locationDocument.x}px`
     element.style.top = `${locationDocument.y}px`
 }

 // NOTE: Axis -> Document translation is invalid if one of many things changes:
 // 1. Axis interval, style or ticks change.
 // 2. Web page is scrolled, zoomed or resized.
 // 3. Dashboard splitter is resized.
 // In this example, the element is repositioned continuously, which might not always be for the best.
 setInterval(repositionElement)

This feature is extremely powerful since it allows combining of LCJS and HTML/CSS or any web UI framework.

Get Fill Style of engine background.

Returns

FillStyle

Get Stroke Style of engine background.

Returns

LineStyle

Calculate the layout again. This should be called when the container of chart is resized.

 // Example syntax, trigger chart resize on user event.
 myResizeEventCallback(() => {
     // Trigger chart resize manually.
     chart.engine.layout()
 })

Render a frame of specific size to a ArrayBuffer.

Mainly for Node JS usage. In browser the chart itself will not be resized correctly.

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) }))

Returns

Object itself

Set Stroke Style of engine background.

Returns

Object itself