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

Standalone chart labels can be used to display text, URLs, images, and more. When utilized with tokens, they become dynamic labels that users can interact with. To create them, use the "labels" array, which will act as the container for all of your label objects. Refer to the Standalone Labels 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.

0.3 | 0.9 | ...

anchor String

Allows you to set the label's anchor position to the center of a chart.

"c"

angle Numeric

Sets the rotation angle of the object/shape.

-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)").

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 2 color background gradient of the object. 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 2 color background gradient of the object. 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 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.

true | false | 1 | 0

border-bottom
borderBottom
String

Sets the object's bottom border style. Accepts solid, dashed, and dotted styles.

"2px solid #f00" | ...

border-color
borderColor
String

Sets the border color of the object, applicable on closed shapes. 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. Accepts solid, dashed, and dotted styles.

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

A negative value will cut a corner off without rounding.

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.

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.

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.

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.

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

border-right
borderRight
String

Sets the object's right border style. Accepts solid, dashed, and dotted styles.

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

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

4 | "6px" | ...

callout Boolean

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

true | false | 1 | 0

callout-extension
calloutExtension
Mixed

Sets the length of the extension that extends beyond the tip of the callout arrow.

4 | "6px" | ...

callout-height
calloutHeight
Mixed

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow.

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.

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

4 | "6px" | ...

callout-position
calloutPosition
String

Sets the position for the object's callout arrow. The position is "bottom" by default.

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

callout-tip
calloutTip
Object

To style the tip of the callout. You can modify the shape with a "type" attribute. Value options include "circle", "diamond", "cross", and "arrow". For styling, use attributes such as "background-color", "border-color", "border-width", "line-color", "line-width", and so on.

{...}

callout-width
calloutWidth
Mixed

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow.

4 | "6px" | ...

clip-text
clipText
Boolean

Truncates text based on the setting of width.

true | false | 1 | 0

color String

Sets the object's font color. Similar to font-color.

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

cursor String

Sets the style of the cursor when hovering over the label.

"hand" | "normal"

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 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. Similar to angle.

-45 | 115 | ...

font-color
fontColor
String

Sets the object's font color. Similar to color.

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

font-family
fontFamily
String

Sets the text's font family.

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

font-size
fontSize
Mixed

Sets the text's font size.

4 | "6px" | ...

font-style
fontStyle
String

Sets the text's font style. Similar to italic.

"none" | "italic" | "oblique"

font-weight
fontWeight
String

Sets the text's font weight. Similar to 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%" | ...

hook String

Hooks the label to a specific node or scale index. The plot value refers to the index of a series object, and index refers to the specific value within that series.

"node:index=4" | "node:plot=0,index=1" | "scale:name=scale-y,index=3" | "scale:value=1420501300000" (timestamp) |...

italic Boolean

Sets whether the text is displayed with italic characters or not.

true | false | 1 | 0

limit String

Prevents hooked labels from showing outside of the plotarea

none | xy

line-gap-size
lineGapSize
Mixed

Can be used to create custom dashed or dotted lines when used with line-segment-size. This will control the size of the gaps between each line segment.

4 | "6px" | ...

line-segment-size
lineSegmentSize
Mixed

Can be used to create custom dashed or dotted lines when used with line-gap-size. This will control the size of the visible segment of line.

4 | "6px" | ...

line-style
lineStyle
String

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

"solid" | "dotted" | "dashed"

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

5 | 10 | ...

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 padding around the text. Up to four values can be entered to set the padding for all four sides, with the first value affecting the top padding, the second value affecting the right padding, and so on, in a clockwise direction.

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

padding-bottom
paddingBottom
Mixed

Sets the object's bottom padding around the text.

4 | "6px" | ...

padding-left
paddingLeft
Mixed

Sets the object's left padding around the text.

4 | "6px" | ...

padding-right
paddingRight
Mixed

Sets the object's right padding around the text.

4 | "6px" | ...

padding-top
paddingTop
Mixed

Sets the object's top padding around the text.

4 | "6px" | ...

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

target String

Sets the url's target for the link associated with the object. Use with "url".

"_blank" | ...

text String

Sets the text content of the object.

"Some Text" | ...

text-align
textAlign
String

Sets the text's horizontal alignment relative to the object's 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.

0.3 | 0.9 | ...

text-decoration
textDecoration
String

Sets the text's decoration to use underlined characters. Similar to underline.

May not display properly in Mozilla Firefox when charts are rendered using SVG.

"none" | "underline"

underline Boolean

Sets whether the text is displayed with underlined characters or not. Similar to text-decoration.

May not display properly in Mozilla Firefox when charts are rendered using SVG.

true | false | 1 | 0

url String

Sets the URL for the link associated with the object.

"http://www.domain.com/link.php" | "link.asp" | ...

vertical-align
verticalAlign
String

Sets the text's vertical alignment to one of the three applicable values, relative to the object's box.

"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%" | ...

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