Readonly
chartAdd 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 = Axis3D.addCustomTick()
// Tick position on Axis.
.setValue(100)
.setTextFormatter((value) => `Custom tick at ${value.toFixed(1)}`)
For full set of configuration API, see CustomTick3D.
CustomTick3D.
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
Beta
Get current configuration of default interval (setDefaultInterval).
Defaults to undefined
.
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
Get the currently applied axis scale interval.
Object containing the current start and end of Axis.
Beta
Get current value of setIntervalRestrictions. By default, no restrictions.
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
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
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)
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.
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
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,
}))
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
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.
Beta
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 })
Released as beta feature in v5.1.0 feature may still change according to user feedback and experiences.
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
, y
or z
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 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
Three-dimensional Axis, that resides inside Chart3D. Can be either X, Y or Z. There is always exactly one Axis3D object for each dimension in a Chart3D.
Axes have automatic scrolling logic to fit attached Series. This can be modified with setScrollStrategy method.
Axes are associated with a title, which can be enabled with setTitle method.
Axis ticks can be altered with setTickStrategy and addCustomTick methods.