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

Use the button object to create a context menu button for your chart. You must add a visible attribute set to true for the button to appear. Refer to the Context Menu Tutorial for more information.

Note: If you are creating charts that will be primarily viewed on mobile devices, we recommend using the ZingChart mobile charts plugin. The plugin allows for the utilization of touch gestures and includes a mobile context menu.

Attribute Type Info
alpha Numeric

Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

background-color
backgroundColor
String

Sets the background color of the object. A single color will create a solid background, while two colors will create a gradient.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

border-width
borderWidth
Mixed

Sets the width of the object's border.

4 | "6px" | ...

font-color
fontColor
String

Sets the object's font color. Similar to color.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

font-family
fontFamily
String

Sets the object's font family.

"Arial" | "Tahoma,Verdana" | ...

font-size
fontSize
Mixed

Sets the object's font size.

4 | "6px" | ...

font-style
fontStyle
String

Sets the object's font style. Similar to italic.

"none" | "italic" | "oblique"

font-weight
fontWeight
String

Sets the object's font weight. Similar to bold.

"normal" | "bold"

height Mixed

Sets the object's height.

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

max-chars
maxChars
Numeric

Sets the maximum numbers of characters displayed in the object. The value determines how many characters will be displayed before the text is cut and appended with "..."

5 | 10 | ...

max-width
maxWidth
Mixed

Sets the maximum width of the text box. If text is longer than the max-width value, it will overlap the box or will wrap if wrap-text is set to true.

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

offset-x
offsetX
Mixed

Sets an X offset to apply when positioning the object/shape.

4 | "6px" | ...

offset-y
offsetY
Mixed

Sets a Y offset to apply when positioning the object/shape.

4 | "6px" | ...

padding Mixed

Sets the padding around the object's text. Up to four values can be used to set the padding around the text, with the first value being the top padding, the second value being the right padding, the third value being the bottom padding, and the fourth value being the left padding.

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

padding-bottom
paddingBottom
Mixed

Sets the bottom padding for the object's text.

4 | "6px" | ...

padding-left
paddingLeft
Mixed

Sets the left padding for the object's text.

4 | "6px" | ...

padding-right
paddingRight
Mixed

Sets the right padding for the object's text.

4 | "6px" | ...

padding-top
paddingTop
Mixed

Sets the top padding for the object's text.

4 | "6px" | ...

rtl (right-to-left) Boolean

Renders text right-to-left. Default value is false.

true | false | 1 | 0

text String

Sets the text content of the object.

"Some Text" | ...

text-align
textAlign
String

Sets the horizontal alignment for the object's text. Horizontal alignment can be left, center, or right.

"left" | "center" | "right"

text-alpha
textAlpha
Numeric

Sets the transparency of the object's text. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

text-decoration
textDecoration
String

Sets the text's decoration to use underlined characters. Similar to underline.

May not display properly in Mozilla Firefox when charts are rendered using SVG.

"none" | "underline"

visible Boolean

Sets whether the context-menu button is visible or not.

true | false | 1 | 0

width Mixed

Sets the width of the object.

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

wrap-text
wrapText
Boolean

Sets whether the text will wrap, depending on the width of the object.

true | false | 1 | 0

x Mixed

Sets the X position of the object. The context-menu gear object must be positioned separately.

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

y Mixed

Sets the Y position of the object. The context-menu gear object must be positioned separately.

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

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