ZingChart Logo
Main Menu

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

To style the legend item inside the legend. Refer to the Legends Tutorial for more information.

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. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

0.3 | 0.9 | ...

angle Numeric

Sets the rotation angle of the object/shape. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

-45 | 115 | ...

background-color
backgroundColor
String

Sets the background color of the object. Colors can be entered by name (e.g. "red", "blue", "yellow"), in hexadecimal notation (e.g. "#FF0000", "#0000FF", "#FFFF00"), or in RGB notation (e.g. "rgb(255,0,0)", "rgb(0,0,255)", "rgb(255,255,0)"). Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"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. To be used with background-color-2. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"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. To be used with background-color-1. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"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". Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"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. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"image.png" | ...

background-position
backgroundPosition
String

Sets the position of the background when the background-repeat value is no-repeat. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

background-repeat
backgroundRepeat
String

Sets the repeating mode for the background image. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

bold Boolean

Sets whether the text is displayed with bold characters or not. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

true | false | 1 | 0

border-bottom
borderBottom
String

Sets the object's bottom border style. Accepts solid, dashed, and dotted styles. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"2px solid #f00" | ...

border-color
borderColor
String

Sets the border color of the object. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-left
borderLeft
String

Sets the object's left border style. Accepts solid, dashed, and dotted styles. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"2px solid #f00" | ...

border-radius
borderRadius
Mixed

Sets the object's border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A single value will affect all 4 corners, while multiple values will have separate effects on each corner, with the first value affecting the top-left corner, the second value affecting the top-right corner, and so on, in a clockwise direction. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-radius-bottom-left
borderRadiusBottomLeft
Mixed

Sets the object's bottom-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-radius-bottom-right
borderRadiusBottomRight
Mixed

Sets the object's bottom-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-radius-top-left
borderRadiusTopLeft
Mixed

Sets the object's top-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-radius-top-right
borderRadiusTopRight
Mixed

Sets the object's top-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

border-right
borderRight
String

Sets the object's right border style. Accepts solid, dashed, and dotted styles. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"2px solid #f00" | ...

border-top
borderTop
String

Sets the object's top border style. Values must include the border width, style, and color. Accepts solid, dashed, and dotted styles. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"2px solid #f00" | ...

border-width
borderWidth
Mixed

Sets the border width of the object. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

callout Boolean

Sets whether an object will have a callout arrow or not. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

true | false | 1 | 0

callout-extension
calloutExtension
Mixed

Sets the length of the extension that extends beyond the tip of the callout arrow. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

callout-height
calloutHeight
Mixed

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

callout-hook
calloutHook
Array

Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart.. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

[200, 50] | ...

callout-offset
calloutOffset
Mixed

Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the callout-position. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

callout-position
calloutPosition
String

Sets the position for the object's callout arrow. The position is "bottom" by default. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

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

callout-width
calloutWidth
Mixed

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

color String

Sets the color of the text in the legend box. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

cursor String

Sets the style of the cursor when hovering over a node.

"hand" | "normal"

fill-angle
fillAngle
Numeric

Sets the angle of the axis along which the linear gradient is drawn. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

-45 | 115 | ...

fill-offset-x
fillOffsetX
Mixed

Sets an X offset to apply to the fill. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

fill-offset-y
fillOffsetY
Mixed

Sets an Y offset to apply to the fill. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

fill-type
fillType
String

Sets the background gradient fill type to either linear or radial. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

"linear" | "radial"

font-angle
fontAngle
Numeric

Sets the object's font angle. A positive value will rotate the object by that number of degrees clockwise, while a negative value will rotate the object by that number of degrees counter-clockwise. For the text in the legend box. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

-45 | 115 | ...

font-color
fontColor
String

Sets the font color of the text in the legend box. Works like color. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

font-family
fontFamily
String

Sets the text's font family in the legend box. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

font-size
fontSize
Mixed

Sets the text's font size in the legend box. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

font-style
fontStyle
String

Sets the text's font style in the legend box. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"none" | "italic" | "oblique"

font-weight
fontWeight
String

Sets the text's font weight in the legend box. Similar to bold. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"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. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

"#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. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

"0.1 0.5 0.9" | ...

height Mixed

Sets the object's height. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

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

italic Boolean

Sets whether the text is displayed with italic characters or not. For the legend box. Similar to font-style. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

true | false | 1 | 0

margin Mixed

Sets the object's margins. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

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

margin-bottom
marginBottom
Mixed

Sets the object's bottom margin. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

margin-left
marginLeft
Mixed

Sets the object's left margin. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

margin-right
marginRight
Mixed

Sets the object's right margin. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

margin-top
marginTop
Mixed

Sets the object's top margin. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

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 "..." Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

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

offset-x
offsetX
Mixed

Sets an X offset to apply when positioning the object/shape. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

offset-y
offsetY
Mixed

Sets an Y offset to apply when positioning the object/shape. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output canvas and svg.

4 | "6px" | ...

order Number

To specify the order of the legend items in the legend.

1 | 2 | 3 | 4 | ...

padding Mixed

Sets the object's padding around the text. Up to four values can be entered to set the padding for all four sides, starting with the top and going clockwise. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

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

padding-bottom
paddingBottom
Mixed

Sets the object's bottom padding around the text. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

padding-left
paddingLeft
Mixed

Sets the object's left padding around the text. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

padding-right
paddingRight
Mixed

Sets the object's right padding around the text. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

padding-top
paddingTop
Mixed

Sets the object's top padding around the text. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

4 | "6px" | ...

rtl (right-to-left) Boolean

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

true | false | 1 | 0

rules Array

Rules allows you to include logic within your JSON code to apply sets of attributes to certain aspects of your chart that meet a specified requirement. See rules for usage information.

[...]

shadow Boolean

Sets whether the object's shadow is visible or not. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

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. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

Has limited effect on HTML5 implementation.

0.3 | 0.9 | ...

shadow-angle
shadowAngle
Numeric

Sets the angle of the shadow underneath the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

Has limited effect on HTML5 implementation.

-45 | 115 | ...

shadow-blur
shadowBlur
Mixed

Sets the blur effect size for the shadow of the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

shadow-color
shadowColor
String

Sets the color of the shadow of the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

Has limited effect on HTML5 implementation.

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

shadow-distance
shadowDistance
Mixed

Sets the distance between the shadow and the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Works with output flash.

Has limited effect on HTML5 implementation.

4 | "6px" | ...

size Mixed

Sets the size of the object/shape.

4 | "6px" | ...

text String

Sets the text content of the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"Some Text" | ...

text-align
textAlign
String

Sets the text's horizontal alignment relative to the object's box. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

"left" | "center" | "right"

text-alpha
textAlpha
Numeric

Sets the text's transparency independent of the object's transparency. Value must be between 0.0 and 1.0, with 0.0 being 100% transparent and 1.0 being 100% opaque. The leading 0 before the decimal is required. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box.

0.3 | 0.9 | ...

text-decoration
textDecoration
String

Sets the text's decoration. Similar to underline. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Use output canvas or flash.

"none" | "underline"

underline Boolean

Sets whether the text is displayed with underlined characters or not. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Use output canvas or flash.

true | false | 1 | 0

vertical-align
verticalAlign
String

Sets whether the text will wrap, depending on the width of the object. For single item in Legend. Requires Legend. Used only inside individual series rather than Plot. See red text in upper right box. Use output canvas or flash.

"top" | "middle" | "bottom"

visible Boolean

Sets the visibility of the object.

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. See red text in upper right box. Use output canvas or flash.

true | false | 1 | 0

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