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

The graph object is the container for virtually every aspect of your chart. Typically, you would not explicitly define a "graph" object within your chart, though "graphset" is used when a chart is to include a collection of graphs.
Attribute Type Info
3d-aspect
3dAspect
Object

Sets the graph's 3D aspect. 3D graphs can be displayed in either true 3D or in an isometric 3D view. True 3D graphs allow more view options. For more information, see 3d-aspect.

{...}

animate-type
animateType
String

Sets if graph's animation runs on every chart reload/zoom or only on the first rendering.

"always" | "initial"

arrows Array

Acts as a container for any number of arrow objects, which can be styled and placed anywhere on your chart. For more information, see arrows.

[...]

async Boolean

Sets if graph's rendering is being done in one step or sequential. Useful for big charts or rendering on slow browsers (old Internet Explorer versions). If specified, overrides the global zingchart.ASYNC parameter.

true | false | 1 | 0

crosshair-x
crosshairX
Object

Sets the definition for the graph's X crosshair object. For more information, see crosshair-x, crosshair-y.

{...}

crosshair-y
crosshairY
Object

Sets the definition for the graph's Y crosshair object. For more information, see crosshair-x, crosshair-y.

{...}

csv Object

Sets a CSV data source for the data of the chart. For more information, see CSV.

{...}

guide Object

When used outside of a scale object, acts similar to crosshair-x in that it can be used to style the X crosshair. For more information, see crosshair-x.

{...}

globals Object

Sets global styling attributes. Particularly useful for setting text attributes such as "font-family", "font-color", etc...

{...}

images Array

Acts as a container for any number of image objects, which can be styled and placed anywhere on your chart. For more information, see images.

[...]

labels Array

Acts as a container for any number of label objects, which can be styled and placed anywhere on your chart. For more information, see labels.

[...]

legend Object

Allows you to customize the appearance and functionality of your chart's legend object. For more information, see legend.

{...}

palette Array

Quick attribute for setting up a set of colors for the plot. The attribute sets the base colors, the actual palette used is being dynamically generated starting from the base colors and setting the white color to the text.

["#f00", "#0f0", ...]

plot Object

Allows you to configure a number of different attributes that will affect every plotted value or individual series, depending on its placement. For more information, see plot.

{...}

plotarea Object

Allows you to customize a chart's plotarea, which is the area behind your plotted values. For more information, see plotarea.

{...}

preview Object

Allows you to customize the appearance of a graph preview, which will allow users to see a small preview of an entire chart at all times as well as select which portion of a chart to display. For more information, see preview.

{...}

refresh Object

When pulling data from an external source, this will allow you to control the automated data refresh system. For more information, see refresh.

{...}

scale Object

Sets the definition for the graph's matrix scale, in case more than one dataset exists.

{...}

scale-k
scaleK
Object

Sets the definition for the graph's key scale.

{...}

scale-r
scaleR
Object

Allows you to customize the appearance of the R scale, which is primarily used in gauge type charts. For more information, see scale-r.

{...}

scale-v
scaleV
Object

Sets the definition for the graph's value scale.

{...}

scale-x
scaleX
Object

Allows you to customize a chart's primary X scale. For more information, see scale-x, scale-x-n.

{...}

scale-x-n
scaleXN
Object

Allows you to customize a chart's subsequent X scales, where n represents the chart's scale number. For more information, see scale-x, scale-x-n.

{...}

scale-y
scaleY
Object

Allows you to customize a chart's primary Y scale. For more information, see scale-y, scale-y-n.

{...}

scale-y-n
scaleYN
Object

Allows you to customize a chart's subsequent Y scales, where n represents the chart's scale number. For more information, see scale-y, scale-y-n.

{...}

scroll-x
scrollX
Object

Allows you to customize the appearance of the x axis scroll bar and handle. For more information, see scroll-x/scroll-y.

{...}

scroll-y
scrollY
Object

Allows you to customize the appearance of the y axis scroll bar and handle. For more information, see scroll-x/scroll-y.

{...}

series Array

Acts as a container to hold that chart's data values. Also allows you to set various attributes separately for individual series. For more information, see series.

[...]

shapes Array

Acts as a container for any number of shape objects, which can be styled and placed anywhere on your chart. For more information, see shapes.

[...]

source Object

Allows you to customize a chart's source. For more information, see source.

{...}

stack-type
stackType
String

Sets the chart's stacking method (normal stacking or always stacked up to 100%).

"normal" | "100%"

stacked Boolean

Sets if the graph plots are stacked or not. See also plot:stacked.

true | false | 1 | 0

subtitle Object

Allows you to customize a chart's subtitle. For more information, see subtitle.

{...}

title Object

Allows you to customize a chart's title. For more information, see title.

{...}

tooltip Object

Sets the definition for the graph's tooltip object.

{...}

type String

Sets the type of the graph.

"null" | "line" | "bar" | ...

utc Boolean

Sets if the timestamps contained in the series data should be treated as UTC or local times.

true | false | 1 | 0

widgets Array

Sets the graph's widgets collection.

[...]

zoom Object

Sets the definition for the graph's zoom object.

{...}

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

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-width
calloutWidth
Mixed

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

4 | "6px" | ...

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"

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

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

position String

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

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

width Mixed

Sets the object's width.

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

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