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: UIElementBuilder<InternalTickMarker>Optional builder for TickMarker of CustomTick (tick line, label, possible background).
Possible values are: UIElementBuilders.AxisTickMajor, UIElementBuilders.AxisTickMinor, UIElementBuilders.PointableTextBox.
Default is AxisTickMajor
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
If true, stops Axis after fitting
Get all Highlighters of Axis.
array of highlighters
Get the currently applied axis scale interval.
Object containing the current start and end of Axis.
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 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)
Add event listener to Mouse Click on Axis
Token of subscription
Event listener for Mouse Click Event
Add event listener to Mouse Double Click on Axis
Token of subscription
Event listener for Mouse Double Click Event
Add event listener to Mouse Down on Axis
Token of subscription
Event listener for Mouse Down Event
Add event listener to Mouse Drag event on Axis
Token of subscription
Event listener function for Mouse Drag
Add event listener to Mouse Drag Start event on Axis
Token of subscription
Event listener function for Mouse Drag Start
Add event listener to Mouse Drag Stop event on Axis
Token of subscription
Event listener function for Mouse Drag Stop
Add event listener to Mouse Enter Event on Axis
Token of subscription
Event listener function for Mouse Enter Event
Add event listener to Mouse Leave Event on Axis
Token of subscription
Event listener function for Mouse Leave Event
Add event listener to Mouse Move on Axis
Token of subscription
Event listener function for Mouse Move
Add event listener to Mouse Up on Axis
Token of subscription
Event listener for Mouse Up Event
Add event listener to Mouse Wheel event on Axis
Token of subscription
Event listener function for Mouse Wheel
Add event listener to Mouse Touch event on Axis
Token of subscription
Event listener function for Mouse Touch
Add event listener to Touch Start event on Axis
Token of subscription
Event listener function for Touch Start
Add event listener to Mouse Touch Stop event on Axis
Token of subscription
Event listener function for Mouse Touch Stop
Subscribe onDispose event.
This event is triggered whenever the Axis is disposed.
// Example usage
axis.onDispose(() => {
console.log('axis was disposed')
})
axis.dispose()
Token of subscription
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.
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
Set mouse style when hovering over axis area.
Object itself
Mouse-style preset name (see MouseStyles)
Set mouse style when panning axis.
Object itself
Mouse-style preset name (see MouseStyles)
Set mouse style when zooming axis.
Object itself
Mouse-style preset name (see MouseStyles)
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 mouse style when hovering over nib area.
Object itself
Mouse-style preset name (see MouseStyles)
Set mouse style when scaling nib.
Object itself
Mouse-style preset name (see MouseStyles)
Set style of nib overlay (shown only when interacting with mouse / touch).
FillStyle object or mutator to modify existing one
Specifies Axis nibs StrokeStyle
Axis itself for fluent interface
LineStyle object or mutator to modify existing one
Set style of axis overlay (shown only when interacting with mouse / touch).
FillStyle object or mutator to modify existing one
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.
// 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
Axis itself for fluent interface
FillStyle of Axis title or mutator to modify existing one
Set font of Axis title.
Object itself
FontSettings or mutator function for existing settings
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: