Readonly chartReadonly keyKey of the Axis. Generally this is the string property name of data samples.
e.g. "Height" or "Weight", etc.
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
Readonly userIDAdditional user supplied identification apart from the Axis key. Generally this is a number index (nth axis), or when using Enum-like approach to defining Axes, the value of the Enum-like entry:
// Enum-like approach syntax
const Axes = {
Weight: 0,
Height: 1,
'Eye color': 2,
}
chart.setAxes(Axes)
chart.getAxis(Axes.Height).userID // `1`
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 an end user managed tick to the axis.
Custom ticks are just like default ticks, except they can be completely controlled by the end user.
// Example
const customTick = Axis.addCustomTick()
// Tick position on Axis.
.setValue(100)
.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)
For full set of configuration API, see ParallelCoordinateAxisCustomTick.
ParallelAxisCustomTick.
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.
Programmatically add a Range Selector to the Axis. These are used to highlight filtered series in the chart in use cases where you can have even thousands of series at same time. A Range selector defines a value range (start-end) along 1 specific Axis, and as a result all series whose value on that Axis is within the range are highlighted.
// Example syntax
const rangeSelector = chart.getAxis('Key').addRangeSelector().setInterval(0, 1)
Range selectors can also be created using built-in interaction of double clicking an Axis.
ParallelCoordinateAxisRangeSelector object.
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
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 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.
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.
Set fill style of background behind the Axis. By default this is a linear gradient that helps with readability of the tick labels.
Object itself.
FillStyle or function that mutates current FillStyle.
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 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.
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
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 stroke style of axis line, that goes from start of axis to end of axis.
To highlight LUT of the Axis, you can give a SolidLine object with fillStyle: PalettedFill to also show the LUT on the Axis stroke.
Object itself.
LineStyle or function which mutates current LineStyle.
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.
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 one Axis in a ParallelCoordinateChart. Axes are first created using setAxes, and later can be accessed using getAxis or axes.