Options class (Graph)

The allowActions field customizes the actions the user can perform once the user clicks or touches the control. The format of allowActions field is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."

where

• "action", indicates the name of the action. The "action" can have any of the following values:
  • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
    • [view], specifies that the "scroll" is possible once the user clicks the view
    • [legend], specifies that the "scroll" is possible once the user clicks the legend
  • "zoom", zooms the control's content at dragging-point.
  • "fit", fits the drag-area into the control's client area. The "fit" action allows flags such as:
    • [zoom], specifies that the "fit" action magnifies the chart instead resizing it
  • "value-resize", resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true)
  • "overview-selection-resize", resizes the graph using the left/right margins of the overview-selection
• "shortcut", defines the serie's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
  • "Shift", indicates that the SHIFT key is pressed
  • "Ctrl" or "Control", indicates that the CTRL key is pressed
  • "Alt" or "Menu", indicates that the ALT key is pressed
  • "Meta" , indicates that the META key is pressed
  • "LButton", specifies that the mouse's left-button is pressed
  • "RButton", specifies that the mouse's right-button is pressed
  • "MButton", specifies that the mouse's middle/wheel-button is pressed
  • "Long", specifies that the action requires a "long" click or touch before it begins
  • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
  • "+", indicates AND between values

.

null {null}, indicates the control's default allowActions value
 "" {string}, specifies that no operation is allowed once the user clicks or touches the control
 "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the serie's button or modifier-keys is pressed.

The allowDrop field specifies whether the user can drag and drop local files into the control.

false {boolean}, no file can be drop into the control (default)
  true {boolean}, the user can drag and drop files into the control

The autoFit field specifies whether the control resizes the elements of the series to fit the control's content. The autoFit field has no effect for "radarArea", "radarLine", "radarColumn", "polarArea", "polarLine", "polarScatter" or "pie" chart-types.

false {boolean}, the autofit feature is disabled (default)
  true {boolean}, resizes the elements of the series to fit the control's content

The background object holds display options to show different parts of the control, as an object of BackgroundOptions type.

The categoryAxis field defines the chart's category axes (oX).

null {null}, the chart displays the category line but no labels for categories
  {color: "red"} {CategoryAxisOptions}, shows the default category-axis in red
  [{categories: [2001,2002,2003]}, {categories: ["A","B","C"], color: "blue"}] {CategoryAxisOptions[]}, defines two category-axis one that displays the 2001, 2002 and 2003, while another displays A, B and C in blue

The cursor field holds the configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes.

{visible: true}, shows the crosshair over the hover/touch area

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The format of cursors property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined below)

The cursors property supports any of the following parts:

• "valuePoint", defines the mouse-cursor when the mouse pointer hovers the value-point
• "legend", defines the mouse-cursor when the mouse pointer hovers an object of the legend
• "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element)
• "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)

.

"pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control

The data field defines the source the control imports data from, as one of the following:

• A String expression that specifies the URL to a CSV file (contains no eof, eor or str)
• A String expression in CSV format
• An object that includes the "files" member of FileList type (a local file)
• An array of data to load

The data source can be used by the Data property of the Serie object and categories option of the CategoryAxis property of the control.

"sample.csv" {string}, imports data from sample.csv file

The formatText field specifies the format to display the serie's caption (reserved). The exontrol.DrawTextFormatEnum type supports the following flags:

• exTextAlignTop (0x00), justifies the text to the top of the rectangle
• exTextAlignLeft (0x00), aligns text to the left
• exTextAlignCenter (0x01), centers text horizontally in the rectangle
• exTextAlignRight (0x02), aligns text to the right
• exTextAlignVCenter (0x04), centers text vertically
• exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
• exTextAlignMask (0x0F), specifies the mask for text's alignment.
• exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
• exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
• exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
• exPlainText (0x80), treats the text as plain text.
• exTextNoClip (0x0100), draws without clipping.
• exHTMLTextNoColors (0x0200), ignores the and tags.
• exTextCalcRect (0x0400), determines the width and height of the text.
• exHTMLTextNoTags (0x0800), ignores all HTML tags.
• exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
• exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
• exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.

.

null {null}, centers the caption
  32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
  0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The imageAlign field defines the alignment of the image within the serie (reserved). The imageAlign propery can be any of the following:

