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 contextMenu object to customize the context menu, which appears when users right-click on an area of the chart. You can style the menu, create custom chart context menu items, and add a context menu button so that users on mobile devices can access the menu by tapping on the button. Refer to the Context Menu Tutorial for more information.

Attribute Type Info
button Object

Sets the styling for the context-menu button that will appear when a chart is viewed on mobile devices.

{...}

custom-items
customItems
Array

Sets a collection of custom-menu items on the context menu. Right click the chart in the demo and take notice of the "Run My JavaScript" button at the bottom of the context-menu.

[...]

docked Boolean

To fix the position of the context menu to one side of the chart.

true | false

empty Boolean

Empties all default context-menu items, leaving just the "About ZingChart" button.

true | false | 1 | 0

gear Object

Sets the styling for the gear icon that appears by default in the context-menu button on mobile devices.

{...}

item Object

Sets the styling for the context-menu items.

{...}

position String

To position the context menu button on the left or right side of the chart.

left | right

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