Get element visibility.
true when element is set to be visible and false otherwise.
Set element visibility.
true when element should be visible and false when element should be hidden.
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.
Optional options: LCJSAddEventListenerOptionsOptional options: LCJSAddEventListenerOptionsPermanently destroy the component.
Object itself for fluent interface.
Get font of custom ticks text.
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.
Set fill style of background around ticks label.
// Example syntax
tick.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
tick.setBackgroundFillStyle((fill) => isSolidFill(fill) ? fill.setA(100) : fill)
Object itself.
FillStyle or function that mutates current FillStyle
Set stroke style of background around ticks label.
// Example syntax
tick.setBackgroundStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
tick.setBackgroundStrokeStyle((stroke) => stroke.setThickness(2))
Object itself.
LineStyle or function that mutates current LineStyle
Set style of custom ticks gridline. This line highlights the tick location under the series area.
// Example syntax, specify LineStyle
CustomTick.setGridStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change thickness only
CustomTick.setGridStrokeStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
// Example syntax, disable stroke
CustomTick.setGridStrokeStyle(emptyLine)
Object itself.
LineStyle or function which returns a LineStyle based on previous value.
Set padding between tick label text and its background (if any).
// Example syntax
tick.setPadding(5)
tick.setPadding({ left: 10, right: 10 })
Object itself.
number for symmetric padding, or object with any of left, right, top, bottom paddings.
Set component mouse interactions enabled or disabled.
Disabling mouse interactions means that the objects below this component can be interacted through it.
Object itself for fluent interface
Specifies state of mouse interactions
Set fill style of custom ticks text.
// Example syntax, red fill
CustomTick.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
// Example syntax, disable fill
CustomTick.setTextFillStyle(emptyFill)
Object itself.
FillStyle or function which returns a FillStyle based on previous value.
Set font of custom ticks text.
// Example syntax, specify FontSettings
CustomTick.setTextFont(new FontSettings({
size: 14,
family: 'Arial',
weight: 'normal',
}))
// Example syntax, change to italic
CustomTick.setTextFont(font => font.setStyle('italic'))
To remove custom tick text, use setTextFillStyle
Object itself.
FontSettings or function which returns a FontSettings based on previous value.
Set text formatting of custom tick as a callback function.
// Example usage
CustomTick.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)
The supplied callback function is called with the current axis location of the custom tick.
To provide hard defined text, just ignore the value.
// Example, hard defined custom tick text.
CustomTick.setTextFormatter(() => `My tick text`)
Object itself
Callback function which returns custom tick text as string.
Set padding between CustomTick tickline and text.
// Example usage
CustomTick.setTextPadding(5)
Object itself
Padding as pixels
Set custom tick text rotation as degrees.
// Example usage
CustomTick.setTextRotation(90)
Object itself
Rotation as degrees.
Set tickline length as pixels.
// Example usage
CustomTick.setTickLength(5)
Object itself
Tickline length as pixels
Set style of custom ticks tickline. This line connects the text to its Axis, generally a very short line (6 pixels, or so).
// Example syntax, specify LineStyle
CustomTick.setTickStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change thickness only
CustomTick.setTickStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
// Example syntax, disable stroke
CustomTick.setTickStyle(emptyLine)
Object itself.
LineStyle or function which returns a LineStyle based on previous value.
Set location of custom tick on its Axis.
// Example usage
CustomTick.setValue(5)
Object itself
Location on axis.
End user managed 3D Axis Tick. Custom ticks are just like default ticks, except they can be completely controlled by the end user.
For example, their position, text, text fill style, gridline style, etc. everything can be customized. They can be created whenever and destroyed whenever.
They are created with addCustomTick method, and destroyed with dispose method.
Default 3D Axis ticks can be hidden by selecting empty tick strategy.