Options class (Graph)

The allowActions field defines a list of actions separated by comma that the user can perform by drag or click on the control's content. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.

The format of the property is:

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

where

• "action", defines the action to perform (as defined below)

  Action	Description	Flags
  "fit"	Fits the drag-area into the control's client area	[zoom], specifies that the "fit" action magnifies the chart instead resizing it
  "move-value"	Rearranges values, series, or data through drag-and-drop (available only if the serie's ShowValue property includes exPoint flag)	[disableMoveCategory], disables rearranging values/categories (default, if the flag is missing the user changes the control's Order property) [enableMoveSerie], enables rearranging series (changes the serie's Position property) [enableMoveData], enables rearranging the data of the serie (changes the serie's Data property)
  "overview-selection-resize"	Resizes the graph using the left/right margins of the overview-selection
  "scroll"	Scrolls the control's content by drag	[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
  "value-resize"	Resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true)
  "zoom"	Zooms the control's content at dragging-point

• "shortcut", defines the event'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

The allowActions field is mapped to the AllowActions property, which means that the following statements are equivalent:

oGraph.Options = {allowActions: "move-value(LButton),scroll"}
oGraph.SetOptions({allowActions: "move-value(LButton),scroll"})
oGraph.AllowActions = "move-value(LButton),scroll"
oGraph.SetAllowActions("move-value(LButton),scroll")

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 event's button or modifier-keys is pressed.
"move-value(LButton),scroll" {string}, specifies that the "move-value" action is allowed when the user left-clicks and drags a value. Otherwise, dragging performs a scroll operation

The allowDrop field specifies whether the user can drag and drop local files into the control. The control supports importing data from local files by dragging and dropping them into the control. Setting allowDrop to true enables this functionality, allowing users to easily load data from their local files into the control for visualization. When allowDrop is set to false, the drag-and-drop functionality for local files is disabled, preventing users from importing data in this way. This can be useful in scenarios where you want to restrict data input to specific sources or formats. The Date or Import method can be used to import data from all kind of sources, including local files, URLs, or directly from JavaScript objects and arrays.

The allowDrop field is mapped to the AllowDrop property, which means that the following statements are equivalent:

oGraph.Options = {allowDrop: true}
oGraph.SetOptions({allowDrop: true})
oGraph.AllowDrop = true
oGraph.SetAllowDrop(true)

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

The allowStack field specifies whether series are stacked according to the non-empty values defined in the Serie.Stack property. When allowStack is true, series that share the same non-empty Stack value are visually stacked, meaning their values are combined to display a cumulative total. When allowStack is false, the Stack property is ignored, and all series are displayed independently without stacking, regardless of their Stack values. By default, allowStack is false, so series are not stacked unless this property is explicitly enabled.

The allowStack field is mapped to the AllowStack property, which means that the following statements are equivalent:

oGraph.Options = {allowStack: true}
oGraph.SetOptions({allowStack: true})
oGraph.AllowStack = true
oGraph.SetAllowStack(true)

false {boolean}, the series' Stack property is ignored, and no series will be stacked, regardless of the Stack property's value.
true {boolean}, the series values are visually stacked on top of each other, provided the not-empty series' Stack property.

The autoFit field specifies whether the control resizes the elements of the series to fit the control's content. The valueSize field defines the size of the value-points (e.g., columns, bars, areas) for area-compatible chart types (e.g., "column", "bar", "area"). When autoFit is set to true, the control automatically adjusts the size of these elements to ensure they fit within the available space in the control, preventing overlap and improving readability. If autoFit is set to false, the elements will maintain their original size based on the data values, which may result in overlapping or truncated visuals if the data values are large or if there are many series. The autoFit field is not applicable for certain chart types such as "radarArea", "radarLine", "radarColumn", "polarArea", "polarLine", "polarScatter" or "pie" charts, where the layout is determined by other factors and resizing elements to fit the content is not relevant.

The autoFit field is mapped to the AutoFit property, which means that the following statements are equivalent:

oGraph.Options = {autoFit: true}
oGraph.SetOptions({autoFit: true})
oGraph.AutoFit = true
oGraph.SetAutoFit(true)

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

The background property holds display options to show different parts of the control, as an object of BackgroundOptions type. The BackgroundOptions object defines the default visual appearance used by the control for chart elements such as series colors, area transparency, and tooltip styling. It allows customizing how series are colored, how area charts blend with the background, and how tooltips appear when interacting with the chart.

The background field is mapped to the Background property, which means that the following statements are equivalent:

oGraph.Options = {background: {seriesColors: "lightblue"}}
oGraph.SetOptions({background: {seriesColors: "lightblue"}})
oGraph.Background = {seriesColors: "lightblue"}
oGraph.SetBackground({seriesColors: "lightblue"})

{seriesColors: "lightblue"} {BackgroundOptions}, sets the default color of the series to light blue (all series are shown in light blue, unless the Serie.Shape property specifies a different color for a specific serie)

The categoryAxis field defines the chart's category axes (oX). The category axis is horizontal (oX) for horizontal charts and vertical (oY) for vertical charts. The Serie.Vertical property specifies whether the chart is displayed vertically or horizontally. For xy-compatible chart types ("scatter", "scatterLine", or "bubble"), the xAxis and yAxis fields define the configuration options for the x and y axes, and the categoryAxis field is ignored. The categoryAxis field can be set to null to indicate that the chart uses a single default category axis, or to an object or an array of CategoryAxisOptions to define one or more category axes with custom configurations.

The categoryAxis field is mapped to the CategoryAxis property, which means that the following statements are equivalent:

oGraph.Options = {categoryAxis: {tfi: ""}}
oGraph.SetOptions({categoryAxis: {tfi: ""}})
oGraph.CategoryAxis = {tfi: ""}
oGraph.SetCategoryAxis({tfi: ""})

null {null}, removes the categories of the chart
{tfi: "<fgColor 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 can be used to configure the behavior and appearance of the chart's cursor. It allows you to show or hide the cursor, display crosshair lines over the X (category) and Y (value) axes, enable tooltips for nearby series data or axes, control specific X/Y line visibility for XY-type charts, and set the smooth transition time for cursor movement between positions. Essentially, it defines how the cursor interacts with the chart and how information is presented to the user during hover or touch. By default, the cursor is hidden.

The cursor field is mapped to the Cursor property, which means that the following statements are equivalent:

oGraph.Options = {cursor: {visible: true}}
oGraph.SetOptions({cursor: {visible: true}})
oGraph.Cursor = {visible: true}
oGraph.SetCursor({visible: true})

{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 cursors field supports applying different mouse cursors on different parts of the control. For instance, you can set cursors to "pointer(valuePoint)" to show the pointer cursor when hovering the value points of the series. This option allows you to enhance the user experience by providing visual feedback on interactive elements of the control, making it easier for users to understand which parts of the control are clickable or interactive based on the cursor displayed.

The format of the 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 "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"anchor" (hyperlink)	defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element)
"legend"	defines the mouse-cursor when the mouse pointer hovers an object of the legend
"long"	specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
"move-value-drag"	defines the mouse cursor while a value, series, or data point is being dragged, visually indicating an active drag operation and showing which element can be grabbed. This is valid only if allowActions includes the "move-value" action and is typically used with "pointer(valuePoint)" to suggest that the user can click and move the value. Example: when the user clicks a value-point and begins dragging it, the cursor changes to "grabbing(move-value-drag)" to signal that the item is being moved (@since 4.9)
"no"	defines the mouse cursor to be shown when a drag-and-drop operation is not allowed (for example, when dropping a value, series, or data point is not permitted in the current area). This is valid only if allowActions includes the "move-value" action and provides immediate visual feedback to prevent accidental operations. Example: when the user drags a value over an invalid target, the cursor changes to "not-allowed(no)" to indicate that the operation is blocked (@since 4.9)
"valuePoint"	defines the mouse-cursor when the mouse pointer hovers the value-point

The cursors field is mapped to the Cursors property, which means that the following statements are equivalent:

oGraph.Options = {cursors: "pointer(valuePoint)"}
oGraph.SetOptions({cursors: "pointer(valuePoint)"})
oGraph.Cursors = "pointer(valuePoint)"
oGraph.SetCursors("pointer(valuePoint)")

"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. The data source can be of any type that the control supports to import data from, such as a URL, a CSV string, a local file, or a JavaScript array or object. The control's Data or Import method can be used to import data from all kind of sources, including local files, URLs, or directly from JavaScript objects and arrays. The data field is flexible and can accept various formats and types of data sources, allowing you to easily load and visualize your data in the control. The control will automatically detect the type of the provided data source and import it accordingly, making it convenient to work with different data formats without needing to manually specify the type.

The data field can be set to null to indicate that no data is loaded into the control, or to a specific data source, which can be of any of the following types:

• 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 field is mapped to the Data property, which means that the following statements are equivalent:

oGraph.Options = {data: "sample.csv"}
oGraph.SetOptions({data: "sample.csv"})
oGraph.Data = "sample.csv"
oGraph.SetData("sample.csv")

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

The formatText field specifies the format to display the labels or captions on the control. The formatText field is a bitwise combination of flags that control the alignment, word-breaking, tab expansion, and other aspects of how text is rendered within the control. For example, you can choose to align text to the center, enable word-breaking for long captions, or specify that text should be displayed on a single line. The exontrol.DrawTextFormatEnum type defines various flags that can be combined to achieve the desired text formatting.

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.

The formatText field is mapped to the FormatText property, which means that the following statements are equivalent:

oGraph.Options = {formatText: 32}
oGraph.SetOptions({formatText: 32})
oGraph.FormatText = 32
oGraph.SetFormatText(32)

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 control (reserved). The imageSize field defines the default-size of the images within the control (reserved). Currently, the imageSize and imageAlign fields are ignored and reserved for future use.

The field 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 default size of the images within the control (reserved). The imageAlign field defines the alignment of the images within the control (also reserved). Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageSize field does not affect images inserted with the <img> tag. The <img> tag supports additional size attribute that specifies the picture's size such as "<img>apple:18</img>2002", which indicates that the image named apple has a size of 18. Currently, the imageSize and imageAlign fields are ignored and reserved for future use.

The imageSize could be of one of the following types:

• {null}, Indicates that the image is displayed as it is (full-sized).
• {number}, Specifies that the image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the 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.

The imageSize field is mapped to the ImageSize property, which means that the following statements are equivalent:

oGraph.Options = {imageSize: "32,64"}
oGraph.SetOptions({imageSize: "32,64"})
oGraph.ImageSize = "32,64"
oGraph.SetImageSize("32,64")

null {null}, indicates that the 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 invalid field specifies the label the control is displaying while no or invalid data. The invalid field can be set to null to indicate that no label is displayed, or to a string to specify the label to be shown while the control has no or invalid data. This option allows you to provide feedback to users when the control cannot display data, improving the user experience by clearly communicating the issue. The control's Data or Import method can be used to import data from all kind of sources, including local files, URLs, or directly from JavaScript objects and arrays.

The invalid field is mapped to the Invalid property, which means that the following statements are equivalent:

oGraph.Options = {invalid: "no or invalid data"}
oGraph.SetOptions({invalid: "no or invalid data"})
oGraph.Invalid = "no or invalid data"
oGraph.SetInvalid("no or invalid data")

null {null}, no label is displayed
"no or invalid data" {number}, defines a label to be shown while the control has no or invalid data

The legend field defines the configuration options for displaying the view's legend, which allows users to show or hide series at runtime. The legend displays the list of series in the chart and typically includes a color indicator for each series to help users identify and differentiate them. By configuring the legend options, you can control its visibility, position, layout, and behavior. Clicking a label in the legend shows or hides the corresponding serie in the chart, which is useful when multiple series are displayed and users need to identify or control them at runtime. By default, the legend is hidden.

The legend field is mapped to the Legend property, which means that the following statements are equivalent:

oGraph.Options = {legend: {visible: true}}
oGraph.SetOptions({legend: {visible: true}})
oGraph.Legend = {visible: true}
oGraph.SetLegend({visible: true})

{visible: true}, shows the legend

The locked field indicates whether the control is locked(protected) or unlocked. The readOnly field indicates whether the control is read-only. When the control is locked, the user cannot interact with the chart in any way, including scrolling or modifying data. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. In both cases, the chart's data and series remain protected from changes, but read-only mode allows viewing and exploration, while locked mode prevents all interaction.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oGraph.Options = {locked: true}
oGraph.SetOptions({locked: true})
oGraph.Locked = true
oGraph.SetLocked(true)

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 miscellaneous options include various settings that do not fit into other specific categories but still affect the behavior and appearance of the control. These options can include settings for animations, interactivity, performance optimizations, and other features that enhance the overall user experience. By using the misc field, you can fine-tune the control's behavior and appearance to better suit your specific use case and requirements.

The misc field is mapped to the Misc property, which means that the following statements are equivalent:

oGraph.Options = {misc: {baseMajorUnits: "1,5"}}
oGraph.SetOptions({misc: {baseMajorUnits: "1,5"}})
oGraph.Misc = {baseMajorUnits: "1,5"}
oGraph.SetMisc({baseMajorUnits: "1,5"})

{digits: 2} {MiscellaneousOptions}, rounds the values to 2 digits after the decimal point
{baseMajorUnits: "1,5,10"} {MiscellaneousOptions}, specifies the base major units for value axes (the major units are calculated based on these base units)

The multiColorSerie field determines whether a single data series (single-valid serie) in a chart can use multiple colors for its data points instead of a single uniform color. The seriesColors field defines the default colors used for the chart's series. When multiColorSerie is set to true, each data point in the series can have a different color, which is useful for visually distinguishing individual values within the same series. When multiColorSerie is set to false, the entire series is rendered in a single color, which is determined by the seriesColors field or by the specific color settings of the serie. By default, multiColorSerie is set to true, allowing for more visual differentiation of data points within a series.

The multiColorSerie field is mapped to the MultiColorSerie property, which means that the following statements are equivalent:

oGraph.Options = {multiColorSerie: true}
oGraph.SetOptions({multiColorSerie: true})
oGraph.MultiColorSerie = true
oGraph.SetMultiColorSerie(true)

false {boolean}, the entire serie is rendered in a single color
true {boolean}, each data point in the series can have a different color (useful for distinguishing individual values visually) (default)

The order field defines the custom display sequence of values or categories by their zero-based indexes as a string separated by commas. It returns a list of value or category indexes in their displayed order, and assigning a non-empty value allows you to set the position of one, several, or all values.

The data values in the chart are arranged using the following properties:

• Sort, sorts the series values in ascending or descending order
• reverse (option of CategoryAxisOptions type), reverses the position of the values as they were added (if no Sort is applied), or reverses the order produced by the Sort property (if Sort is applied)
• Order, repositions values according to their zero-based indexes in a custom sequence

The custom order is cleared when Sort property or CategoryAxisOptions.reverse field is set, leaving the Order property empty. If you want to reset the custom ordering and revert to the original order of values or categories as they were added to the series, you can clear the Order property by setting it to an empty string or null. This action removes any custom ordering and restores the default sequence as specified by Sort property and CategoryAxisOptions.reverse field.

The order field is mapped to the Order property, which means that the following statements are equivalent:

oGraph.Options = {order: ",,9,,1"}
oGraph.SetOptions({order: ",,9,,1"})
oGraph.Order = ",,9,,1"
oGraph.SetOrder(",,9,,1")

For instance: , ",,9,,1" {string}, index 9 third, index 1 fifth; unspecified positions follow the default order.

null {null}, the values or categories are displayed in their original order (default)
"8" {string}, index 8 first (move the index 8 to the first position)
",,8" {string}, index 8 third (move the index 8 to the third position)
"8,,1" {string}, index 8 first, index 1 third (move the index 8 to the first position, and index 1 to the third position)
",,9,,1" {string}, index 9 third, index 1 fifth (move the index 9 to the third position, and index 1 to the fifth position; unspecified positions follow the default order of the other indexes)

The overview field holds the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar). The overview is a small chart that provides a visual summary of the entire data series, allowing users to quickly understand the overall trends and patterns in the data. It is particularly useful when dealing with large datasets or when the main chart is scrollable, as it helps users navigate through the data more efficiently. By configuring the overview options, you can control its visibility, size, position, and other aspects of its appearance and behavior. By default, the overview is hidden.

The overview field is mapped to the Overview property, which means that the following statements are equivalent:

oGraph.Options = {overview: {visible: true}}
oGraph.SetOptions({overview: {visible: true}})
oGraph.Overview = {visible: true}
oGraph.SetOverview({visible: true})

{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

The pad field is mapped to the Pad property, which means that the following statements are equivalent:

oGraph.Options = {pad: "8,4"}
oGraph.SetOptions({pad: "8,4"})
oGraph.Pad = "8,4"
oGraph.SetPad("8,4")

null {null}, indicates that the default padding value of [4,4] is applied
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. The locked field indicates whether the control is locked(protected) or unlocked. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. When the control is locked, the user cannot interact with the chart in any way, including scrolling or modifying data. In both cases, the chart's data and series remain protected from changes, but read-only mode allows viewing and exploration, while locked mode prevents all interaction.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oGraph.Options = {readOnly: true}
oGraph.SetOptions({readOnly: true})
oGraph.ReadOnly = true
oGraph.SetReadOnly(true)

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. The scrollBars field accepts an OR combination of ScrollBarsEnum flags that specifies the type of scroll bars to be shown. By default, the scrollBars field is set to exBoth, which means that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area. The scroll bars are automatically hidden when they are not needed, unless the scrollBars field includes exDisableNoHorizontal, exDisableNoVertical or exDisableBoth flags. The onscroll event is fired when the user scrolls the control's content.

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 if the content is larger than the control's client area
• 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)

The scrollBars field is mapped to the ScrollBars property, which means that the following statements are equivalent:

oGraph.Options = {scrollBars: exontrol.ScrollBarsEnum.exDisableBoth}
oGraph.SetOptions({scrollBars: exontrol.ScrollBarsEnum.exDisableBoth})
oGraph.ScrollBars = exontrol.ScrollBarsEnum.exDisableBoth
oGraph.SetScrollBars(exontrol.ScrollBarsEnum.exDisableBoth)

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. The scrollBarsOrigin field has effect for "scatter", "scatterLine" or "bubble" chart-types. The Serie.Type property defines the chart-type of a serie. The scrollBarsOrigin field can be set to null to hide the origin (0,0) on the control's scroll bars, or to any CSS color string to show the origin (0,0) on the control's scroll bars in that color.

The scrollBarsOrigin field is mapped to the ScrollBarsOrigin property, which means that the following statements are equivalent:

oGraph.Options = {scrollBarsOrigin: "black"}
oGraph.SetOptions({scrollBarsOrigin: "black"})
oGraph.ScrollBarsOrigin = "black"
oGraph.SetScrollBarsOrigin("black")

By default, the scrollBarsOrigin field is "black", so the origin (0,0) is shown on the control's scroll bars in black color.

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. The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. The scrollPos field can be set to null to indicate that the control's content is not scrolled, or to an object of {x,y} type to specify the horizontal and vertical scroll-position. Setting the x property of scrollPos to a specific value (e.g., 100) will scroll the control's content horizontally to that position, while setting the y property will scroll the content vertically. This allows you to control the initial scroll position of the control's content, which can be useful for focusing on specific areas of a large chart or graph when it is first displayed.

The scrollPos field is mapped to the ScrollPos property, which means that the following statements are equivalent:

oGraph.Options = {scrollPos: {x: 100, y: 50}}
oGraph.SetOptions({scrollPos: {x: 100, y: 50}})
oGraph.ScrollPos = {x: 100, y: 50}
oGraph.SetScrollPos({x: 100, y: 50})

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 serieDef field specifies the default options applied to each newly created series. Existing series are not affected; the defaults apply only to series added afterward. The serieDef object supports all fields defined by the SerieOptions type. This field is useful when you want to maintain consistent configuration across all newly added series without having to set the same options repeatedly.

The serieDef field is mapped to the SerieDef property, which means that the following statements are equivalent:

oGraph.Options = {serieDef: {stack: "A", showValue: "point,hit"}}
oGraph.SetOptions({serieDef: {stack: "A", showValue: "point,hit"}})
oGraph.SerieDef = {stack: "A", showValue: "point,hit"}
oGraph.SetSerieDef({stack: "A", showValue: "point,hit"})

null {null}, no default options are applied to new series (default)
{stack: "A", showValue: "point,hit"} {object}, indicates that each new series is added to stack “A”, each data value displays its value point, and the tooltip appears when the cursor hovers over the rectangular hit area of the data point (such as columns or bars).

The serieType field specifies the default representation of data for all series where the Serie.Type property is not explicitly defined. It determines how these series are rendered, such as line, bar, or scatter plot, ensuring consistent visualization across the chart. The Serie.Type property can override this default for individual series, allowing different chart types within the same graph. By default, serieType is set to "column" so series without a specified type are displayed as column charts.

The type can be one of the following:

• "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)
• "radarArea" {string}, a radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative, but various heuristics, such as algorithms that plot data as the maximal total area, can be applied to sort the variables (axes) into relative positions that reveal distinct correlations, trade-offs, and a multitude of other comparative measures. (data requires array of numbers, non-scrollable)
• "radarLine" {string}, similar with radarArea type. (data requires array of numbers, non-scrollable)
• "radarColumn" {string}, displays data in radial columns starting from one center point. The circle is divided into equal portions depending on the number of columns and each column group occupies one portion (similar with "radarArea" type, data requires array of numbers, non-scrollable)
• "pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-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)
• "polarArea" {string}, represents data points connected with straight line segments that enclose a filled area together with the chart pole (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
• "polarLine" {string}, represents data points connected with straight line segments (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
• "polarScatter" {string}, shows the serie as non-connected data points (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
• "scatter" {string}, a scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
• "scatterLine" {string}, a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
• "scatterArea" {string}, a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)

• "bubble" {string}, a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables.). Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. (data requires array of array of three-numbers, such as [[x, y, size]], supports vertical field, non-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, 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, close]], supports vertical field, scrollable)

