UI position in percents. 0 means bottom/right, 100 means top/left, anything in between places the axis in the custom position along the chart's space
Chart that owns the Axis.
Add a highlighter Band to the Axis. A Band can be used to highlight an interval on the Axis.
Is Band rendered above Series, or below. Default to above.
Band object.
Add a highlighter ConstantLine to the Axis. A ConstantLine can be used to highlight a specific value on the Axis.
Is ConstantLine rendered above Series, or below. Default to above.
ConstantLine object.
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()
.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 only supported values are 'AxisTick' and 'PointableTextBox'
const customTick1 = Axis.addCustomTick(UIElementBuilders.AxisTick)
const customTick2 = 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(UIElementBuilders.AxisTick)
.setValue(x)
}
For more information, like styling custom ticks, see CustomTick.
Optional builder for TickMarker of CustomTick (tick line, label, possible background).
Possible values are: UIElementBuilders.AxisTick, UIElementBuilders.PointableTextBox.
Default is PointableTextBox
CustomTick.
Disable all animations for the Axis.
After calling this function, animations (Zooming, scaling) will be disabled. Animations must be recreated manually afterwards.
Axis itself for fluent interface.
Dispose all Axis sub-elements and remove this Axis from collection it's in.
this for fluent interface
Fit axis view to attached series.
Boolean for animation enabled, or number for animation duration in milliseconds
Freeze axis to fitted view? False by default.
Format a value along axis to string. Behavior depends on the Axis' TickStrategy. Eq. A DateTime-Axis will interpret 'value' as a Date.
Value along axis
Value formated to string
Get animations disable/enable state.
Animations default state.
Get is mouse-interaction enabled: Panning by dragging on axis. (RMB)
Boolean flag
Get is mouse-interaction enabled: Release axis by double-clicking on axis.
Boolean flag
Get is mouse-interaction enabled: Zooming by dragging on axis. (LMB)
Boolean flag
Get is mouse-interaction enabled: Zooming by mouse-wheeling on axis.
Boolean flag
Get mouse style when hovering over axis area.
Mouse-style preset name
Get mouse style when panning axis.
Mouse-style preset name
Get mouse style when zooming axis.
Mouse-style preset name
Get is mouse-interaction enabled: Fitting by capturing rectangle on chart.
Boolean flag
Get is mouse-interaction enabled: Panning by dragging on chart.
Boolean flag
Get is mouse-interaction enabled: Zooming by capturing rectangle on chart.
Boolean flag
Get is mouse-interaction enabled: Zooming by mouse-wheeling on chart.
Boolean flag
Get height of axis in pixels
Number
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 is mouse-interaction enabled: Scaling by dragging on nib.
Boolean flag
Get is mouse-interaction enabled: Scaling by mouse-wheeling on nib.
Boolean flag
Axis nib stroke length in pixels
Get mouse style when hovering over nib area.
Mouse-style preset name
Get size of nib mouse-picking area in pixels.
Size in pixels
Get mouse style when hovering over nib area.
Mouse-style preset name
Get style of nib overlay (shown only when interacting with mouse / touch).
FillStyle object
nib stroke fillstyle as a Fillstyle object
Get style of axis overlay (shown only when interacting with mouse / touch).
FillStyle object
Current AxisScrollStrategy
Axis stroke as a LineStyle object
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 the currently used tick strategy
Axis title string
Axis title fillstyle
Get font of axis labels.
FontSettings
Padding after Axis title
Get rotation of Axis title.
Rotation in degrees
Get position of axis on its chart as a %
True if all Axis sub-elements are disposed, false if not.
Get is axes' scrolling currently prevented by usage of mouse-interactions or 'stop()' method.
Boolean flag
Remove event listener from Mouse Click event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Double Click event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Down event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Start event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Stop event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Enter event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Leave event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Move event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Touch event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Touch Start event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Touch Stop event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Up event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Wheel event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove subscription from scale change event
Event listener
True if the listener is successfully removed and false if it is not found
Add event listener to Mouse Drag event on Axis
Event listener function for Mouse Drag
Token of subscription
Add event listener to Mouse Drag Start event on Axis
Event listener function for Mouse Drag Start
Token of subscription
Add event listener to Mouse Drag Stop event on Axis
Event listener function for Mouse Drag Stop
Token of subscription
Add event listener to Mouse Click on Axis
Event listener for Mouse Click Event
Token of subscription
Add event listener to Mouse Double Click on Axis
Event listener for Mouse Double Click Event
Token of subscription
Add event listener to Mouse Down on Axis
Event listener for Mouse Down Event
Token of subscription
Add event listener to Mouse Enter Event on Axis
Event listener function for Mouse Enter Event
Token of subscription
Add event listener to Mouse Leave Event on Axis
Event listener function for Mouse Leave Event
Token of subscription
Add event listener to Mouse Move on Axis
Event listener function for Mouse Move
Token of subscription
Add event listener to Mouse Touch event on Axis
Event listener function for Mouse Touch
Token of subscription
Add event listener to Mouse Touch Start event on Axis
Event listener function for Mouse Touch Start
Token of subscription
Add event listener to Mouse Touch Stop event on Axis
Event listener function for Mouse Touch Stop
Token of subscription
Add event listener to Mouse Up on Axis
Event listener for Mouse Up Event
Token of subscription
Add event listener to Mouse Wheel event on Axis
Event listener function for Mouse Wheel
Token of subscription
Subscribe to on scale change event
The onScaleChange event triggers on change of the interval of an Axis and accept a callback function with 2 parameters that return start and end values of the Axis
Example usage:
Axis.onScaleChange((start, end) => {
console.log(`start value: ${start}, end value : ${end}`);
}
)
Event listener
Token that is used to unsubscribe from the event
Pan scale by pixel value delta.
Used by ChartXY as well as Axis itself.
Amount to shift scale of axis in pixels
Undo effects of 'stop'.
Restore all Axis sub-elements and restore this Axis to the collection it was in.
this for fluent interface
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.
Boolean value to enable/disable animations.
Axis itself for fluent interface.
Set is mouse-interaction enabled: Panning by dragging on axis. (RMB)
Boolean flag
Set is mouse-interaction enabled: Release axis by double-clicking on axis.
Boolean flag
Set is mouse-interaction enabled: Zooming by dragging on axis. (LMB)
Boolean flag
Set is mouse-interaction enabled: Zooming by mouse-wheeling on axis.
Boolean flag
Set mouse style when hovering over axis area.
Mouse-style preset name (see MouseStyles)
Object itself
Set mouse style when panning axis.
Mouse-style preset name (see MouseStyles)
Object itself
Set mouse style when zooming axis.
Mouse-style preset name (see MouseStyles)
Object itself
Set is mouse-interaction enabled: Fitting by capturing rectangle on chart.
Boolean flag
Set is mouse-interaction enabled: Panning by dragging on chart.
Boolean flag
Set is mouse-interaction enabled: Zooming by capturing rectangle on chart.
Boolean flag
Set is mouse-interaction enabled: Zooming by mouse-wheeling on chart.
Boolean flag
Set all states of chart mouse interactions on axis at once.
Boolean flag
Set axis scale interval.
Start scale value
End scale value
Boolean for animation enabled, or number for animation duration in milliseconds
If true, disables automatic scrolling after setting interval
Object itself for fluent interface
Set enabled flags for all mouse-interactions on axis directly. Does not affect chart mouse-interactions.
Boolean: are mouse-interactions enabled
Axis itself for fluent interface
Set is mouse-interaction enabled: Scaling by dragging on nib.
Boolean flag
Set is mouse-interaction enabled: Scaling by mouse-wheeling on nib.
Boolean flag
Specifies Axis nib stroke length in pixels
Axis nib stroke length in pixels
Axis itself for fluent interface
Set mouse style when hovering over nib area.
Mouse-style preset name (see MouseStyles)
Object itself
Set ideal size of nib mouse-picking area in pixels.
Size in pixels
Object itself
Set mouse style when scaling nib.
Mouse-style preset name (see MouseStyles)
Object itself
Set style of nib overlay (shown only when interacting with mouse / touch).
FillStyle object or mutator to modify existing one
Specifies Axis nibs StrokeStyle
LineStyle object or mutator to modify existing one
Axis itself for fluent interface
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.
AxisScrollStrategy or undefined to disable automatic scrolling. See AxisScrollStrategies for all options.
Object itself for fluent interface.
Specifies axis stroke
Axis stroke style
Axis itself for fluent interface
Set Axis thickness as pixels.
For X Axis, this means Axis height.
For Y Axis, this means Axis width.
// Example syntax,
Axis.setThickness( 60 )
Explicit thickness of Axis as pixels.
Object itself for fluent interface.
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 })
Explicit thickness of Axis as pixels.
Object itself for fluent interface.
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 |
Selected TickStrategy. See AxisTickStrategies for a collection of options.
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.
Object itself for fluent interface.
Specifies an Axis title string
Axis title as a string
Axis itself for fluent interface
Specifies Axis title FillStyle
FillStyle of Axis title or mutator to modify existing one
Axis itself for fluent interface
Set font of Axis title.
FontSettings or mutator function for existing settings
Object itself
Specifies padding after Axis title. This is only accounted when title is visible.
Gap between the title and the next axis in pixels. Can also affect chart margins
Axis itself for fluent interface
Set rotation of Axis title.
Rotation in degrees
Object itself
Stop scrolling of axis until restored.
Zoom scale from/to a position.
Used by ChartXY as well as Axis itself.
Position to zoom towards or from on axis
Amount and direction of zoom [-1, 1] as a guideline
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
Axis
can be referenced with ChartXY.getDefaultAxisX and ChartXY.getDefaultAxisY.ChartXY
doesn't have a limit on number of axes. Additional axes can be created with ChartXY.addAxisX and ChartXY.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 Axis.setTitle.
Axis line. A single horizontal line for X axes, and vertical line for Y axes. It can be styled with Axis.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 Axis.setTickStrategy.
Axis.setTickStrategy(AxisTickStrategies.Numeric, (strategy) => strategy // Configure NumericTickStrategy .setMinorFormattingFunction((tickPosition) => `X: ${tickPosition}`) .setMinorTickStyle((tickStyle: VisibleTicks) => tickStyle .setTickLength(12) .setTickPadding(2) ) )
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 Axis.setTickStrategy.
Axis.setTickStrategy(AxisTickStrategies.Time, (strategy) => strategy // Configure TimeTickStrategy .setMinorFormattingFunction((tickPosition) => `X: ${tickPosition}`) .setMinorTickStyle((tickStyle: VisibleTicks) => tickStyle .setTickLength(12) .setTickPadding(2) ) )
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 Axis.setTickStrategy.
Axis.setTickStrategy(AxisTickStrategies.DateTime, (strategy) => strategy // Configure DateTimeTickStrategy .setMinorTickStyle((tickStyle: VisibleTicks) => tickStyle .setTickLength(12) .setTickPadding(2) ) )
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 Axis.setTickStrategy:
// Disable automatic axis ticks. Axis.setTickStrategy(AxisTickStrategies.Empty)
Custom ticks can be created with Axis.addCustomTick:
// Create custom ticks. for (let x = 0; x < 100; x += 10) { const tick = Axis.addCustomTick(UIElementBuilders.AxisTick) }
Frequently used
CustomTick
API:dispose()
.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 Axis.setScrollStrategy:
// Select progressive scroll strategy. Axis.setScrollStrategy(AxisScrollStrategies.progressive)
Following scroll strategies are supported:
undefined
| automatic scrolling is disabled.Axis interval can be manually set with Axis.setInterval:
// Axis start = 0, end = 100. Axis.setInterval(0, 100)
However, if automatic scrolling is either 'fitting' or 'expansion' the configured axis interval might immediately be overridden.
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 (Axis.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.001
and 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: