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).
Set fillStyle of PointMarker
Object itself
FillStyle object or mutator to modify existing one
Set origin position of PointMarker
Object itself for fluent interface
(-1 to 1 which specifies position of origin, 0 is center of the object)
Set size of PointMarker
Object itself
Size of PointMarker in pixels
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 info: unknownOptional options: LCJSAddEventListenerOptionsOptional extra configuration options.
Get displayed shape.
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.
Optional info: unknownSet 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 interactions enabled or disabled
Object itself for fluent interface
Specifies state of mouse interactions
Set rotation of point shape in degrees.
Object itself.
Rotation in degrees.
Visual that is displayed at the Cursors position. Has customizable fill and border.