The control can display multiple-series or charts within the same view while they are compatible. For instance "area" and "radarArea" are not compatible (they are not generating the same axes). Also, if a serie or chart is shown vertically (vertical field is true for one visible-serie), all series are being displayed vertically.

The serieType field is mapped to the SerieType property, which means that the following statements are equivalent:

oGraph.Options = {serieType: "line"}
oGraph.SetOptions({serieType: "line"})
oGraph.SerieType = "line"
oGraph.SetSerieType("line")

null {null}, shows the data as columns (by default)
"radarCol" {string}, displays data in radial columns starting from one center point. The circle is divided into equal portions depending on the number of columns and each column group occupies one portion  (similar with "radarArea" type, data requires array of numbers, non-scrollable)
"pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-scrollable)

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.

The series field is mapped to the Series property, which means that the following statements are equivalent:

oGraph.Options = {series: {data: {"meta": 200, "whatsup": 300}}}
oGraph.SetOptions({series: {data: {"meta": 200, "whatsup": 300}}})
oGraph.Series = {data: {"meta": 200, "whatsup": 300}}
oGraph.SetSeries({data: {"meta": 200, "whatsup": 300}})

{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 Serie.Shape property defines the shape of the data points of a serie. The Serie.ValuePointShape property defines the shape of the value points of a serie. The shapes field can be set to any CSS color string to show that color on the specified part, or to a JSON representation of the shape object to apply, or to the name of a shape defined within exontrol.Shapes.Graph or exontrol.Shapes objects (while it starts with lowercase or uppercase letter, respectively). The shapes field supports applying different shapes on different parts of the control. For instance, you can set shapes to "red(area),blue(bubble)" to show red color for area series and blue color for bubble series.

The format of the 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:

Part	Description	Additional
"area"	specifies the visual-appearance to show the "area" 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
"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)
"column"	specifies the visual-appearance to show the "column" serie-types
"cursorCategoryAxisTooltip"	defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit
"cursorLine"	defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area (showCursorCategoryLine or showCursorValueLine)
"cursorSerieTooltip"	defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series
"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)
"frameFit"	defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
"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
"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
"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
"line"	specifies the visual-appearance to show the "line" serie-types
"ohlc"	specifies the visual-appearance to show the "ohlc" 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)
"pie"	specifies the visual-appearance to show the "pie" serie-types
"polarArea"	specifies the visual-appearance to show the "polarArea" serie-types
"polarLine"	specifies the visual-appearance to show the "polarLine" 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
"radarArea"	specifies the visual-appearance to show the "radarArea" serie-types
"radarColumn"	specifies the visual-appearance to show the "radarColumn" serie-types
"radarLine"	specifies the visual-appearance to show the "radarLine" serie-types
"rangeArea"	specifies the visual-appearance to show the "rangeArea" serie-types
"rangeColumn"	specifies the visual-appearance to show the "rangeColumn" 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
"scatterArea"	specifies the visual-appearance to show the "scatterArea" serie-types
"scatterLine"	specifies the visual-appearance to show the "scatterLine" serie-types
"valueBack"	defines the visual-appearance to apply on the value's background
"valueLine"	defines the visual-appearance for value-lines (the guided line from the value-point to the value itself)	length {number}, indicates the horizontal distance between the middle and end points of the value-line
"valuePoint"	defines the visual-appearance for value-points	size {number}, specifies the size of the value-point frameColor, defines the color to show the object's frame patternColor, defines the color to show the object's pattern fillColor, defines the color to show the object's background fillGradientColor, defines the gradient type and colors to show the object's background. The fillColor attribute defines the starting color. The fillGradientColor attribute has effect only if the fillColor attribute is defined (not null or undefined). The ...Color attributes supports the following additional values: "null", indicates that the value-point uses the serie's value color "transparent", specifies that the value-point is not visible (transparent)
"waterFall"	specifies the visual-appearance to show the "waterFall" serie-types	lineSize {number}, defines size of to draw the lines between columns
"select-overview"	defines the visual-appearance to display the overview-selection
"select-overview-resize"	defines the visual-appearance to display left/right resize-margins of the overview-selection
"selectout-overview"	defines the visual-appearance to display the left/right parts outside of the overview-selection

