OverviewOptions class (Graph)

The dock field specifies the edge of the container the overview-window is anchored to. The overview map is shown from top to bottom when the overview window is docked to the left or right side of the view. By default, the overview is anchored to the top-side of the view (dock is null). Setting the dock field to "left", "right", "top" or "bottom" anchors the overview to the corresponding side of the view.

null {null}, by default, the overview is anchored to the top-side of the view
"bottom" {string} or exontrol.Graph.PanelDockEnum.exBottom or 2 {number}, the overview is docked to the bottom side of the control

The line field defines the configuration options for displaying the lines of values in the overview. The overview displays the map of the entire series without a scroll bar, providing a visual representation of the data across the entire range. By default, the overview lines are displayed as solid 1-pixel wide lines with the color of the corresponding series (line is null). Setting the line field to a specific LineOptions object allows you to customize the appearance of the overview lines, such as changing their color, width, and style, enhancing the visual representation of the data within the overview map. The line options specified in this field apply to all lines in the overview unless overridden by specific line options defined for individual series within the serie field.

null {null}, indicates a solid 1-pixel wide overview-line (the color of line is indicated by the color of the serie)
{color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide overview-line

The serie field specifies a serie or multiple series separated by commas to be represented within the overview-map. The overview displays the map of the entire series without a scroll bar, providing a visual representation of the data across the entire range. By default, no series is specified to be represented in the overview (serie is null). Setting the serie field to a specific serie index or multiple series indices allows you to control which series are visually represented within the overview map, enabling you to focus on specific data sets and enhance the overall user experience when interacting with the chart.

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

"SERIE[\[INNER\]][:[COLOR][-fill [FILLCOLOR]]]"

where:

• SERIE indicates the index of the serie
• INNER [optional], specifies inner-index (for multi-dimensional series)
• COLOR [optional], specifies color to show the overview-line (if missing, the color to show the serie is used instead)
• -fill: [optional], indicates the serie is filled
• FILLCOLOR [optional], color to fill the overview-curve (if missing, the color to show the serie is used instead)

Multiple series can be represented by separating entries with commas.

The overview map is shown only for area-compatible chart types (area, line, column, waterfall, rangeArea, rangeColumn, candleStick, ohlc). If a specified serie is not compatible with area-chart types, it is ignored.

Format BNF:

   <overview-property> ::= <serie-entry> ["," <serie-entry>]*
   <serie-entry>       ::= <serie-index> [ "[" <dimension-index> "]" ] [ ":" <line-color> [ <fill> ] ] [ <fill-color> ]
   <serie-index>       ::= <number>
   <dimension-index>   ::= <number>
   <line-color>        ::= <color-spec>
   <fill>              ::= "-fill"
   <fill-color>        ::= <color-spec>
   <color-spec>        ::= see notes

Notes:

• 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.
• Any comma inside a color value must be escaped twice as \\, e.g., rgba(0\\,0\\,255\\,0.5)
• Alpha values: 0–1 for RGBA/HSLA; 00–FF for hex-alpha
• The <serie-index> and <dimension-index> values are zero-based indices

null {null}, the overview map displays the first serie by default, as long as it is valid and compatible with area-chart types
"0,1" {string}, indicates that first two series are represented within the overview.
"0:black,0[1]:red,0[2]:blue,0[3]:green" {string}, shows four overview-lines for the first, second, third and forth-dimension of the same serie (the first serie with the index 0)
"2:-fill,0" {string}, the overview shows the first and third series (the third serie is filled)
"0:black-fill rgba(0\\,0\\,0\\,0.25)" {string}, shows the first serie filled with a semi-transparent color and contoured in black

The size field specifies the size of the control's overview. The overview displays the map of the entire series without a scroll bar, providing a visual representation of the data across the entire range. By default, the overview's size is 64-pixels. Setting the size field to a specific value allows you to adjust the dimensions of the overview display, ensuring it fits appropriately within the layout of your chart and provides an optimal viewing experience for users. The size of the overview is determined based on the docking position of the overview window. If the overview is anchored to the top or bottom side of the view, the size field specifies the height of the overview. If the overview is anchored to the left or right side of the view, the size field specifies the width of the overview.

null {null}, by default, the overview's size is 64-pixels
32 {number}, sets the overview's size to 32-pixels tall (if anchored to the top or bottom side)

The visible field shows or hides the overview. The overview-window is visible only for area-compatible chart types. The overview displays the map of the entire series without a scroll bar, providing a visual representation of the data across the entire range. By default, the overview is hidden (visible is null). Setting the visible field to true shows the overview, while setting it to false hides it from view.

null {null}, by default, the overview is hidden
true {boolean}, shows the overview (the overview displays the map of the entire series without a scroll bar)