[ root » graph » zoom ]

Chart zooming is an interactive chart feature that allows users to select a zoom area by clicking and dragging. Use the "zoom" object to style the zoom area, add zooming labels, turn on shared zooming, and more. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

Note: Make sure the "zooming" attribute is set to true in the applicable "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.




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


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


Sets the border color of the object.

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

border-width borderWidth


Sets the border width of the object.

1 | 3 | | "6px" | ...



To create zooming labels. In the "label" object, add a "visible" attribute and set the value to true.


preserve-zoom preserveZoom


API charts only: Sets whether the zoom level is preserved on chart data alteration or reloads.

true | false | 1 | 0



Sets whether simultaneous chart zooming is applied to two or more charts in a graphset. Refer to the Shared Interactions Tutorial for more information.

true | false | 1 | 0