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 _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 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
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 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.
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
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
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.
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: