Abstract Readonly axisAxis that CustomTick belongs to.
Readonly axisReadonly renderingAdd 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 whether CustomTick should allocate space on its Axis.
By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.
By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications
where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.
Boolean flag.
Get custom ticks TickMarker (label, tick, possible background).
TickMarker object
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 whether CustomTick should allocate space on its Axis.
By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.
By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications
where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.
// Example syntax, disable custom tick space allocation.
CustomTick.setAllocatesAxisSpace(false)
Object itself for fluent interface.
Boolean flag.
Set length of grid stroke in percents
This for fluent interface
Grid line length as a % of viewport size
Set style of grid stroke.
Supported line styles:
This for fluent interface
Grid stroke style
Configure custom ticks TickMarker (label, tick, possible background) via a callback function.
Example usage:
CustomTick.setMarker((tickMarker) => tickMarker
// Style TickMarker.
.setTextFillStyle(new SolidFill({ color: ColorRGBA( 255, 0, 0 ) }))
.setFont((font) => font.setStyle( 'italic' ))
)
See TickMarker for available customization API.
Styling specific TickMarkers:
When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):
const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
customTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker
// ^ Above type cast is necessary to access full configuration API of UIPointableTextBox
// Style TickMarker background fill color.
.setBackground((background) => background
.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0, 100) }))
)
)
For reference,
UIElementBuilders.AxisTickMajor will support API as described by UITickUIElementBuilders.PointableTextBox will support API as described by UIPointableTextBoxSet marker visible or not.
Object itself
Marker visible?
Set mouse interactions enabled or disabled
Object itself for fluent interface
Specifies state of mouse interactions
Set text of CustomTicks' Marker with a formatting function.
Example usage:
// Marker shows formatted position of CustomTick on its Axis
CustomTick.setTextFormatter((position, customTick) => customTick.axis.formatValue(position))
// Marker shows 'Hello world'
CustomTick.setTextFormatter((position, customTick) => 'Hello world')
Object itself
A function of type: CustomTickTextFormatter, that defines text of CustomTicks' Marker.
Set pixel padding between tick line and label.
Set rotation of tick label.
Object itself
Rotation in degrees
Set tick length as pixels.
Object itself for fluent interface.
Tick length as pixels.
Sets the position of this custom tick on its Axis
This for fluid interface
Overrides text of CustomTicks Marker with formated value.
Value in the units of main scale
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Class that represents a single Axis tick that can be managed by the user.
Custom ticks are created with addCustomTick.
Frequently used methods:
Styling CustomTicks:
Tick gridline can be styled with setGridStrokeStyle
TickMarker (label, tick, possible background) are styled via setMarker as a callback function, like this:
See TickMarker for available customization API.
Styling specific TickMarkers:
When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):
For reference,
UIElementBuilders.AxisTickMajororUIElementBuilders.AxisTickMinorwill support API as described by UITickUIElementBuilders.PointableTextBoxwill support API as described by UIPointableTextBox