new CategoryAxisOptions()
The CategoryAxisOptions object defines the configuration options for chart's category axes (oX). The chart can show zero or multiple category axes. Each serie has a collection of values. Each value represents a category. If the data property of the serie has been provided as an object (not array), each property of the object represents a category. For instance, data: {"meta": 200, "whatsup": 300}, defines two category names meta and whatsup. These custom categories are shown instead of categories defined by the first category axis.
For instance, the "categories" option:
categoryAxis: { categories: "2001,2002,2003" }defines the categories on oX axis
Members
(static) align :exontrol.AlignEnum
The align field aligns the category-axis to bottom/right or top/left side of the view. If the chart is horizontally oriented (values go vertically, categories go horizontally) the category-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 category-axis can be aligned to left or right side of the view
The default category-axis can be shown next to 0-origin of value-axis only if:
- misc.updateRangeOnScroll {number} option is 0 (specifies the time in ms to update the chart's minimum and maximum values while user scrolls the chart (0 indicates that the chart's minimum and maximum values are updated only when changing the data))
- align option is 1(exAlignCenter) or 4(exAlignVCenter)
- 0 is shown between value-axis minimum and maximum values
Type:
- exontrol.AlignEnum
(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).
Type:
- string | object
(static) axisLine :LineOptions
The axisLine field defines the configuration options to show the line of the category-axis.
Type:
(static) categories :string|Array.<string>
The categories field defines the category names. Each serie has a collection of values. Each value represents a category. If the data property of the serie has been provided as an object (not array), each property of the object represents a category. For instance, data: {"meta": 200, "whatsup": 300}, defines two category names meta and whatsup. These custom categories are shown instead of categories defined by the first category axis. The categories field can be any of the following types:
- categories {number}, the categories property could indicate:
- categories {string}, the categories property could indicate:
- categories {string[]}, array of category names
Type:
- string | Array.<string>
Example
"x" {string}, specifies single-category named "x" (if the control's <a href="Graph.html#SetData">Data</a> property is not set), or the column named "x" within the control's Data property provides the category names (if the control's <a href="Graph.html#SetData">Data</a> property is set)
"2001,<b>2002,2003" {string}, indicates three categories such as "2001", "2002" and "2003", while 2002 is displayed in bold
[2001,2002] {array}, specifies two categories such as "2001" and "2002"(static) chartGridLines :FormatGridLinesOptions
The chartGridLines field defines the configuration options to show the grid lines and labels between for the chart panel.
Type:
(static) cursorFormat :string
The cursorFormat field specifies an expression to customize the tooltips to show on category-axis, when the crosshair intersects the category-axis. The format-expression supports predefined constants, operators and keywords as explained:
- "index" keyword defines the index of the category
- "value" keyword defines the name of the category
Type:
- string
(static) format :string
The format field specifies an expression to customize the labels to show on category axis. The format-expression supports predefined constants, operators and keywords as explained:
- "index" keyword defines the index of the category
- "value" keyword defines the name of the category
Type:
- string
(static) majorGridLines :GridLinesOptions
The majorGridLines field defines the configuration options to show the major grid lines of the category-axis.
Type:
(static) majorTicks :TicksOptions
The majorTicks field defines the configuration options to show the major ticks of the category-axis.
Type:
(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.
Type:
- number | string | Array.<number> | Array.<string>
(static) overviewGridLines :FormatGridLinesOptions
The overviewGridLines field defines the configuration options to show the grid lines and labels between for the overview panel.
Type:
(static) reverse :boolean
The reverse field indicates the direction of the category axis.
Type:
- boolean
(static) shape :any
The shape field defines the shape to apply on the category-axis's background. The shape can be a string expression that defines shape's name within the exontrol.Shape.Graph or exontrol.Shape 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)
exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace(static) tfi :string|object
The tfi field specifies the font attributes to apply on the title and labels of the category-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 mode as a value between 0 and 4
- 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 <fg blue>" {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(static) title :string
The title field specifies the title of the category-axis. The title supports ex-HTML format.
Type:
- string
(static) visible :boolean
The visible field shows or hides the category-axis (including the labels).
Type:
- boolean