Readonly isXReadonly isYReadonly 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 a highlighter ConstantLine to the Axis. A ConstantLine can be used to highlight a specific value on the Axis.
ConstantLine object.
Is ConstantLine rendered above Series, or below. Default to above.
Add custom tick to Axis. Custom ticks can be used to expand on default tick placement, or completely override Axis ticks placement with custom logic.
Example usage:
Create custom tick, specify position on Axis and label text.
const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
.setValue(5)
// Label text is specified with a callback function.
// This example formats Axis positions with one fraction, like this: "5.0"
.setTextFormatter((value) => value.toFixed(1))
Select CustomTick Marker type.
// CustomTick shape can be changed by supplying a tick marker builder.
// The supported values are 'AxisTickMajor', 'AxisTickMinor' and 'PointableTextBox'
const customTick1 = Axis.addCustomTick(UIElementBuilders.AxisTickMajor)
const customTick2 = Axis.addCustomTick(UIElementBuilders.AxisTickMinor)
const customTick3 = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
Disable default ticks, and create custom positioned ticks.
// Disable default Axis ticks.
Axis.setTickStrategy(AxisTickStrategies.Empty)
// Create a bunch of custom positioned ticks.
for (let x = 0; x <= 100; x += 10) {
Axis.addCustomTick()
.setValue(x)
}
For more information, like styling custom ticks, see CustomTick.
CustomTick.
Optional markerBuilder: UIPointableBuilder<InternalTickMarker>Optional builder for TickMarker of CustomTick (tick line, label, possible background).
Possible values are: UIElementBuilders.AxisTickMajor, UIElementBuilders.AxisTickMinor, UIElementBuilders.PointableTextBox.
Default is AxisTickMajor
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.
Permanently destroy the component.
To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.
let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined
Object itself for fluent interface
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 all Highlighters of Axis.
array of highlighters
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.
Check whether axis should keep axis tick labels in its boundaries. This is done by shifting the label so that it fits (doesn't go outside axis bounds). This effect can cause labels to overlap with each other, but generally it does not occur in normal scenarios. This is enabled by default.
Boolean
Beta
Get relative size of axis in its own "Stack".
For example, if you have a chart with 2 stacked Y axes, by default they will have equal heights. By altering axis relative size, you can adjust how the chart height is distributed between these two axes.
Defaults always to 1.
Released in v5.2. API may be changed according to user feedback and comments.
Beta
Get axis margins as set with setMargins.
Released in v5.2. API may be changed according to user feedback and comments.
Beta
Get index of Axis in its own "Parallel". This simply retrieves same value which was used (or defaulted) when axis was created. See iParallel.
Released in v5.2. API may be changed according to user feedback and comments.
Current AxisScrollStrategy
Beta
Get index of Axis in its own "Stack". This simply retrieves same value which was used (or defaulted) when axis was created. See iStack.
Released in v5.2. API may be changed according to user feedback and comments.
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.
Beta
Get active user interactions overrides for the Axis.
Introduced in v7.0.0. API may change according to user feedback.
Pan scale by pixel value delta.
Used by ChartXY as well as Axis itself.
Amount to shift scale of axis in pixels
Optional opts: { Optional releaseRemove 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.
Set component highlight animations enabled or not. For most components this is enabled by default.
// Example usage, disable highlight animations.
component.setAnimationHighlight(false)
Object itself
Animation enabled?
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.
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 highlight on mouse hover enabled or disabled.
Mouse interactions have to be enabled on the component for this to function as expected. See setPointerEvents for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
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)
Configure whether axis should keep axis tick labels in its boundaries. This is done by shifting the label so that it fits (doesn't go outside axis bounds). This effect can cause labels to overlap with each other, but generally it does not occur in normal scenarios. This is enabled by default.
// Example, disable
chart.axisX.setKeepTickLabelsInAxisBounds(false)
Object itself
Boolean
Beta
Configure length of axis. E.g. height for Y axis, width for X axis.
Axis length can be set in two ways:
Relative length
Set relative size of axis in its own "Stack".
For example, if you have a chart with 2 stacked Y axes, by default they will have equal heights. By altering axis relative size, you can adjust how the chart height is distributed between these two axes.
By default, every axis length is set to { relative: 1 }
// Example scenario
const chart = lightningChart().ChartXY()
const y1 = chart.getDefaultAxisY().setTitle('Y 1').setLength({ relative: 2 })
const y2 = chart.addAxisY({ iParallel: 0, iStack: 1 }).setTitle('Y 2')
Length as pixels
Hardcoded length as pixels.
// Example scenario
const chart = lightningChart().ChartXY()
const y1 = chart.getDefaultAxisY().setTitle('Y 1').setLength({ pixels: 200 })
const y2 = chart.addAxisY({ iParallel: 0, iStack: 1 }).setTitle('Y 2')
Released in v5.2. API may be changed according to user feedback and comments.
Beta
Add empty space at either end of the axis, without affecting the relative size of the Axis.
// Example, 20 pixels margin at "start" side of Axis.
Axis.setMargins(20, 0)
Released in v5.2. API may be changed according to user feedback and comments.
Set style of axis overlay (shown only when interacting with mouse / touch).
FillStyle object or mutator to modify existing one
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 style of Axis line stroke.
Supported line styles:
// Example syntax, specify LineStyle
Axis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change thickness only
Axis.setStrokeStyle((stroke) => new SolidLine({ ...stroke, thickness: 5 }))
Supported fill styles:
Solid fill color.
// Example, solid colored line.
Axis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
To learn more about available Color factories, see ColorRGBA
Color line stroke dynamically based on x or y coordinate.
// Example, dynamic color by Y coordinates
Axis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new PalettedFill({
lookUpProperty: 'y',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(255, 0, 0) },
{ value: 10, color: ColorRGBA(0, 255, 0) },
]
})
})
}))
To learn more about Color lookup tables, see LUT.
Color line stroke with a linear configurable gradient palette.
// Example, linear gradient line color
Axis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new LinearGradientFill()
}))
To learn more about linear gradient configurations, see LinearGradientFill.
Color line stroke with a radial configurable gradient palette.
// Example, radial gradient line color
Axis.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new RadialGradientFill()
}))
To learn more about radial gradient configurations, see RadialGradientFill.
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 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 axis title position (if any)
// Example, place title inside series area.
ChartXY.setTitlePosition(AxisXYTitlePositionOptions.Start)
ChartXY.setTitlePosition('end')
Object itself.
Position selection.
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.
Beta
Configure user interactions from a set of preset options.
Without any explicit configuration, the charts select the default user interaction scheme based on available information, such as axis types, attached series and data supplied to series.
The setUserInteraction methods allow explicitly configuring the used interaction scheme.
// Example, disable panning
axis.setUserInteractions({
pan: false
})
// LMB pan, RMB rectangle zoom
axis.setUserInteractions({
pan: {
lmb: { drag: true },
rmb: false,
},
rectangleZoom: {
lmb: false,
rmb: { drag: true },
},
})
// Example, disable all interactions
axis.setUserInteractions(undefined)
Object itself.
Introduced in v7.0.0. API may change according to user feedback.
Option with any set of properties of AxisXYUserInteractions or undefined to disable all interactions.
Axis is a child component of ChartXY. It defines a numeric range on a single plane (X or Y), that will be used to scale attached Series to the ChartXYs viewport.
The default
Axiscan be referenced with getDefaultAxisX and getDefaultAxisY.ChartXYdoesn't have a limit on number of axes. Additional axes can be created with addAxisX and addAxisY. Multiple Axes can be stacked on top of another, and axes can be positioned on either side of the chart (left, right, top, bottom, see AxisOptions).The visual components of axis are:
Title. By default axis has no title. It can be enabled with setTitle.
Axis line. A single horizontal line for X axes, and vertical line for Y axes. It can be styled with setStrokeStyle.
Ticks. Labels that help understand the data visualized along an axis.
Highlighters. Can be used to highlight positions or areas on an axis.
See Scrolling and interval configuration for detailed information about management of axis interval.
Axis Ticks
Ticks are labels attached to the axis line that visualize the progression of values along the axis. A tick consists of three individually stylable parts:
There are currently three different ways of managing axis ticks:
Numeric ticks
Numeric ticks are enabled by default for all axes. They are designed for depicting numeric values of all magnitudes.
Configuring the ticks is done with setTickStrategy.
Frequently used API:
For full list of configuration API, see NumericTickStrategy.
Examples showcasing numeric axes:
Time ticks
Time ticks are designed for depicting time ranges between hundreds of hours to individual nanoseconds.
They are enabled, as well as configured, with setTickStrategy.
Frequently used API:
For full list of configuration API, see TimeTickStrategy.
Examples showcasing
TimeTickStrategy:Datetime ticks
DateTime ticks are enabled, as well as configured, with setTickStrategy.
Frequently used API:
For full list of configuration API, see DateTimeTickStrategy.
Examples showcasing datetime axes:
Custom ticks
Automatic creation of ticks can be disabled with setTickStrategy:
Custom ticks can be created with addCustomTick:
Frequently used
CustomTickAPI:Examples showcasing custom axis ticks:
Axis automatic scrolling and Axis intervals configuration
Axis interval is the range of data values that are visible on the Axis, they are referred to as start and end.
By default, all axes fit the interval automatically to reveal all attached series. This behavior is called fitting scroll strategy.
Automatic scrolling behavior can be controlled by selecting the scroll strategy, with setScrollStrategy:
Following scroll strategies are supported:
AxisScrollStrategies.fitting(default) | axis will automatically scroll to contain the boundaries of all attached series.AxisScrollStrategies.expansion| same as 'fitting', but will never decrease axis interval.AxisScrollStrategies.progressive| axis will keep distance between start and end constant, and scroll to reveal series boundaries that go higher than active axis interval.AxisScrollStrategies.regressive| axis will keep distance between start and end constant, and scroll to reveal series boundaries that go lower than active axis interval.undefined| automatic scrolling is disabled.Axis interval can be manually set with setInterval:
Setting Axis interval stops axis scrolling by default. To specify axis interval and keep auto scrolling enabled, use the optional
stopAxisAfterparameter:Frequently used methods:
Axis interval limitations
LightningChart JS is easily the market leader in zooming interactions and visualization resolution, and contrary to most chart libraries, we are open about axis zooming limits;
"Axis zooming limits" refer to constraints on the magnitude of Axis interval, which is calculated as
Math.abs(end - start). When the limit is reached, the Axis will not be able to zoom in and out further by programmatic calls (setInterval) or user interactions.The constraints are primarily affected by two factors:
Both of these factors have their own definition of support minimum and maximum Axis interval, and when combined the lesser values are used. For example, if Tick Strategy would allow min interval of
0.001and Axis type0.005, effectively the min interval would be0.001.The Axis interval limits imposed by each available Tick Strategy are documented at AxisTickStrategies.
The Axis interval limits imposed by Axis Type are documented at AxisOptions.
Axis highlighters
Two kinds of highlighters are supported:
Examples showcasing axis highlighters: