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 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 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
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.
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
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
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 Axis.setScrollStrategy()
Axes are associated with a title, which can be enabled with Axis.setTitle()