Class UILegendBoxPanel

Add callback function to be triggered when specified event is fired.

 // Example syntax
 object.addEventListener('click', (event) => {
     console.log(event)
 })

Some classes also report extra information about the interacted object with the second parameter:

 // Most series share information about interacted data point
 series.addEventListener('click', (event, info) => {
     console.log(info)
 })

Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:

 // Example this listener will only fire once
 object.addEventListener('click', (event) => {})

Each class has its own list of supported events. Some events are from HTML standard (click, pointerdown, etc.), while others are own events from LightningChart JS (dispose, resize, etc.)

To find what events are available, you can try following:

• If your development environment has TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.
• Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

Add a legendbox.

Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

Legendbox alignment:

Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

 // Default (vertical) LegendBox.
 const legendBox = ChartXY.addLegendBox()

 // Horizontal LegendBox.
 const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

Custom Legendbox positioning:

By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

A custom location can be configured with UIElement API:

• setPosition
• setOrigin
• setMargin

Position coordinate system is specified when creating legendbox.

1. LegendBox with default positioning coordinate system.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox )
     // Position = [0, 100] as percentages.
     .setPosition({ x: 50, y: 50 })

2. Position in pixel coordinate system.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.coordsRelative )
     // Position = pixels.
     .setPosition({ x: 300, y: 100 })

3. Position on Axes.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
     // Position = Axis values.
     .setPosition({ x: 5, y: 5 })

Returns

LegendBox

Add a stand-alone UIElement using a builder.

Example usage:

1. TextBox with default positioning coordinate system.

 addUIElement( UIElementBuilders.TextBox )
     // Position = [0, 100] as percentages.
     .setPosition({ x: 50, y: 50 })

2. Position in pixel coordinate system.

 addUIElement( UIElementBuilders.TextBox, chart.coordsRelative )
     // Position = pixels.
     .setPosition({ x: 300, y: 100 })

3. Position on Axes.

 addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
     // Position = Axis values.
     .setPosition({ x: 5, y: 5 })

Returns

Object that fulfills interfaces: UIElementType (typeparam) and UIElement

Permanently destroy the component.

To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined

Returns

Object itself for fluent interface

Get fillstyle of chart background.

Returns

FillStyle

Get stroke style of chart background.

Returns

LineStyle

Find if chart is currently considered to be in the browser viewport.

Returns

true when panel is in view

Get Array of all legend boxes created using addLegendBox method. This will not include any legend boxes that were destroyed with dispose method.

Returns

Array of legend boxes.

Get size of control as pixels.

For stand-alone component, the size will be equal to the size of its containing HTML <div> (Control.engine.container)

For component inside Dashboard, the size will only include the component itself, so size can be less than the size of containing HTML <div>.

Returns

Object with x and y properties { x: number, y: number }, where both are pixel values.

Returns the Theme currently being used.

Returns

An object containing the Theme.

Check whether the object is disposed. Disposed objects should not be used!

Returns

true if object is disposed.

Remove event listener added using addEventListener. The expected argument should be the exact same callback function that was supplied using addEventListener:

 // Basic example syntax
 const listener = () => {}
 obj.addEventListener('click', listener)
 obj.removeEventListener('click', listener)

 // Basic boilerplate of custom interaction when user drags on an object
 obj.addEventListener('pointerdown', (eventDown) => {
     let prevCoord = eventDown
     const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
         const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
         prevCoord = eventMove
         console.log(delta, eventMove.clientX, eventMove.clientY)
     }
     const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
         window.removeEventListener('pointermove', handlePointerMove)
         window.removeEventListener('pointerup', handlePointerUp)
     }
     window.addEventListener('pointermove', handlePointerMove)
     window.addEventListener('pointerup', handlePointerUp)
 })

Capture rendered state in an image file. Prompts the browser to download the created file.

NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.

Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Example usage:

// Download 'screenshot.png'
Panel.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Panel.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Panel.saveToFile('fileName', 'image/jpeg', 0.50)

Remarks

If 'type' is not supported by browser, an Error will be thrown.

Set FillStyle of chart background.

 // Example usage,
 ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))

Related API:

• Use SolidFill to describe a solid fill color.
• Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

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 LineStyle of chart background border stroke.

 // Example usage,
 ChartXY.setBackgroundStrokeStyle(new SolidLine({
     thickness: 2,
     fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
 }))

Related API:

• Use SolidLine to describe a solid line style.
• Use SolidFill to describe a solid fill color.
• Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

Returns

Object itself

Set minimum size of UIPanel in pixels. This will affect its resizability by dragging dashboard splitters.

Translate a coordinate in HTML client coordinate system to relative coordinates within the component.

 const locationClient = { clientX: document.body.clientWidth * 0.2, clientY: document.body.clientHeight * 0.5 }
 const locationRelative = chart.translateCoordinate(locationClient, chart.coordsRelative)
 // locationRelative is in pixels relative to bottom left corner of the chart

Relative coordinates can be used for positioning LightningChart JS UI components:

 const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
     // Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
     .setOrigin(UIOrigins.LeftBottom)
     .setPosition({ x: 20, y: 20 })

NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts. For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.

 LineSeries.add(myData)
 requestAnimationFrame(() => {
     // translateCoordinate should now consider data added just now.
 })

Translate a coordinate from relative control coordinates to HTML client coordinate system.

 // 10 pixels left and 20 pixels up from controls bottom left corner
 const locationRelative = { x: 10, y: 20 }
 const locationClient = chart.translateCoordinate(locationRelative, chart.coordsRelative, chart.coordsClient)

Client coordinates can be used to absolute position HTML elements using CSS, for example.

 myHTMLElement.style.position = 'absolute'
 myHTMLElement.style.left = locationClient.clientX
 myHTMLElement.style.top = locationClient.clientY

NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts. For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.

 LineSeries.add(myData)
 requestAnimationFrame(() => {
     // translateCoordinate should now consider data added just now.
 })