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.
Object itself for fluent interface.
Get elements Background object
Type of Background is generic, see UIBackground for minimum interface.
Background object
Get button shape.
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 font of LUT color steps and unit text.
FontSettings
Get displayed unit of Look Up Values. For example, "mm/h" (millimetres per hour).
String to display next to Look Up Values.
Get mouse style.
Interface for defining how mouse should look when hovering over UI object
Get font of Label.
FontSettings
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.
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 fill style of Button when state is OFF
Object itself for fluent interface
Fill style object or function which modifies it
Set fill style of Button when state is ON
Object itself for fluent interface
Set button shape.
// Example
setButtonShape(PointShape.Star)
See PointShape for all available options.
Set size of Button
Object itself
Point or pixel for squared button size
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 state of component highlighting.
// Example usage
component.setHighlight(true)
Object itself
Boolean or number between 0 and 1, where 1 is fully highlighted.
Set attached LUT (color look up table).
Object itself.
LUT (color look up table).
Set whether distances between LUT step values are displayed, or if the displayed LUT steps should be split equal distances apart.
By default this is disabled.
Object itself.
enabled Boolean.
Set length of LUT box as pixels.
Length as pixels.
Specify step value formatting of LUT Legend.
Example usage:
// Display one fraction.
setStepValueFormatter((step, lut) => step.value.toFixed(1))
Set fill style of LUT color steps and unit.
Note that this style is overridden by calls to setTextFillStyle, which affects all text of the component.
Object itself for fluent interface
Fill style object or function which modifies it
Set font of LUT color steps and unit text.
Note that this style is overridden by calls to setTextFont, which affects all text of the component.
Object itself
FontSettings or mutator function for existing settings
Set thickness of LUT box as pixels.
Thickness as pixels.
Set whether Switchable is locked or not. When locked, clicking on the UI component will not switch its state.
State as boolean flag
state
Set displayed unit of Look Up Values. For example, "mm/h" (millimetres per hour).
Object itself.
String to display next to Look Up Values.
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
Set state of switchable object.
NOTE: If Switchable.getLocked() == true, this method will not do anything.!
Object itself for fluent interface
State as boolean flag
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 or disabled
Object itself for fluent interface
Specifies state of mouse interactions
Set the text of the entire shape.
Text string.
Set text fill style object
Object itself for fluent interface
Fill style object or function which modifies it
Set text fill style when check box is OFF
Object itself for fluent interface
Fill style object or function which modifies it
Set font of Label.
Object itself
FontSettings or mutator function for existing settings
Set rotation of Label.
Object itself
Interface for 'LUTCheckBox'.