Abstract Pixel location of UiElements origin. To get position use getPosition(relativePosition).
Coordinate system = position scale (UIElement.scale)
Readonly renderingReadonly scaleReference to HTML draggable attribute
Essentially part of convenience functionality which allows you to specify specific LCJS elements as "draggable", this information is automatically passed on to the LCJS charts container DIV when that element is pointed (since LCJS elements are not HTML elements, the DIV is the only actual HTML element).
Reference to HTML draggable attribute
Essentially part of convenience functionality which allows you to specify specific LCJS elements as "draggable", this information is automatically passed on to the LCJS charts container DIV when that element is pointed (since LCJS elements are not HTML elements, the DIV is the only actual HTML element).
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:
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.K type parameter extends.Callback function that is triggered when event is fired.
Optional options: LCJSAddEventListenerOptionsOptional extra configuration options.
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
Object itself for fluent interface
Get auto dispose behavior for this UI element.
Auto dispose mode.
Get Background of object.
Type of Background is generic, see UIBackground for minimum interface.
Background object
Get dragging mode of object. Defines how the object can be dragged by mouse.
Object itself
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get mouse style.
Interface for defining how mouse should look when hovering over UI object
Returns the size of the UiElements in pixels including any Margins or Paddings
Object size in pixels
Parameter to disregard parts of object when calculating the position. Defaults to Margin, which includes everything. Should only ever be necessary for sub-classes
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)
})
Listener that was added using addEventListener.
Set auto dispose behavior for this UI element.
Can be used to set a condition, where the UI element is automatically disposed, removing it from view.
// Example, remove UI element when it is larger than 20% of viewport.
UIElement.setAutoDispose({
type: 'max-width',
maxWidth: 0.20,
})
Object itself for fluent interface.
Auto dispose mode.
Method for mutating Background of object.
Type of Background is generic, see UIBackground for minimum interface.
Object itself for fluent interface
Mutator function for Background
Set dragging mode of object. Defines how the object can be dragged by mouse.
See UIDraggingModescollection for options.
Object itself
DraggingMode or undefined to disable dragging
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set highlighted state of the Object. Implementations should also remember to highlight themselves here.
Object itself for fluent interface
Highlight state of the object
Set margin around object in pixels.
Object itself
Number with pixel margins for all sides or datastructure with individual pixel margins for each side. Any side can be omitted, only passed values will be overridden.
Set mouse style when hovering over UI object.
Object itself
Interface for defining how mouse should look when hovering over UI object
Sets the position origin of this UiElement. Affects how the "position" of UIElement is interpreted.
See UIOrigins for a collection of common arguments in an easy-to-read format.
Object itself
Set padding around object in pixels. Padding is empty space between the UiElements content and Background
Object itself
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
Set mouse interactions enabled. This will set the states of all members inside the Layout, overriding any previous settings.
Mouse interactions enabled
Sets the position of this UiElement relative to its origin.
NOTE: UIElements scale can't be changed apart from when it is created.
Object itself
Location on the UIElements scale, where its origin should be positioned
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Public interface for a UiElement with background.