HTML Div element that contains the rendering Engine.
Restore Mouse style.
Coordinate system that encloses entire LCJS context in pixels starting from bottom left.
Referenced usually by chart.engine.scale
.
The engine scale is used as an intermediary step when translating locations from the web page into LCJS coordinates, or vice versa.
See clientLocation2Engine for translating web page coordinate to engine.scale
and
engineLocation2Client for translating engine.scale
coordinate to web page.
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.
Set Mouse style.
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
A DOMString indicating the image format. The default format type is image/png.
A 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.
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 PublicEngine.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.
Location of X in browser
Location of Y in browser
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.
Location of X in engine
Location of Y in engine
Get Fill Style of engine background.
FillStyle
Get Stroke Style of engine background.
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.
Horizontal resolution
Vertical resolution
Leave the image upside down
Set Fill Style of engine background.
FillStyle or mutator to modify existing one.
Object itself
Set Stroke Style of engine background.
LineStyle
Object itself
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: