JSON Configuration

{
  "globals": {},
  "gui": {
    "behaviors": [{}],
    "context-menu": {
      "button": {},
      "custom-items": [{}],
      "gear": {},
      "item": {}
    }
  },
  "graphset": [{
    "3d-aspect": {},
    "arrows": [{
      "from": {},
      "to": {}
    }],
    "crosshair-x": {
      "marker": {},
      "plot-label": {},
      "scale-label": {}
    },
    "crosshair-y": {
      "scale-label": {}
    },
    "csv": {},
    "images": [{}],
    "labels": [{
      "callout-tip": {}
    }],
    "legend": {
      "footer": {},
      "header": {},
      "icon": {},
      "item": {},
      "item-off": {},
      "marker": {},
      "page-off": {},
      "page-on": {},
      "page-status": {},
      "scroll": {
        "bar": {},
        "handle": {}
      },
      "tooltip": {}
    },
    "media-rules": [{}],
    "no-data": {},
    "options": {
      "context-menu": {
        "button": {},
        "items": {}
      },
      "indicator": {
        "npv": {},
        "title": {},
        "value": {}
      },
      "style": {
        "hover-state": {},
        "tooltip": {}
      },
      "words": []
    },
    "plot": {
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {
        "hover-state": {}
      },
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": [{}],
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {
        "connector": {},
        "joined": {},
        "shared": {}
      }
    },
    "plotarea": {},
    "preview": {
      "active": {},
      "handle": {},
      "handle-bottom": {},
      "handle-left": {},
      "handle-right": {},
      "handle-top": {},
      "mask": {}
    },
    "scale": {},
    "scale-k": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-r": {
      "center": {},
      "guide": {},
      "item": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ring": {
        "items": [{}]
      },
      "tick": {}
    },
    "scale-v": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "ref-line": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-x": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {
        "guide": {},
        "item": {}
      }
    },
    "scale-y": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {}
    },
    "scroll-x": {
      "bar": {},
      "handle": {}
    },
    "scroll-y": {
      "bar": {},
      "handle": {}
    },
    "series": [{
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {},
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": {},
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {},
      "values": []
    }],
    "shapes": [{
      "label": {}
    }],
    "source": {},
    "subtitle": {},
    "title": {},
    "tooltip": {},
    "widgets": [],
    "zoom": {
      "label": {}
    }
  }],
  "history": {
    "item": {},
    "item-off": {}
  },
  "refresh": {
    "curtain": {}
  }
}

 Back to Docs  Back to JSON Attributes Tree

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.

Attribute Type Info
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 margin and 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%" | ...

Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON