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

options

[ root » graph » options ]

The "options" object is used by the following, as well as other chart types (documentation forthcoming):

  • Word Clouds
  • Mobile Charts Plugin

Word Clouds Only:

Use the "options" object to customize your word cloud. Refer to the Word Cloud Tutorial for more information.

Attribute Type Info
aspect String

To set the layout of the word cloud.

"spiral" | "flow-center" | "flow-top"

ignore Array

To define words to be excluded from the word cloud, e.g., "and" or "the".

[...]

color String

When the "color-type" attribute is set to "color", use this attribute to set the color of the text in the word cloud.

"red" | "#3F51B5" | ...

color-type
colorType
String

To set the type of color arrangement applied to the word cloud. Use the "color" value with the "color" attribute. Use the "palette" value with the "palette" array.

"random" (default) | "color" | "palette"

max-font-size
maxFontSize
Number

To set the maximum font size.

20 | "30px" | ...

max-items
maxItems
Number

To set the maximum number of items displayed in the word cloud.

100 | 30 | ...

min-font-size
minFontSize
Number

To set the minimum font size.

10 | "12px" | ...

min-length
minLength
Number

To set the minimum length of the words displayed in the word cloud.

3 | 5 | ...

palette Array

When the "color-type" attribute is set to "palette", use this attribute to set the color palette of the word cloud.

[...]

rotate Boolean

To set whether every one or two words rotates 90 degrees.

true | false (default)

step-angle
stepAngle
Number

To control the step metering. Use this with the "step-radius" attribute.

45 | 90 | ...

step-radius
stepRadius
Number

To control the step metering. Use this with the "step-angle" attribute.

30 | 50 | ...

style Object

Use this object to set the styling of the word cloud.

{...}

text String

To provide the data for the word cloud. (Alternatively, data can be provided through a "words" array.)

"text data..." | ...

token String

To set the type of item to be analyzed: words or characters.

"word" (default) | "character"

words Array

Use this array to provide the data by individual word and associated word count. (Alternatively, data can be provided through a "text" attribute.

[...]

Mobile Charts Plugin Only:

Use the "options" object to customize your mobile chart settings. You can customize the context menu, x/y-axis crosshairs and zooming scrollbar, and/or the pie/donut chart indicator. Refer to the Mobile Charts Tutorial for more information.

options: {
  mobile: true,
  disableScrolling: true,
  contextMenu: { //Mobile Context Menu
    visible: true,
    button: {
      open: {
        lineColor: 'gray'
      },
      close: {
        lineColor: 'white'
      }
    },
    items: {
      image: true, //Save Image
      share: true, //Share Image
      lock: true, //Lock/Unlock Scrolling
      share: {
        email: true,
        facebook: true,
        twitter: true,
        linkedin: true
      },
      fontColor: 'white'
    }
  },
  indicator: { //Pie/Donut Only: Mobile Indicator
    visible: true,
    title: {
      visible: true
    },
    npv: {
      visible: true,
      decimals: 2
    },
    value: {
      visible: true
    }
  }
}
Attribute Type Info
contextMenu Object

Mobile Charts only: To customize the mobile context menu. Refer to the Mobile Charts Tutorial for more information.

{...}

disableScrolling Boolean

Mobile Charts only: To enable or disable mobile scrolling. Mobile scrolling is disabled (true) by default. Refer to the Mobile Charts Tutorial for more information.

true | false

indicator Object

Mobile Charts only: To customize the mobile indicator on pie and donut charts. Refer to the Mobile Charts Tutorial for more information.

{...}

mobile Boolean

Mobile Charts only: To enable or disable mobile charting. Mobile charting is enabled (true) by default on all charts on a webpage where the mobile charts plugin is included. Refer to the Mobile Charts Tutorial for more information.

true | false

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