Abstract Readonly titleInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on axis title.
// Example syntax
axis.title.addEventListener('click', (event) => {
console.log(event)
})
For syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Protected Abstract _getUsed in phase 1: after we know what ticks will be displayed, formulate generic information for chart layout calculations (e.g. XY layout for XY charts).
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.
Fit axis view to attached series.
Optional animate: number | booleanBoolean for animation enabled, or number for animation duration in milliseconds
Optional stopAxisAfter: booleanIf true, stops Axis after fitting
Get current configuration of default interval (setDefaultInterval).
Defaults to undefined.
Get the currently applied axis scale interval.
Object containing the current start and end of Axis.
Get current value of setIntervalRestrictions. By default, no restrictions.
Current AxisScrollStrategy
Get Axis stopped or not.
When an Axis is stopped it temporarily prevents the active scroll strategy from changing the Axis interval.
Axis can be stopped programmatically using this method, and also by different built in interactions, such as panning/zooming.
Axis stopped
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 axis labels.
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.
Specifies zoom animation to use.
Example usage:
| Desired result | Argument | Parameters |
|---|---|---|
| Change animation | setAnimationZoom(AnimationEasings.easeOut, 500) |
First parameter defines the easing to use for the animation. Second parameter is optional, and defines the duration for the animation |
| Disable zooming animations | axis.setAnimationZoom(undefined) |
Passing undefined as the parameter will disable the zooming animations for the Axis. |
Easing of animation. Undefined disables zoom animations. See 'common/animator.Easings' for defaults
Optional default duration for zooming animations in milliseconds
Method that allows disabling Axis allocating automatic pixel based regions around data start and data end. For example, if Axis has attached point series with 10px size, the Axis can automatically add 10px gaps at both start and end.
This behavior is enabled normally, but in some cases it can cause problems with several axes being out of sync, in which case they can be disabled with this method.
Object itself.
Deprecated in v7.1.0. Use setScrollMargins instead.
Auto regions enabled or not.
Set Axis default interval. This does the same as setInterval method, but is also applied again whenever fit is triggered, or the "zoom to fit" user interaction is triggered.
Intended to be used in use cases that set an Axis interval nicely at start of application.
// Example 1, set hardcoded interval at application start
Axis.setDefaultInterval({ start: 0, end: 100 })
This method also allows interval specification as a callback function, allowing the applied default interval to be based on the range of data or current axis interval:
// Example 2, scrolling axis - when axis is fitted, restore default time window and continue scrolling
Axis.setDefaultInterval((state) => ({
end: state.dataMax ?? 0,
start: (state.dataMax ?? 0) - 10_000,
stopAxisAfter: false,
}))
// Example 3, add some extra space
Axis.setDefaultInterval((state) => ({
start: (state.dataMin ?? 0) - 10,
end: (state.dataMax ?? 0) + 10,
}))
Optional extra arguments:
// Configure default interval (to be applied on restoreDefault user interaction or axis.fit()), but don't apply it immediately
Axis.setDefaultInterval({ start: 0, end: 10 }, { applyImmediately: false })
By default, default interval ignores any interval restrictions that have been set.
If undesirable, this can be changed by specifying skipIntervalRestrictions flag.
// Don't skip interval restrictions
Axis.setDefaultInterval({ start: 0, end: 10 }, { skipIntervalRestrictions: false })
Optional opts: { Optional applyPotentially misleading naming, even if set to true, it doesn't mean that the interval is immediately configured after the setDefaultInterval call.
Rather, the default interval is applied just before rendering next frame.
Optional skipSet axis interval.
Examples:
// Set interval start and end.
Axis.setInterval({ start: 0, end: 5000 })
// Set interval end only.
Axis.setInterval({ end: 5000 })
// Set interval but don't stop the axis from scrolling
Axis.setInterval({ start: 0, end: 5000, stopAxisAfter: false })
// Set interval with 2000 milliseconds long animation
Axis.setInterval({ start: 0, end: 5000, animate: 2000 })
Object itself for fluent interface
Parameters for axis interval.
Set restrictions on Axis interval (start/end). These are not applied immediately, but affect all axis scrolling and user interactions afterwards.
// Example 1, prevent zooming outside active data set
Axis.setIntervalRestrictions((state) => ({
startMin: state.dataMin,
endMax: state.dataMax,
}))
// Example 2, set max zoom in level (intervalMin)
Axis.setIntervalRestrictions({ intervalMin: 10 })
// Example 3, set max zoom out level (intervalMax)
Axis.setIntervalRestrictions({ intervalMax: 1000 })
// Example 4, no restrictions
Axis.setIntervalRestrictions(undefined)
Set whether element can be target of pointer events or not.
Disabling pointer events means that the objects below this component can be interacted through it.
Object itself for fluent interface
Specifies state of mouse interactions
Method that allows configuring extra space allocated around series data boundaries when axis is scrolling. Important, in LCJS context, scrolling refers to any automatic axis behavior adjusting according to attached series.
By default, automatic scroll margins are enabled, which means the actual value is based on attached series and their style. For example, in case of point series, the scroll margins are set to half of point size.
// Example, disable scroll margins entirely
Axis.setScrollMargins(false)
// Example, set specific scroll margins as pixels
Axis.setScrollMargins(5)
// Example, insymmetric scroll margins as pixels
Axis.setScrollMargins({ start: 0, end: 10 })
If axis interval is explicitly configured using setInterval or setDefaultInterval then scroll margins are not applied.
Object itself.
Scroll margin configuration.
Specify ScrollStrategy of the Axis. This decides where the Axis scrolls based on current view and series boundaries.
// Example syntax
chart.axisY.setScrollStrategy(AxisScrollStrategies.fitting)
chart.axisX.setScrollStrategy(AxisScrollStrategies.scrolling)
chart.axisY.setScrollStrategy(AxisScrollStrategies.fitting({ considerVisibleRangeOnly: false }))
While technically it is possible to define custom axis scroll strategies by passing an object that satisfies this interface, this is not recommended.
All known use cases can be realized with built-in scroll strategies. If you believe this is not the case, please contact us https://lightningchart.com/js-charts/docs/contact/
Object itself for fluent interface.
Optional scrollStrategy: AxisScrollStrategy | (() => AxisScrollStrategy)AxisScrollStrategy or undefined to disable automatic scrolling. See AxisScrollStrategies for all options.
Set Axis stopped or not.
When an Axis is stopped it temporarily prevents the active scroll strategy from changing the Axis interval.
Axis can be stopped programmatically using this method, and also by different built in interactions, such as panning/zooming.
// Example, stop Axis scrolling / fitting.
Axis.setStopped(true)
Object itself
Axis stopped
Specifies axis stroke
Axis itself for fluent interface
Axis stroke style
Set TickStrategy of Axis.
The TickStrategy defines the positioning and formatting logic of Axis ticks as well as the style of created ticks.
Example usage:
DateTime Axis:
Axis.setTickStrategy( AxisTickStrategies.DateTime )
Disable automatic ticks completely:
Axis.setTickStrategy( AxisTickStrategies.Empty )
Customized TickStrategy:
Axis.setTickStrategy( AxisTickStrategies.Numeric, ( tickStrategy: NumericTickStrategy ) => tickStrategy
.setNumericUnits( true )
.setMajorTickStyle( ( tickStyle ) => tickStyle
.setLabelFont( ( font ) => font
.setWeight( 'bold' )
)
)
)
Type table for optional second parameter ('styler'):
| tickStrategy | styler |
|---|---|
| 'Numeric' | ( tickStrategy: **NumericTickStrategy** ) => tickStrategy |
| 'Time' | ( tickStrategy: **TimeTickStrategy** ) => tickStrategy |
| 'DateTime' | ( tickStrategy: **DateTimeTickStrategy** ) => tickStrategy |
| 'Empty' | undefined |
Object itself for fluent interface.
Selected TickStrategy. See AxisTickStrategies for a collection of options.
Optional styler: TickStrategyStyler<{ Optional callback that can be used to customize the TickStrategy. The type of supplied TickStrategy object depends on what was supplied to 'tickStrategy' parameter; See the above method documentation for a value table.
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
Specifies Axis title FillStyle
// Example, set title color
Axis.setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
Axis itself for fluent interface
FillStyle of Axis title or mutator to modify existing one
Set font of Axis title.
// Example, set font size
Axis.setTitleFont((font) => font.setSize(10))
Object itself
FontSettings or mutator function for existing settings
Set unit that Axis measures. e.g. "Hz", or "°C".
This is a convenience API that affects following things:
// Example syntax
axis
.setTitle('Frequency')
.setUnits('Hz')
axis.setUnits('Hz', { displayOnAxis: false })
Object itself.
String or undefined.
Optional extra argument to control which side effects of configuring Units are enabled.
Generic super class for PolarAxisAmplitude and PolarAxisRadial.