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

Displays a title across the top of the chart. Refer to our Chart Title Tutorial for more information.

Attribute Type Info
adjust-layout
adjustLayout
Boolean

Forces the plotarea to consider the title positioning and prevent overlapping with it.

true | false | 1 | 0

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.

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

background-color-1
backgroundColor1
String

Sets the first color of a 2 color background gradient of the object.

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

background-color-2
backgroundColor2
String

Sets the second color of a 2 color background gradient of the object.

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

background-fit
backgroundFit
String

Sets the direction/s on which the background image is being "stretched".

"x" | "y" | "xy"

background-image
backgroundImage
String

Sets a background image for the object. Value can be a local file or a web image's location.

"image.png" | ...

background-position
backgroundPosition
String

Sets the position of the background when the background-repeat value is no-repeat.

"0 0" | "50 100" | "80% 60%" | ...

background-repeat
backgroundRepeat
String

Sets the repeating mode for the background image.

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"

bold Boolean

Sets whether the text is displayed with bold characters or not in the title.

true | false | 1 | 0

border-bottom
borderBottom
String

Sets the object's bottom border style. Defaults to black when color is not set properly.

"2px solid #f00" | ...

border-color
borderColor
String

Sets the border color of the object, applicable on closed shapes. Requires border width. See also line-color for closed shapes.

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

border-left
borderLeft
String

Sets the object's left border style. Operates like border-bottom.

"2px solid #f00" | ...

border-radius
borderRadius
Mixed

Sets the object's border radius, for rounded corners. The higher the value, the more rounded the corners appear.

4 | "6px" | "6px 10px 3px 5px" | "-10px" | ...

border-radius-bottom-left
borderRadiusBottomLeft
Mixed

Sets the object's bottom-left border radius, for rounded corners.

4 | "6px" | "-6px" | -4 | ...

border-radius-bottom-right
borderRadiusBottomRight
Mixed

Sets the object's bottom-right border radius, for rounded corners.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-left
borderRadiusTopLeft
Mixed

Sets the object's top-left border radius, for rounded corners.

4 | "6px" | "-6px" | -4 | ...

border-radius-top-right
borderRadiusTopRight
Mixed

Sets the object's top-right border radius, for rounded corners.

4 | "6px" | "-6px" | -4 | ...

border-right
borderRight
String

Sets the object's right border style. Operates like border-bottom.

"2px solid #f00" | ...

border-top
borderTop
String

Sets the object's top border style. Operates like border-bottom.

"2px solid #f00" | ...

border-width
borderWidth
Mixed

Sets the border width of the object, applicable on closed shapes. See also line-width for closed shapes. If no border-color is set, will display in black..

4 | "6px" | ...

callout Boolean

Sets if the object will have a callout arrow.

true | false | 1 | 0

callout-extension
calloutExtension
Mixed

Sets the length for extension line off the tip of the callout arrow. Requires border-width.

4 | "6px" | ...

callout-height
calloutHeight
Mixed

Sets the height of the object's callout arrow.

4 | "6px" | ...

callout-hook
calloutHook
Array

Sets a location for the point of the tip of the callout arrow. Uses XY coordinates.

[200, 50] | ...

callout-offset
calloutOffset
Mixed

Sets the offset for the origin of the callout arrow. Uses positive or negative values to move the arrow right/left/up/down.

4 | "6px" | ...

callout-position
calloutPosition
String

Sets which edge will be the location for the object's callout arrow.

"top" | "right" | "bottom" | "left"

callout-width
calloutWidth
Mixed

Sets the width of the object's callout arrow.

4 | "6px" | ...

clip-text
clipText
Boolean

 

true | false | 1 | 0

color String

Sets the text's color in the title.

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

fill-angle
fillAngle
Numeric

Sets the angle of the axis along which the linear gradient is drawn.

-45 | 115 | ...

fill-offset-x
fillOffsetX
Mixed

Sets an X offset to apply to the fill.

4 | "6px" | ...

fill-offset-y
fillOffsetY
Mixed

Sets an Y offset to apply to the fill.

4 | "6px" | ...

fill-type
fillType
String

Sets the background gradient fill type to either linear or radial.

