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
Event listener
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.
Event listener that is called when the event triggers.
Register new event listener to visibleStateChanged event.
Event listener for visibleStateChanged
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.
Axis itself for fluent interface.
Boolean value to enable/disable animations.
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.
Enable / disable all interactions of Axis.
Object itself for fluent interface.
Interactions enabled or not.
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
Specifies axis stroke
Axis itself for fluent interface
Axis stroke style
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.
Specifies an Axis title string
Axis itself for fluent interface
Axis title as a string
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
Set rotation of Axis title.
Object itself
Rotation in degrees
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Class that represents the amplitude value interval on a PolarChart.
The Amplitude Axis is depicted as a single line segment starting from the very center of the PolarChart and ending at its right side.
The Amplitude Axes' tick grid lines travel all over the PolarCharts Series space, doing a full 360 degree until returning to the other end of the tick, along the Amplitude Axis.
The Amplitude Axes' title is positioned just below the Axis line and centered horizontally.
Here is a list of the most commonly useful methods of Polar Amplitude Axis: