Abstract 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
Beta
Get current configuration of default interval (setDefaultInterval).
Defaults to undefined.
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
Get the currently applied axis scale interval.
Object containing the current start and end of Axis.
Beta
Get current value of setIntervalRestrictions. By default, no restrictions.
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
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
Beta
Get unit that Axis measures. e.g. "Hz", or "°C".
The unit is displayed after the Axis title (if it is defined). e.g. "Axis title (Hz)"
Default cursor formatters place the Unit next to units of the Axis.
Introduced in LightningChart JS v6.0.0. Behavior or API might change in following versions depending on user feedback.
Remove event listener from event when Axis is stopped or released.
This event is triggered when Axis.setStopped method is used (and state actually changes), or the Axis is stopped/released by a built-in user interaction.
// Example, attach and remove event handler.
const token = Axis.onStoppedStateChanged((_, isStopped) => {})
Axis.offStoppedStateChanged(token)
Subscribe to on scale change event
The onIntervalChange event triggers on change of the interval of an Axis and accept a callback function with 3 parameters that return axis itself, start and end values of the Axis
Example usage:
Axis.onIntervalChange((axis, start, end) => {
console.log(`start value: ${start}, end value : ${end}`);
}
)
Token that is used to unsubscribe from the event
Register new event listener to event when Axis is stopped or released.
This event is triggered when Axis.setStopped method is used (and state actually changes), or the Axis is stopped/released by a built-in user interaction.
// Example, track when Axis is stopped or released.
const token = Axis.onStoppedStateChanged((_, isStopped) => {
console.log({isStopped})
})
Token of event subscription which can be used to remove the event listener using offStoppedStateChanged method.
Subscribe to mouse-click event on axis title
Subscribe to mouse-doubleClick event on axis title
Subscribe to mouse-down event on axis title
Subscribe to mouse-drag event on axis title
Subscribe to mouse-drag start event on axis title
Subscribe to mouse-drag stop event on axis title
Subscribe to mouse-enter event on axis title
Subscribe to mouse-leave event on axis title
Subscribe to mouse-move event on axis title
Subscribe to mouse-up event on axis title
Subscribe to mouse-wheel event on axis title
Subscribe to touch-end event on axis title
Subscribe to touch-move event on axis title
Subscribe to touch-start event on axis title
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
Beta
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.
Introduced in v5.2.0. Method may be removed/changed depending on how the related use cases evolve.
Auto regions enabled or not.
Beta
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,
}))
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
Optional opts: { Set 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.
Beta
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 })
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
Specify ScrollStrategy of the Axis. This decides where the Axis scrolls based on current view and series boundaries.
Object itself for fluent interface.
Optional scrollStrategy: AxisScrollStrategyAxisScrollStrategy 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
Beta
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.
Introduced in LightningChart JS v6.0.0. Behavior or API might change in following versions depending on user feedback.
String or undefined.
Optional extra argument to control which side effects of configuring Units are enabled.
Generic super class for PolarAxisAmplitude and PolarAxisRadial.