• 0, the image is on the left of the serie's caption
• 1, the image is on the right of the serie's caption
• 2, the image is on the top of the serie's caption
• 3, the image is on the bottom of the serie's caption

.

null {null}, the image is aligned left to the caption (default)
 1 {number}, the image is displayed to the right of the serie's caption

The imageSize field defines the size of the serie's image (reserved). The imageSize could be of one of the following types:

• {null}, Indicates that the serie's image is displayed as it is (full-sized).
• {number}, Specifies that the serie's image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the serie's image is stretched to giving square, else the serie's picture is scaled to fit the giving rectangle.
• {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the serie's picture to scale or stretch to.

.

null {null}, Indicates that the serie's image is displayed as it is (full-sized).
 0 {number}, no image is displayed
 64 {number}, the image is scaled to fit a 64 x 64 rectangle
 -64 {number}, the image is strected to a 64 x 64 rectangle
 [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
 [-32,-64] {array}, stretches the image to a 32 x 64 rectangle

The legend field holds the configuration options to display view's legend (the legend helps you choose which series to show or hide at runtime).

{visible: true}, shows the legend

The locked field indicates whether the control is locked(protected) or unlocked.

false {boolean}, unlocks the control (can select any serie)
  true {boolean}, locks the control (can't select any serie)

The misc field holds the control's miscellaneous options, as an object of MiscellaneousOptions type.

The overview field holds the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar).

{visible: true}, shows the overview

The pad field defines the chart's padding (space between the chart's content and its border), as one of the following:

• {number} a numeric value, to pad horizontal and vertical size with the same value
• {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side

.

null {null}, indicates that the default-padding field is used ([4,4])
  0 {number}, indicates no padding
  "8,4" {string}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels
  [8,4] {array}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels

The readOnly field indicates whether the control is read-only.

false {boolean}, the control is not read-only
  true {boolean}, the control is in read-only mode

The scrollBars field determines whether the control has horizontal and/or vertical scroll bars A combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars. The exontrol.ScrollBarsEnum type defines the following flags:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only horizontal scroll bars is shown
• exVertical (2), specifies that only vertical scroll bars is shown
• exBoth (3), specifies that both horizontal and vertical scroll bars are shown
• exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
• exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
• exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
• exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
• exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
• exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
• exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when cursor hovers the window. Also, the control's client area is extended on the scroll bars portion
• exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized
• exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)

.

0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
 15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
 12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control

The scrollBarsOrigin field specifies the color to highlight the position of the origin (0,0) on the control's scroll bars.

null {null}, hides the origin (0,0) on the control's scroll bar
  "black" {string}, shows the origin (0,0) on the control's scroll bar in black

The scrollPos field defines the horizontal and vertical scroll-position of the control's default view. Specifies an object of {x,y} type that defines the control's horizontal and vertical scroll-position as explained:

x {number}, indicates the horizontal scroll-position
y {number}, indicates the vertical scroll-position

.

{x: 100} {object}, scrolls horizontally to position 100
  {x: 100, y: 50} {object}, scrolls horizontally to position 100, and vertically to 50

The series field defines the series of data the chart displays, as an object (or an array of) of {category: value} or SerieOptions type. 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.

{data: {"meta": 200, "whatsup": 300}} {object}, sets a single serie to represent, inluding the category names
 {data: [1,2,3,4]} {SerieOptions}, sets a single serie to represent
 [{data: [1,3,5,7]}, {data: "2,4,6,8"}] {SerieOptions[]}, sets multiple-series to represent

The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. The format of shapes property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ 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 (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ 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( such as rgb(0,0,255) that defines a blue background)
  ◦ 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) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ 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 (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ 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) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes.Graph object (while it starts with a lowercase letter, such as shserie which refers to exontrol.Shapes.Graph.shserie shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined below)

The shapes property supports any of the following parts:

• "valuePoint", defines the visual-appearance for value-points. The shape supports additional fields as follows:
  • size {number}, specifies the size of the value-point
• "valueLine", defines the visual-appearance for value-lines (the guided line from the value-point to the value itself). The shape supports additional fields as follows:
  • length {number}, indicates the horizontal distance between the middle and end points of the value-line
• "valueBack", defines the visual-appearance to apply on the value's background
• "radarLine", specifies the visual-appearance to show the "radarLine" serie-types
• "radarArea", specifies the visual-appearance to show the "radarArea" serie-types
• "radarColumn", specifies the visual-appearance to show the "radarColumn" serie-types
• "polarLine", specifies the visual-appearance to show the "polarLine" serie-types
• "polarArea", specifies the visual-appearance to show the "polarArea" serie-types
• "polarScatter", specifies the visual-appearance to show the "polarScatter" serie-types
  • size {number}, specifies the size of the data-point on the chart
• "pie", specifies the visual-appearance to show the "pie" serie-types
• "scatter", specifies the visual-appearance to show the "scatter" serie-types
  • size {number}, specifies the size of the data-point on the chart
• "scatterLine", specifies the visual-appearance to show the "scatterLine" serie-types
• "scatterArea", specifies the visual-appearance to show the "scatterArea" serie-types
• "bubble", specifies the visual-appearance to show the "bubble" serie-types
  • size {number}, specifies the maximum-size of the data-point on the chart
• "line", specifies the visual-appearance to show the "line" serie-types
• "area", specifies the visual-appearance to show the "area" serie-types
• "column", specifies the visual-appearance to show the "column" serie-types
• "waterFall", specifies the visual-appearance to show the "waterFall" serie-types
  • lineSize {number}, defines size of to draw the lines between columns
• "rangeColumn", specifies the visual-appearance to show the "rangeColumn" serie-types
• "rangeArea", specifies the visual-appearance to show the "rangeArea" serie-types
• "candleStick", specifies the visual-appearance to show the "candleStick" serie-types
  • size {number}, specifies the size of the stick
  • hollow {boolean}, indicates whether the hollow candlestick representation is displayed (hollow candle means that its closing value is higher (or equal) than opening value of the same period)
• "ohlc", specifies the visual-appearance to show the "ohlc" serie-types
  • size {number}, specifies the size of the stick
• "cursorLine", defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
• "cursorCategoryAxisTooltip", defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit
• "cursorValueAxisTooltip", defines the visual-appearance to show the tooltip on the value-axes, when the crosshair hovers the value-unit
• "cursorXAxisTooltip", defines the visual-appearance to show the tooltip on the x-axes, when the crosshair hovers the value-unit (available for xy-chart types)
• "cursorYAxisTooltip", defines the visual-appearance to show the tooltip on the y-axes, when the crosshair hovers the value-unit (available for xy-chart types)
• "cursorSerieTooltip", defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series
• "legendSymbol", defines the visual-appearance of the symbols of the visible-series within the map legend
• "legendSymbolHidden", defines the visual-appearance of the symbols of the hidden-series within the map legend
• "legendLabel", defines the visual-appearance of the labels of the visible-series within the map legend
• "legendLabelHidden", defines the visual-appearance of the labels of the hidden-series within the map legend
• "legendUnit", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the visible-series within the map legend
• "legendUnitHidden", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the hidden-series within the map legend
• "select-overview", defines the visual-appearance to display the overview-selection
• "selectout-overview", defines the visual-appearance to display the left/right parts outside of the overview-selection
• "select-overview-resize", defines the visual-appearance to display left/right resize-margins of the overview-selection
• "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag

.

null {null}, specifies the default visual appearance
 "" {string}, no shape (no visual appearance is applied to any part of the control)
 '{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(valuePoint)' {string}, shows the value-point in white on a black-background, while the cursor hovers it
 "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Graph.xxx combined with exontrol.Shapes.Graph.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Graph.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Graph.zzz object defines the visual appearance of "y" part of the control

The smooth field defines the time in ms the control goes from one layout to another.

0 {number}, no smooth changes once the control goes from a layout to another
  125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

The sort field defines the list of series to be sorted, separated by spaces. The format of a particular element of the sort field is "KEY[\[INNER\]][:([A]|D)]", where KEY is the name or the index of the serie, INNER is the inner-index of the value to sort (valid for multi-dimensional array only), A stands for ascending (by default), while D for descending.

"name" {string}, sorts ascending the serie with the giving name
 "0 1:D" {string}, sorts ascending the first-serie (for identichal values, the second serie determines the order of the values)
 "ohlc[1]" {string}, sorts ascending the serie with the name "ohlc", by the second inner-value (the inner-value defines the element of an array-value, the [index] specifies the index of the inner-value to sort, the [index] is valid for charts that support multi-dimensional arrays such as "rangeColumn", "rangeArea", "candleStick" or "ohlc")

The tfi field applies font attributes to captions within the control. 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.

.

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

The toolTipDelay field specifies how long the mouse pointer must point to an object before the tool tip appears.

0 {number}, the tooltip is shown "immediately"
  128 {number}, the tooltip is displayed in 128 ms.

The toolTipFormat field specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart). The format-expression supports predefined constants, operators and keywords as explained:

