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

Value boxes are fixed labels adjacent to the data points on your chart. Refer to the Value Boxes 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. Note that values require the leading 0 before the decimal point. Use with "background-color" attribute.

0.3 | 0.4 | 0.9 | ...

angle Numeric

Sets the rotation angle of the object. A positive value will turn it in a clockwise direction. A negative value will turn it in a counterclockwise direction.

-90 | 270 | 180 | ...

background-color
backgroundColor
String

Sets the background color of the object. Colors can be entered by name (e.g., "purple", "blue"), hexadecimal notation (e.g., "#FF0000", "#0000FF"), or RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)").

One color will set a solid background color. Two colors will, by default, create a horizontal gradient. For more complex gradients, use "gradient-colors" and "gradient-stops".

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

background-color-1
backgroundColor1
String

Sets the first color of a two-color background gradient. To be used with "background-color-2".

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

background-color-2
backgroundColor2
String

Sets the second color of a two-color background gradient. To be used with "background-color-1".

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

background-fit
backgroundFit
String

Sets the direction(s) in which the background image is being stretched. Works with "background-image".

"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" attribute is set to "no-repeat".

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

background-repeat
backgroundRepeat
String

Sets the repeating mode for the background image. Works with "background-image".

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

border-alpha
borderAlpha
Numeric

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

border-color
borderColor
String

Sets the border color of the object, applicable on closed shapes. See the "line-color" attribute for closed shapes.

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

border-width
borderWidth
Mixed

Sets the border width of the object, applicable on closed shapes. See the "line-width" attribute for closed shapes.

4 | "6px" | ...

callout Boolean

Sets whether or not the object will have a callout arrow.

true | false | 1 | 0

connected Boolean

Pie Charts Only: When value boxes are set to "placement":"out", you can add a connecting line between the text and its corresponding pie slice. Refer to the Pie Chart Tutorial for more information.

true | false | 1 | 0

decimals Numeric

Allows you to set the number of decimal places displayed for each value.

2 | 3 | 10 | ...

decimals-separator
decimalsSeparator
String

Allows you to set the decimal mark displayed for each value.

"." | "," | " " | ...

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 object.

5 | "10px" | ...

fill-offset-y
fillOffsetY
Mixed

Sets a Y offset to apply to the object.

5 | "10px" | ...

fill-type
fillType
String

Sets the background gradient fill type to linear or radial.

"linear" | "radial"

font-color
fontColor
String

Sets the font color of the object. Similar to the "color" attribute.

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

font-family
fontFamily
String

Sets the font family of the object.

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

font-size
fontSize
String

Sets the font size of the object.

4 | "6px" | ...

font-style
fontStyle
String

Sets the font style of the object. Similar to the "italic" attribute.

"none" | "italic"

font-weight
fontWeight
String

Sets the font weight of the object. Similar to the "bold" attribute.

"normal" | "bold"

gradient-colors
gradientColors
String

Sets the colors for a complex background gradient consisting of two or more colors. Use with the "gradient-stops" attribute. Works with output svg.

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

gradient-stops
gradientStops
String

Sets the gradient stops for a complex background gradient consisting of two or more colors. Use with the "gradient-colors" attribute. Works with output svg.

"0.1 0.5 0.9" | ...

line-style
lineStyle
String

Sets the style applied to lines and borders of the object.

"solid" | "dotted" | "dashed" | "dashdot"

offset-x
offsetX
Mixed

Sets an X offset to apply when positioning the object.

4 | "6px" | ...

offset-y
offsetY
Mixed

Sets a Y offset to apply when positioning the object.

4 | "6px" | ...

padding Mixed

Sets the padding of the object.

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

placement Mixed

Specifies where the value boxes are placed in relation to the data points.

Options by chart type:

Areaauto | top | bottom | left | right | over
Bartop-out(=top) | top-in | middle | bottom-in | bottom-out(=bottom) | over
Bubbletop | bottom | left | right | over
Gaugecenter | tip | edge
Heat Maptop | bottom | left | right | over
Lineauto | top | bottom | left | right | over
Pieout | in | center
Scattertop | bottom | left | right | over

"in" | "out" | "auto" | "left" | "right" | "over" | ...

rtl (right-to-left) Boolean

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

true | false | 1 | 0

shadow Boolean

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

Has limited effect on HTML5 implementation.

true | false | 1 | 0

text Mixed

Sets the value box text to be displayed. You can provide any combination of alphanumeric characters and/or ZingChart tokens. Refer to the ZingChart Tokens Tutorial for more information and a list of available tokens.

"%v widgets" | "Top Sales: %v" | "$%v" | "%v %t" | "..."

text-alpha
textAlpha
Numeric

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

thousands-separator
thousandsSeparator
String

Sets the character used to separate thousands.

"," | "." | " " | ...

type String

Specifies which value boxes are displayed. By default, all values in a series are displayed. You can also display the minimum, maximum, first, last, and/or no values.

"all" | "min" | "max" | "first" | "last" | none" | "min,max" | "first,last,min,max" | ...

visible Boolean

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

true | false | 1 | 0

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