ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)

ZoomCharts.Configuration.LinearChartSettingsValueAxis

Methods

This type does not define any methods.

Properties

alignZero: boolean

Whether to align the zero value with other axes

animate: "auto" | "always"
Introduced in version 1.18.0.

Always animate value axis

Valid values:
  • auto - Only when necessary
  • always - Animate also on the first load
axisLine: boolean

Whether to show vertical line along value axis

enabled: boolean

Show/hide value axis.

forceTopAndBottomValues: boolean

Whether to force top and bottom values in the hgrid.

forcedMinMaxInset: number

Amount to inset the forced min/max values

forcedTopAndBottomOffsets: Array<number>

Additional offsets for forced top and bottom values

gridPosition: "above" | "under"
Introduced in version 1.18.9.

Placement of grid lines in relation to series data.

Valid values:
  • above - grid lines drawn after series
  • under - grid lines drawn before series
hgrid: boolean

Whether to show horizontal grid lines. Specifying null means that only the first value axis will show the horizontal lines, all other axis will not.

hideInvalidAxis: boolean

Whether to hide the valid axis when it is not valid

initialAnimationValue: number
Introduced in version 1.18.0.

This parameter works together with animate when it's set to "always" as here you can define fixed initial value that should be used for animation beginning. If set to 0, then animation would be with "dropping" effect. If set to larger value than your maximum series value, then effect would be "growing". If you want animation value to be calculated automatically depending on your data, keep default value and adjust initialAnimationValueMultiplier.

initialAnimationValueMultiplier: number
Introduced in version 1.18.0.

This parameter works together with animate when it's set to "always". It's used for multiplying maxium series value to get "growing" or "dropping" animation effect. By default (if initial animation is turned on) there would be "growing" effect. You can increase this value if you need "further growing". To make "dropping" effect you should use values less than 1, (for example: 0.45). Also adjust scaleAdjustmentAnimationDelay to make animation longer.

logScale: boolean

Whether to use logarithmic scale.

maxValue: number

Fixed maximum value for value axis. If not set it will be computed automatically from visible data and zeroLine settings.

minValue: number

Fixed minimum value for value axis. If not set it will be computed automatically from visible data and zeroLine settings.

onlyPaintMinMax: boolean

Only draw the top and bottom labels

onlyPaintUniqueLabels: boolean

Only draw non-redundant labels

position: "inside" | "outside"

Location of the value axis.

Valid values:
  • inside - on the left side, outside of the chart
  • outside - on the left side, inside of the chart
scaleAdjustmentAnimation: "=" | "<>"

The animation easing function.

Valid values:
  • = - linear animation
  • <> - quadratic easing
scaleAdjustmentAnimationDelay: number

Scale adjustment animation duration.

scaleAdjustmentTolerance: number

This tolerance specifies how big that part is as fraction of total chart height. When part of the vertical space is not used chart scale is automatically adjusted.

scaleMinStep: number

Smallest difference between two labels. For example, use 1 to disallow the labels to go into fractions.

scaleStep: number

Difference between two values on the axis. If not set (default), will be automatically calculated from chart height, min, max value and style.labelSpacing.

side: "right" | "left"

Value axis side in chart. Possible values: "left" or "right".

size: number

Fixed width of the value axis. If not set it will be computed automatically from font size.

snapScale: number

How to scale units when snapping to simple fractions. Normally, values on a linear scale are snapped to 1, 2, 2.5, 5, or 10 unit. For example if a value of 9 snaps to 10 with snapScale 1, then with snapScale 3, the linear scale will snap (9/3)=3 to (5*3)=15

Style for parts of value axis.

Properties
autoScaleLabelSpacing: boolean

Whether label spacing should automatically scale with font size

Rendering style for the vertical line along value axis.

Base line settings. It is the horizontal line showing zero value.

Horizontal grid lines.

labelSpacing: number

Distance between value axis labels.

labelSpacingMode: "fixed" | "auto"

How label spacing is used

Valid values:
  • fixed - Use labelSpacing value directly
  • auto - Automatically calculate spacing; use labelSpacing as an additional scale/offset value

Value axis tick lines style.

Version 1.15.0: moved font, fillColor properties to under textStyle.

Title text for the value axis.

Version 1.15.0: moved font, fillColor properties to under textStyle.

Value axis label rendering settings.

Provides the ability to draw threshold guidelines and fill background areas for certain values. For example, this can be used to highlight an area that exceeds certain limit.

title: string

Title text for the value axis.

valueFormat: string

Following formats are supported:

^0([.,]0+)?( ?%) - percentage ^([^0-9]+)?0?([.,]0+)?([^0-9]+)? - currency

valueFormatterFunction: (value: number, unitName: string, unitValue: number, name: string, extra?: any) => string
Version 1.15.7: the callback is invoked to get the size of the axis if size is not specified.

Prepare custom format values to display in value axis. If using this, consider also setting the size parameter to accommodate your label size.

Parameters
value: number

numerical value to display

unitName: string

name of multiplier - 'K' for thousands, 'M' for millions

unitValue: number

multiplier value - 1000 for thousands, 1 000 000 for millions

name: string

value string that is displayed by default

extra: any

additional metadata for advanced use cases

Return value
Data type: string

string to display at the value

zeroLine: "visible" | "center" | "floating"

Zero line.

Valid values:
  • visible - adjusts position accordingly to the min/max values
  • center - always centered
  • floating - can be outside the visible chart - shown only range between min-max values.
X