"linear" | "radial"

font-angle
fontAngle
Numeric

Sets the rotation angle of the title. Similar with angle.

-45 | 115 | ...

font-color
fontColor
String

Sets the text's color of the title. Similar with color.

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

font-family
fontFamily
String

Sets the text's font family of the title.

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

font-size
fontSize
Mixed

Sets the text's font size of the title.

4 | "6px" | ...

font-style
fontStyle
String

Sets the text's font style of the title. Similar with italic.

"none" | "italic" | "oblique"

font-weight
fontWeight
String

Sets the text's font weight of the title. Similar with bold.

"normal" | "bold"

gradient-colors
gradientColors
String

Sets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with gradient-stops.

"#f00 #0f0 #00f" | ...

gradient-stops
gradientStops
String

Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with gradient-colors.

"0.1 0.5 0.9" | ...

height Mixed

Sets the object's height.

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

italic Boolean

Sets whether the text of the title is displayed with italic characters or not. Similar with font-weight.

true | false | 1 | 0

item String

Sets the item id of the map on which the object/shape is being added.

"itemid" | ...

map String

Sets the map id of the map on which the object/shape is being added.

"mapid" | ...

margin Mixed

Sets the object's margin/s.

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

margin-bottom
marginBottom
Mixed

Sets the object's bottom margin.

4 | "6px" | ...

margin-left
marginLeft
Mixed

Sets the object's left margin.

4 | "6px" | ...

margin-right
marginRight
Mixed

Sets the object's right margin.

4 | "6px" | ...

margin-top
marginTop
Mixed

Sets the object's top margin.

4 | "6px" | ...

max-chars
maxChars
Numeric

Sets the maximum number of characters displayed by the text label of the title. If value is smaller than the length of the text, the original text will be trimmed and '...' will be appended at the end.

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 object's bottom padding around the text of the title.

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

padding-bottom
paddingBottom
Mixed

Sets the object's bottom padding around the text of the title.

4 | "6px" | ...

padding-left
paddingLeft
Mixed

Sets the object's left padding around the text of the title. padding-left here may push the text out of the containing legend if the number is big enough.

4 | "6px" | ...

padding-right
paddingRight
Mixed

Sets the object's right padding around the text of the title. padding-right here will not push the text out of the containing legend.

4 | "6px" | ...

padding-top
paddingTop
Mixed

Sets the object's top padding around the text of the title.

4 | "6px" | ...

position String

Sets the object's position relative to it's container. Similar results can be obtained by setting margin and margin-... attributes.

rtl (right-to-left) Boolean

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

true | false | 1 | 0

shadow Boolean

Sets whether the object's shadow is visible or not.

Has limited effect on HTML5 implementation.

true | false | 1 | 0

shadow-alpha
shadowAlpha
Numeric

Sets the transparency of the shadow 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 | ...

shadow-angle
shadowAngle
Numeric

Sets the angle of the shadow underneath the object.

-45 | 115 | ...

shadow-blur
shadowBlur
Mixed

Sets the blur effect size for the shadow of the object.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color
shadowColor
String

Sets the color of the shadow of the object.

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

shadow-distance
shadowDistance
Mixed

Sets the distance between the shadow and the object.

4 | "6px" | ...

text String

Sets the text content of the title.

"Some Text" | ...

text-align
textAlign
String

Sets the text's horizontal alignment relative to the box of the text.

"left" | "center" | "right"

text-alpha
textAlpha
Numeric

Sets the text's transparency of the title.

0.3 | 0.9 | ...

text-decoration
textDecoration
String

Sets the text's decoration of the title. Similar with underline.

"none" | "underline"

underline Boolean

Sets whether the text of the title is displayed with underlined characters or not.

true | false | 1 | 0

vertical-align
verticalAlign
String

Sets the text's vertical alignment relative to the object's box of the title.

"top" | "middle" | "bottom"

visible Boolean

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON.

true | false | 1 | 0

width Mixed

Sets the object's width.

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.

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

y Mixed

Sets the Y position of the object.

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

z-index
zIndex
Numeric

Sets the z position of the object. Objects with higher z indexes will appear "above" those with lower z index values.

5 | 10 | ...

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