ValueAxisOptions class (Graph)

ValueAxisOptions()

new ValueAxisOptions()

The ValueAxisOptions object defines the configuration options for chart's value axes (oY). The value-axis is vertical in a horizontal chart (categories go horizontally and values go vertically) and horizontal in a vertical chart (categories go vertically and values go horizontally). The chart can show zero or multiple value axes. One or more series can be assigned to a value axis, using the SerieOptions.axis field. Use the valueAxis field to define the value axes. The Serie.Vertical property determines whether the series is plotted against the vertical or horizontal value axis.

For instance, the "max" option:

valueAxis: { max: 100 }
re-defines the maximum value of the axis

Members

(static) align :exontrol.AlignEnum

The align field aligns the value-axis to left/top or right/bottom side of the view. If the chart is horizontally oriented (values go vertically, categories go horizontally) the value-axis can be aligned to bottom or top side of the view. If the chart is vertically oriented (values go horizontally, categories go vertically) the value-axis can be aligned to left or right side of the view. The default alignment is on the left or top side of the view, depending on the chart's orientation. The Serie.Vertical property specifies if the series is plotted along the vertical axis or the horizontal axis.
Type:
  • exontrol.AlignEnum
Example
null {null}, aligns the value-axis to left/top side of the view (default).
exontrol.AlignEnum.exAlignRight {exontrol.AlignEnum} or 2 {number}, aligns the value-axis to the right side of the view.
align

(static) angle :string|object

The angle field specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis. By default, if angle is omitted all angles are set on null(auto). The title field specifies the title of the value-axis. The format field specifies an expression to customize the labels to show on value axis.
Type:
  • string | object
Example
null {null}, all angles are set on auto (by default). For instance, if the axis is vertically displayed and aligned to the left side of the control, the title is rotated 90 degree anti-clockwise, while the labels are shown not-rotated. if the axis is aligned to the right the title is rotated 90 degree clockwise.
"45,0" {string}, the title is rotated 45 degree clockwise, while the labels are not rotated
{title: -90} {string}, the title is rotated 90 degree anti-clockwise
angle

(static) asPercent :boolean

The asPercent field indicates whether the value-axis converts the serie's values to [0,1] range, as percentages (the values area always numbers between 0 and 1). The format field specifies an expression to customize the labels to show on value axis. If asPercent is set to true, the values of the series associated with this value axis are treated as percentages and are displayed as numbers between 0 and 1. For example, if a data point has a value of 0.25, it will be displayed as 25% on the chart. If asPercent is set to false or null, the values are displayed as they are without any conversion to percentages.
Type:
  • boolean
Example
null {null} or false {boolean}, the serie's values show as normal (by default)
true {boolean}, the serie's values show as percentages (the values area always numbers between 0 and 1)
asPercent

(static) axisLine :LineOptions

The axisLine field defines the configuration options to show the line of the value-axis. The axisLine can be defined as null to show a solid-black 1-pixel wide line or as an object of LineOptions type to customize the line's color, width, and style. The axis-line is the line that represents the value-axis itself, while the majorGridLines field are the lines that extend from the value-axis across the chart to help visually align data points with their corresponding values on the axis. The majorTicks field defines the configuration options to show the major ticks of the value-axis.
Type:
Example
null {null}, indicates a solid-black 1-pixel wide axis-line
{color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide axis-line
axisLine

(static) cursorFormat :string

The cursorFormat field specifies an expression to customize the tooltips to show on value-axis, when the crosshair intersects the value-axis. The cursorFormat field is valid only if the Cursor.visible property is true, so the crosshair is shown on the chart. If cursorFormat is null, the tooltip shows the value of the axis at the intersection point with the crosshair without any formatting. The value can include ex-HTML tags for additional styling.

The format-expression supports predefined constants, operators and keywords as explained:

  • "value" keyword defines the value on the axis
Type:
  • string
Example
null {null}, no tooltip is shown on value-axis, when the crosshair intersects the value-axis
"value format ``" {string}, displays the values using two-decimals (according with the current regional settings)
cursorFormat

(static) end :number

The end field defines where the value-axis ends relative to the full axis. The axis field specifies the name of the value-axis to use. For instance, you can use the start and end fields to customize the vertical or horizontal position on the chart to visualize a specified serie. The min and max fields specify the minimum and maximum values of the axis.
Type:
  • number
Example
null {null}, the end of the value-axis is not changed (no effect)
0.75 {number}, indicates that the value-axis (and its series) uses 3/4 of the height of the view (for horizontal charts)
end

(static) format :string

The format field specifies a format-expression to customize the labels to show on value axis. For example, the expression "value format `0.00`" formats the value-axis labels to show two decimals according to the current regional settings. If the format field is null (undefined), the value-axis labels are displayed as they are without any formatting. The value can include ex-HTML tags for additional styling. The offsetLabel field defines the offset to move labels horizontally or vertically in relation to their original positions.

The format-expression supports predefined constants, operators and keywords as explained:

  • "value" keyword defines the value to format
Type:
  • string
Example
null {null}, the values are displayed as they are (format is ignored)
"``" {string}, no label is displayed on the value-axis
"value format ``" {string}, the value-axis displays the values using two-decimals (according with the current regional settings)
format

(static) idemmM :string

The idemmM field specifies the name of another value axis to synchronize the min, max, and major-unit values during scrolling. When set, the value axis will automatically update its min, max, and major-unit to match the linked axis, keeping multiple value axes in sync while scrolling. If idemmM is null or omitted, these values are synchronized with the default value axis. If idemmM is set to the name of an existing value axis (for example, "2nd"), the axis synchronizes with that named axis. If the specified axis does not exist, the synchronization falls back to the default value axis.
Type:
  • string
Since:
  • 4.4
Example
null {null}, the min, max, and major-unit values are synchronized with the default value-axis values (default)
"2nd" {string}, the min, max, and major-unit values are synchronized with the value-axis named "2nd". If a value-axis named "2nd" does not exist, the min, max, and major-unit values of the default value-axis are used instead.
idemmM

(static) majorGridLines :GridLinesOptions

The majorGridLines field defines the configuration options to show the major grid lines of the value-axis. The majorGridLines can be defined as null to show solid-lightgray 1-pixel wide grid lines for the first value axis (default value axis), while the other value axes show no grid lines for null. Alternatively, it can be defined as an object of GridLinesOptions type to customize the grid lines' color, width, style, and step. The majorGridLines are the lines that extend from the value-axis across the chart to help visually align data points with their corresponding values on the axis, while the axisLine field defines the configuration options to show the line of the value-axis itself and the majorTicks field defines the configuration options to show the major ticks of the value-axis.
Type:
Example
null {null}, indicates a solid-lightgray 1-pixel wide grid lines for first value axis (default value axis). The other value axes show no grid lines for null (no effect for others)
{color: "red", width: 2, step: 2} {GridLinesOptions}, indicates a solid-red 2-pixels wide grid lines, displayed two by two
majorGridLines

(static) majorTicks :TicksOptions

The majorTicks field defines the configuration options to show the major ticks of the value-axis. The majorTicks can be defined as null to show solid-black 1-pixel wide ticks or as an object of TicksOptions type to customize the ticks' color, width, length, and style. The major-ticks are the small lines perpendicular to the axis-line that indicate the major divisions on the value-axis, while the majorGridLines field are the lines that extend from the value-axis across the chart to help visually align data points with their corresponding values on the axis. The axisLine field defines the configuration options to show the line of the value-axis.
Type:
Example
null {null}, indicates a solid-black 1-pixel wide tick
{color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide tick
majorTicks

(static) majorUnit :number

The majorUnit field specifies the interval between major divisions. When setting this, be careful, as choosing an inappropriate value can make it time-consuming. For example, if the minimum is 0, the maximum is 1,000,000, and you set the majorUnit to 1, the scale will increment one step at a time, which can be very slow. The start and end fields define where the value-axis begins and ends relative to the full axis, allowing you to display only a portion of the axis. The Serie.axis field specifies the name of the value axis to which these settings apply. For instance, the start and end fields can be used to adjust the visible portion of the value axis, which can change the vertical or horizontal position of the chart area and help focus on the values of a specific serie.
Type:
  • number
Example
2 {number}, re-defines the major-unit
majorUnit

(static) mark :MarkValueOptions|Array.<MarkValueOptions>

The mark field defines the configuration used to highlight areas on the chart or on the axis between specified values. It uses an object of type MarkValueOptions. A mark zone is displayed only when the MarkValueOptions.shape field and at least one of the MarkValueOptions.start or MarkValueOptions.end fields (or both) are provided and contain valid values. The mark field can be used to visually emphasize specific value ranges or thresholds on the value axis, such as highlighting values above a certain limit or between two limits.
Type:
Since:
  • 4.4
Example
null {null}, no values are highlighted
{shape: "red", start: 100} {MarkValueOptions}, draws a line at value 100 on the value axis,
[{shape: "FrameSel", start: 150, end: 175, showIn: "axis"}, {shape: "blue", start: 200}] {MarkValueOptions[]}, highlights the value axis between 150 and 175 using the "FrameSel" shape directly on the axis, rather than highlighting a section of the chart, and draws a blue-line at value 200
mark

(static) max :number

The max field specifies the maximum value of the axis. The end field defines where the value-axis ends relative to the full axis. The start field defines where the value-axis begins relative to the full axis. These fields allow you to display only a portion of the axis by setting the visible range within the full axis range. The Serie.axis field specifies the name of the value axis to which these settings apply. For example, the start and end fields can be used to adjust the visible portion of the value axis, which can change the vertical or horizontal position of the chart area and help focus on the values of a specific serie.
Type:
  • number
Example
10 {number}, re-defines the maximum value
max

(static) min :number

The min field specifies the minimum value of the value axis, while the max field specifies the maximum value of the value axis. The start field defines where the value axis begins relative to the full axis, and the end field defines where the value axis ends relative to the full axis. These fields allow you to display only a portion of the axis by setting the visible range within the full axis range. The Serie.axis field specifies the name of the value axis to which these settings apply. For example, the start and end fields can be used to adjust the visible portion of the value axis, which can change the vertical or horizontal position of the chart area and help focus on the values of a specific serie.
Type:
  • number
Example
-10 {number}, re-defines the minimum value
min

(static) name :string

The name field defines the name of the value axis. The name field has no effect if the control displays a single value-axis. The name field is used to identify the value axis and to assign series to it using the axis field of the Serie object. If the name field is null, the value axis is considered as the default value axis (unnamed value axis or the first value axis if all are named). If there are multiple value axes, it is recommended to assign a name to each value axis for better identification and assignment of series.
Type:
  • string
Example
"kelvin" {string}, defines a value axis named "kelvin"
name

(static) offsetLabel :number|string|Array.<number>|Array.<string>

The offsetLabel field defines the offset to move labels horizontally or vertically in relation to their original positions. The format field specifies a format-expression to customize the labels to show on value axis. The offsetLabel can be defined as a number to specify a horizontal shift to the right (positive value) or to the left (negative value) relative to the original position of the labels. Alternatively, it can be defined as a string in the format "x,y" where x specifies the horizontal shift and y specifies the vertical shift. For example, an offsetLabel of "8,-4" shifts the labels 8 pixels to the right and 4 pixels up relative to their original positions. If offsetLabel is null, the labels are shown in their original positions without any offset.
Type:
  • number | string | Array.<number> | Array.<string>
Example
null {null}, the labels are shown in their original-positions
8 {number}, the labels are shown shifted to the right, relative to their original-positions
",-8" {number}, the labels are shown shifted to the top, relative to their original-positions
[2,4] {number}, the labels are shown with a shift of 2 pixels to the right and 4 pixels down compared to their original positions
offsetLabel

(static) reverse :boolean

The reverse field indicates the direction of the value axis. The default value is null, which means that the values are listed from top to bottom (for horizontally oriented charts where values go vertically and categories go horizontally) and from left to right (for vertically oriented charts where values go horizontally and categories go vertically). If reverse is set to true, the value axis direction will be reversed, showing values from bottom to top (for horizontally oriented charts) and from right to left (for vertically oriented charts).
Type:
  • boolean
Example
null {null}, by default values are listed from top to bottom (chart horizontally oriented, values go vertically, categories go horizontally) and from left to right (chart vertically oriented, values go horizontally, categories go vertically)
true {boolean}, the value axis direction will be reversed, it shows values from bottom to top (chart horizontally oriented, values go vertically, categories go horizontally), and right to left (chart vertically oriented, values go horizontally, categories go vertically)
reverse

(static) shape :any

The shape field defines the shape to apply on the value-axis's background. The shape can be a string expression that defines shape's name within the exontrol.Shapes.Graph or exontrol.Shapes namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type. The shapeChart field defines the shape to apply on the chart's background right to the value-axis.
Type:
  • any
Example
"" {string}, null {null}, no shape is applied
"red" {string}, fills the object's background in red (CSS color)
'{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type)
"xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied)
"Button" or exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace (@since 5.2)
shape

(static) shapeChart :any

The shapeChart field defines the shape to apply on the chart's background right to the value-axis. The shape field defines the shape to apply on the value-axis's background. The shapeChart option is similar with shape excepts that it fills the chart's background not the value-axis's background. The shapeChart can be a string expression that defines shape's name within the exontrol.Shapes.Graph or exontrol.Shapes namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type.
Type:
  • any
Example
"" {string}, null {null}, no shape is applied
"red" {string}, fills the object's background in red (CSS color)
'{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type)
"xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied)
"Button" or exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace (@since 5.2)
shapeChart

(static) start :number

The start field defines where the value-axis begins relative to the full axis. The axis field specifies the name of the value-axis to use. For instance, you can use the start and end fields to customize the vertical or horizontal position on the chart to visualize a specified serie. The min and max fields specify the minimum and maximum values of the axis.
Type:
  • number
Example
null {null}, the start of the value-axis is not changed (no effect)
0.25 {number}, indicates that the value-axis (and its series) starts from the 1/4 of the height of the view (for horizontal charts)
start

(static) tfi :string|object

The tfi field specifies the font attributes to apply on the title and labels of the value-axis. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Type:
  • string | object
Example
null {null}, the tfi field is ignored
"bold monospace 16 &lt;fg blue&gt;" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue
tfi

(static) title :string

The title field specifies the title of the value-axis. The title supports ex-HTML format. If the title field is null, no title is shown. For example, the title "lt;b>Temperature" is displayed in bold as "Temperature". The title can also include other ex-HTML tags for additional styling. The angle field specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis. By default, if angle is omitted all angles are set on null(auto). For instance, if the axis is vertically displayed and aligned to the left side of the control, the title is rotated 90 degree anti-clockwise, while the labels are shown not-rotated. if the axis is aligned to the right the title is rotated 90 degree clockwise.
Type:
  • string
Example
null {null}, no title is shown
"lt;b&gt;Temperature" {string}, the Temperature title is displayed in bold
title

(static) type :Graph.AxisTypeEnum

The type field specifies whether the value axis uses a linear or logarithmic scale. Currently the value axis supports exLiner and exLogarithmic as explained.

The exLinear type acts as:

  • data is plotted directly based on its numeric value
  • the space between 0-10 is the same as 90-100
  • best for uniform data distributions or when values are not exponentially scaled

The exLogarithmic type acts as:

  • data is plotted based on the logarithm of its value
  • the space between 1-10 is the same as between 10-100 or 100-1000
  • ideal for exponential growth data or datasets with large dynamic ranges
  • all values should be greater than zero; zero or negative values are not supported

The exontrol.Graph.MiscellaneousOptions.epsilon miscellaneous option defines the minimum positive threshold applied to the logarithmic scale to prevent undefined behavior (e.g., log(0)) and improve numerical stability for very small values. The default value is 1e-8. If your dataset includes values below this threshold, you should adjust epsilon accordingly. Note that epsilon also influences the visual spacing between 0 and 1 on a logarithmic axis, a smaller epsilon increases the perceptual gap, while a larger value compresses it.

Type:
Since:
  • 4.5
Example
"linear" {string} or exontrol.Graph.AxisTypeEnum.exLinear {AxisTypeEnum} or 0{number} or null {null}, the value axis uses linear scale
"log" {string} or exontrol.Graph.AxisTypeEnum.exLogarithmic {AxisTypeEnum} or 1{number} , the value axis uses logarithmic scale
type

(static) visible :boolean

The visible field shows or hides the value axis, including the labels displayed on the axis. If visible is set to false, the value axis and its labels are hidden. If visible is set to true, the value axis and its labels are displayed. If visible is null, the value axis is visible by default. Even if a serie is associated with a hidden value axis, the start and end fields can still be used to adjust the vertical or horizontal position of the chart area so the serie can be properly visualized.
Type:
  • boolean
Example
null {null}, by default, the value-axis is visible (if null the visible field has no effect)
false {boolean}, hides the value-axis
visible