• "value" keyword defines the value to format
• "name" keyword defines the name of the serie
• "category" keyword defines the category the value is in (available only if applicable)
• "percent" keyword defines the percent associated with the value, as a number between 0 and 100 (available only if applicable)
• "inner" keyword indicates the inner-index of the value within the point-data, such as 0(open or from), 1(high or to), 2(low) or 3(close) (available only if applicable)
• "%V0", "%V1", "%V2" or "%V3" keyword gets the inner-value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for columnRange chart-type, %V1 gets the high-value for candleStick chart-type or to for columnRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")

.

null {null}, the name of the serie followed by the value, "(name ? name + ': ' : '') + value"
 "``" {string}, no tooltip is shown
 "value format ``" {string}, displays the values using two-decimals (according with the current regional settings)

The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.

0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip stays indefinitely (negative)
  1000 {number}, the tooltip is visible for 1 second

The toolTipWidth field indicates the max-width of the control's tooltip (in pixels).

0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
  300 {number}, the tooltip's max-width is 300 pixels

The valueAxis field defines the chart's value axes (oY). The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use..

null {null}, the chart displays and uses a single value-axis
  {color: "red"} {ValueAxisOptions}, shows the default value-axis in red
  [{name: "celsius", min: 0, max: 100, majorUnit: 25}, {name: "kelvin", min: 273.15, max: 373.15, majorUnit: 25}] {ValueAxisOptions[]}, defines two value-axis celsius and kelvin (celsius is the default value axis)

The valueSize field specifies the size to show a column or a bar within the chart. The valueSize indicates the width for horizontally-oriented charts or height for the vertically-oriented chart types. The valueSize has no effect for xy or circular-compatible chart types. The valueSize has effect for area-compatible chart types as follows:

• "area" {string}, an area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares two or more quantities with an area chart. (data requires array of numbers, supports vertical field, scrollable)
• "line" {string}, a line chart or line graph, also known as curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time - a time series - thus the line is often drawn chronologically. In these cases they are known as run charts. (data requires array of numbers, supports vertical field, scrollable)
• "column" {string}, a column chart or column graph is a chart or graph that presents categorical data with rectangular columns with heights proportional to the values that they represent. A horizontal column chart is called a bar chart. (data requires array of numbers, supports vertical field, scrollable)
• "waterfall" {string}, a waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. (data requires array of numbers, supports vertical field, scrollable)
• "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
• "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
• "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)
• "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)

.

4 {number}, sets the column/bar's width to 4-pixels

The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.

0 {number}, locks any action the mouse's wheel performs
  18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

The xAxis field defines the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble").

null {null}, the chart displays the default x-axis
  {color: "red"} {ValueAxisOptions}, shows the x-axis in red
  {min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for x-axis

The yAxis field defines the configuration-options for y-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble").

null {null}, the chart displays the default y-axis
  {color: "red"} {ValueAxisOptions}, shows the y-axis in red
  {min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for y-axis

The zoom field defines the zoom factor of the control's content. The zoomLevels field defines the levels of the zoom-factor the control is allowed to magnify. The zoom field can be any value between 10 (10%) and 1000 (1000%).

null {null}, Specifies normal-view (100%)
  150 {number}, Indicates that the control's content is magnfied to 150%

The zoomLevels field defines the zoom-levels the user can magnify the control's content (specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom).

null {null}, Specifies that the control's zoom factor is always 100%
  150 {number}, Specifies that the control's zoom factor is always 150%
  "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the levels of zoom-factor is 50% to 350%