preview

[ root » graph » preview ]

Preview charts are a miniaturized version of the main chart, allowing users to zoom in and examine sections of a chart while still viewing it in its entirety. Use the "preview" object to style the object, active area, background area, and preview chart handles. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

Note: Make sure the "zooming" attribute is set to true in the "scale-x" and/or "scale-y" object(s). You can also specify the starting and ending values that the chart will zoom to by default with the "zoom-to" or "zoom-to-values" array.

AttributeTypeInfo

active

Object

Sets the styling for the active area of the preview chart.

{...}

adjust-layout adjustLayout

Boolean

Forces the plotarea to consider the preview object positioning and prevent overlapping with it.

true | false | 1 | 0

alpha

Numeric

Sets the transparency level of the object. Values must range between 0.0 and 1.0, with 0.0 being completely transparent and 1.0 being completely opaque. Note that values require the leading 0 before the decimal point.

0.3 | 0.4 | 0.9 | ...

background-color backgroundColor

String

Sets the background color of the object. Colors can be entered by name (e.g., "purple", "blue"), hexadecimal notation (e.g., "#666699", #33ccff"), or RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)").

"none" | "transparent" | "purple" | "#33ccff" | "rgb(100, 15, 15)" | ...

border-color borderColor

String

Sets the border color of the object.

"none" | "transparent" | "purple" | "#33ccff" | ...

border-width borderWidth

Mixed

Sets the border width of the object.

4 | "6px" | ...

handle

Object

Sets the styling of the preview chart's handles.

{...}

handle-bottom handleBottom

Object

Sets the styling of the preview chart's bottom handle.

{...}

handle-left handleLeft

Object

Sets the styling of the preview chart's left handle.

{...}

handle-right handleRight

Object

Sets the styling of the preview chart's right handle.

{...}

handle-top handleTop

Object

Sets the styling of the preview chart's top handle.

{...}

height

Mixed

Sets the object's height.

10 | "20px" | 0.3 | "30%" | ...

live

Boolean

Sets whether the chart is updated when the preview active area is being moved. Default is false for classic theme and true for light/dark themes. The graph will update only when a the mouse is released.

true | false | 1 | 0

margin

Mixed

Sets the object's margins.

10 | "5px" | "10 20" | "5px 10px 15px 20px" | ...

mask

Object

Sets the styling for the preview chart's background area (mask).

{...}

min-distance minDistance

Numeric

Sets the minimum width of preview's active area.

5 | 10 | ...

position

String

Sets the object's position relative to its container. Similar results can be obtained by setting marginand margin-... attributes.

preserve-zoom preserveZoom

Boolean

Sets whether the zoom level is preserved when a chart is altered or reloaded.

true | false | 1 | 0

width

Mixed

Sets the object's width.

10 | "20px" | 0.3 | "30%" | ...

x

Mixed

Sets the "x" position of the object.

10 | "20px" | 0.3 | "30%" | ...

y

Mixed

Sets the "y" position of the object.

10 | "20px" | 0.3 | "30%" | ...