The shapes field is mapped to the Shapes property, which means that the following statements are equivalent:

oGraph.Options = {shapes: "red(area),blue(line)"}
oGraph.SetOptions({shapes: "red(area),blue(line)"})
oGraph.Shapes = "red(area),blue(line)"
oGraph.SetShapes("red(area),blue(line)")

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. Setting the smooth field to 0 means that no smooth changes are performed once the control goes from a layout to another. Setting the smooth field to 125 means that a smooth-transition is performed from a layout to another for 125 ms. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.

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 order of the series in the sort field determines the priority of the sorting (the first serie has higher priority than the second one, and so on). The sort field can be set to null to indicate that no sorting is applied, or to a string expression that specifies the series to sort and their sorting order. The sorting order can be ascending (A) or descending (D), with ascending being the default if not specified. The format of each element in the sort field allows you to specify the series by name or index, and optionally include an inner index for multi-dimensional arrays, along with the sorting direction.

The format of a particular element of the sort field is:

"SERIE[\[INNER\]][:([A]|D)]"

where:

• SERIE is the name or the index of the serie to sort
• INNER is the inner-index of the value to sort (valid for multi-dimensional array only)
• A stands for ascending (by default)
• D stands for descending

The sort field is mapped to the Sort property, which means that the following statements are equivalent:

oGraph.Options = {sort: "0 1:D"}
oGraph.SetOptions({sort: "0 1:D"})
oGraph.Sort = "0 1:D"
oGraph.SetSort("0 1:D")

"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}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

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.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oGraph.Options = {tfi: "b monospace 16 <fg blue>"}
oGraph.SetOptions({tfi: "b monospace 16 <fg blue>"})
oGraph.Tfi = "b monospace 16 <fg blue>"
oGraph.SetTfi("b monospace 16 <fg blue>")

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 the amount of time the mouse pointer must hover over an object before the tool tip is displayed. Adjusting this value allows you to control how quickly tool tips appear, improving usability and user experience. Setting the property to 0 will cause tool tips to appear immediately when the mouse pointer hovers over an object, while setting it to a higher value (e.g., 128) will introduce a delay before the tool tip is shown, allowing users to avoid accidental tool tip pop-ups when quickly moving the mouse across the control.

The toolTipDelay field is mapped to the ToolTipDelay property, which means that the following statements are equivalent:

oGraph.Options = {toolTipDelay: 128}
oGraph.SetOptions({toolTipDelay: 128})
oGraph.ToolTipDelay = 128
oGraph.SetToolTipDelay(128)

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 Serie.ShowValue property specifies whether the chart shows the value-points of the chart. If the ShowValue property includes exPoint flag, the tooltip is shown while the cursor hovers value-points of the chart. The toolTipFormat field can be set to null to indicate that the default tooltip format is used, or to a string expression to define a custom format for the tooltip.

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

• "value", {number} specifies the data point value
• "name", {string} defines the name of the serie as specified by Name property
• "user", {any} specifies the extra data associated with the serie as specified by UserData property (@since 4.8)
• "index", {number} indicates the index of the category that contains the current value (@since 4.8)
• "category", {string} specifies the category the current value is in (available only if applicable)
• "percent", {number} indicates the percent of the item, as a number between 0 and 100 (available only if applicable)
• "inner", {number} indicates the inner index of the value within the point data. For example, 0 represents the 'open' or 'from' value, 1 represents the 'high' or 'to' value, 2 represents the 'low' value, and 3 represents the 'close' value. This property is defined only for charts that require multi-dimensional arrays, such as candlestick chart types. (available only if applicable)
• "%V0", "%V1", "%V2" or "%V3", {number} retrieve the designated values by referencing %V0 for the open value (for candlestick charts or "from" in column range charts), %V1 for the high value (for candlestick charts or "to" in column range charts), %V2 for the low value (for candlestick charts), and %V3 for the close value (for candlestick charts, defaulting to "value" if unavailable)

The toolTipFormat field is mapped to the ToolTipFormat property, which means that the following statements are equivalent:

oGraph.Options = {toolTipFormat: "(name ? name + ': ' : '') + value"}
oGraph.SetOptions({toolTipFormat: "(name ? name + ': ' : '') + value"})
oGraph.ToolTipFormat = "(name ? name + ': ' : '') + value"
oGraph.SetToolTipFormat("(name ? name + ': ' : '') + 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. Adjusting this value allows you to control how long tool tips stay visible, improving usability and user experience. Setting the property to 0 will cause tool tips to disappear immediately when the mouse pointer stops moving, while setting it to a higher value (e.g., 5000) will allow tool tips to remain visible for a longer period of time, giving users more time to read the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipWidth field indicates the max-width of the control's tooltip (in pixels).

The toolTipPopDelay field is mapped to the ToolTipPopDelay property, which means that the following statements are equivalent:

oGraph.Options = {toolTipPopDelay: 5000}
oGraph.SetOptions({toolTipPopDelay: 5000})
oGraph.ToolTipPopDelay = 5000
oGraph.SetToolTipPopDelay(5000)

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). Adjusting this value allows you to control the width of tool tips, improving readability and user experience. Setting the property to 0 will cause tool tips to have no maximum width, allowing them to expand as needed to fit their content, while setting it to a specific value (e.g., 300) will limit the width of tool tips, causing longer content to wrap within the specified width, making it easier for users to read and understand the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.

The toolTipWidth field is mapped to the ToolTipWidth property, which means that the following statements are equivalent:

oGraph.Options = {toolTipWidth: 300}
oGraph.SetOptions({toolTipWidth: 300})
oGraph.ToolTipWidth = 300
oGraph.SetToolTipWidth(300)

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). Unreferenced value axes display the data using the default value axis. The Axis property of the Serie object specifies the name of the value axis to use. The value axis is vertical (oY) for horizontal charts and horizontal (oX) for vertical charts. The Serie.Vertical property specifies whether the chart is displayed vertically or horizontally. For xy-compatible chart types ("scatter", "scatterLine", or "bubble"), the xAxis and yAxis fields define the configuration options for the x and y axes, and the valueAxis field is ignored. The valueAxis field can be set to null to indicate that the chart uses a single default value axis, or to an object or an array of ValueAxisOptions to define one or more value axes with custom configurations.

The valueAxis field is mapped to the ValueAxis property, which means that the following statements are equivalent:

oGraph.Options = {valueAxis: {tfi: ""}}
oGraph.SetOptions({valueAxis: {tfi: ""}})
oGraph.ValueAxis = {tfi: ""}
oGraph.SetValueAxis({tfi: ""})

null {null}, the chart displays and uses a single value-axis
{tfi: "<fgColor 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 of a column or bar in the chart, representing width for horizontal charts or height for vertical charts. It does not apply to chart types such as "radarArea", "radarLine", "radarColumn", "polarArea", "polarLine", "polarScatter", or "pie", where element sizing is determined by the layout. The autoFit field determines whether the control automatically resizes series elements to fit the available space. If autoFit is true, elements are adjusted to prevent overlap and ensure readability. If false, elements retain their original size, which may cause overlap or truncation when data values are large or there are many series.

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)

The valueSize field is mapped to the ValueSize property, which means that the following statements are equivalent:

oGraph.Options = {valueSize: 4}
oGraph.SetOptions({valueSize: 4})
oGraph.ValueSize = 4
oGraph.SetValueSize(4)

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

The wheelChange field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oGraph.Options = {wheelChange: 5}
oGraph.SetOptions({wheelChange: 5})
oGraph.WheelChange = 5
oGraph.SetWheelChange(5)

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"). The yAxis field defines the configuration-options for y-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble"). For xy-compatible chart types, the xAxis and yAxis fields define the configuration options for the x and y axes, while the valueAxis and categoryAxis fields are ignored. The xAxis and yAxis fields can be set to null to indicate that the chart uses default axes, or to an object of ValueAxisOptions type to define custom configurations for the respective axis.

The xAxis field is mapped to the XAxis property, which means that the following statements are equivalent:

oGraph.Options = {xAxis: {tfi: ""}}
oGraph.SetOptions({xAxis: {tfi: ""}})
oGraph.XAxis = {tfi: ""}
oGraph.SetXAxis({tfi: ""})

null {null}, the chart displays the default x-axis
{tfi: "<fgColor 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"). For xy-compatible chart types, the xAxis and yAxis fields define the configuration options for the x and y axes, while the valueAxis and categoryAxis fields are ignored. The yAxis field can be set to null to indicate that the chart uses a default y-axis, or to an object of ValueAxisOptions type to define custom configurations for the y-axis.

The yAxis field is mapped to the YAxis property, which means that the following statements are equivalent:

oGraph.Options = {yAxis: {tfi: ""}}
oGraph.SetOptions({yAxis: {tfi: ""}})
oGraph.YAxis = {tfi: ""}
oGraph.SetYAxis({tfi: ""})

null {null}, the chart displays the default y-axis
{tfi: "<fgColor 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%). The scrollBars field defines the scroll bars to show when the control's content is zoomed in. Setting zoom to null or 100 means that the control is in normal view (100%), while setting it to a value greater than 100 means that the control's content is magnified by that percentage.

The zoom field is mapped to the Zoom property, which means that the following statements are equivalent:

oGraph.Options = {zoom: 150}
oGraph.SetOptions({zoom: 150})
oGraph.Zoom = 150
oGraph.SetZoom(150)

null {null}, specifies normal-view (100%)
150 {number}, indicates that the control's content is magnified 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). The zoomLevels field can be set to null to indicate that the control's content is allowed to zoom in any level between 10 (10%) and 1000 (1000%), or to a string of comma-separated values to specify the allowed zoom levels.

The zoomLevels field is mapped to the ZoomLevels property, which means that the following statements are equivalent:

oGraph.Options = {zoomLevels: "50,100,200,350"}
oGraph.SetOptions({zoomLevels: "50,100,200,350"})
oGraph.ZoomLevels = "50,100,200,350"
oGraph.SetZoomLevels("50,100,200,350")

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%