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 Axis thickness min/max limits as pixels.
For X Axis, this means Axis height.
For Y Axis, this means Axis width.
By default, Axis has no thickness restrictions, so getThickness should return { min: undefined, max: undefined }.
Actively configured Axis thickness limits as pixels.
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
Event listener
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.
Event listener that is called when the event triggers.
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
Register new event listener to visibleStateChanged event.
Event listener for visibleStateChanged
Specifies scroll animation.
Boolean flag for whether scrolling should be animated or not.
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
Disable/Enable all animations of the Chart.
Axis itself for fluent interface.
Boolean value to enable/disable animations.
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.
Enable / disable all interactions of Axis.
Object itself for fluent interface.
Interactions enabled or not.
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
Set style of Axis line stroke.
Supported line styles:
// Example syntax, hide axis line
barChart.valueAxis.setStrokeStyle(emptyLine)
// Example syntax, specify LineStyle
barChart.valueAxis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change thickness only
barChart.valueAxis.setStrokeStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
Object itself for fluent interface.
Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
Set Axis thickness as pixels.
For X Axis, this means Axis height.
For Y Axis, this means Axis width.
// Example syntax,
Axis.setThickness( 60 )
Object itself for fluent interface.
Explicit thickness of Axis as pixels.
Configure Axis thickness min/max limits as pixels.
The thickness of Axis is calculated based on ticks, title, axis line, etc.
By setting min and/or max thickness, the size allocated for Axis can be restricted to desired limits.
For X Axis, this means Axis height.
For Y Axis, this means Axis width.
// Example syntax, set axis to at least 100 px thick, but allow larger axis thickness if labels are large, or other such scenario.
Axis.setThickness({ min: 100, max: undefined })
Object itself for fluent interface.
Explicit thickness of Axis as pixels.
Optional max?: numberOptional min?: numberSet TickStrategy of Axis.
The TickStrategy defines the positioning and formatting logic of Axis ticks as well as the style of created ticks.
// Example, disable ticks
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Empty)
// Example, customize tick labels formatting
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, ticks => ticks
ticks
.setMajorFormattingFunction((value) => `${value.toFixed(1)} €`)
.setMinorFormattingFunction((value) => `${value.toFixed(1)} €`)
)
// Example, set tick label fill style
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, ticks => ticks
.setMajorTickStyle((major) => major.setLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })))
.setMinorTickStyle((minor) => minor.setLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })))
)
// Example, set tick label font size
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, ticks => ticks
.setMajorTickStyle((major) => major.setLabelFont((font) => font.setSize(12)))
.setMinorTickStyle((minor) => minor.setLabelFont((font) => font.setSize(10)))
)
Object itself for fluent interface.
TickStrategy, either AxisTickStrategies.Numeric or AxisTickStrategies.Empty
Optional styler: TickStrategyStyler<{ Optional callback that can be used to customize the TickStrategy.
Specifies an Axis title string
Axis itself for fluent interface
Axis title as a string
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 rotation of Axis title.
Object itself
Rotation in degrees
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.
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Class that represents a BarCharts Value Axis. It can be accessed through valueAxis property, and provides methods for configuring axis style, ticks and title.
Useful methods: