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

Create a "legend" object to add a legend to your chart. Refer to the Legend Tutorial for more information.

Attribute Type Info
adjust-layout
adjustLayout
Boolean

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

true | false | 1 | 0

align String

Automatically aligns the legend and adjusts "plotarea" margins accordingly.

"left" | "center" | "right"

alpha Numeric

Sets the transparency of the object. The higher the value, the less transparent the object appears. Requires the formatting 0.x.

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, dotted, and dashed. Also accepts named colors. If color is not set properly, will default to black.

"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. 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. 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 for an extension line off 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 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 the position for the object's callout arrow. The position is "bottom" by default.

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

callout-width
calloutWidth
Mixed

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

4 | "6px" | ...

collapse Boolean

Sets legend to be collapsed by default

true | false | 1 | 0

drag-handler
dragHandler
String

Sets the handler used to drag the legend: icon will create a dragging icon on the legend header, which will be the only area on which you can click and drag, header will make the whole header object active for dragging the legend.

"header" | "icon"

draggable Boolean

Sets whether the legend can be dragged or not.

true | false | 1 | 0

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"

footer Object

Sets the styling for the legend footer.

{...}

gradient-colors
gradientColors
String

Sets a set of colors for a complex background gradient (more than 2 colors). To be used with gradient-stops.

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

gradient-stops
gradientStops
String

Sets the position for the introduction of each color for a complex background gradient (more than 2 colors). To be used with gradient-colors.

"0.1 0.5 0.9" | ...

header Object

Sets the styling for the legend header.

{...}

height Mixed

Sets the object's height.

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

highlight-plot
highlightPlot
Boolean

An alias for the "highlight" attribute in the "plot" object. Highlights the corresponding plot when the legend item is moused over.

true | false | 1 | 0

icon Object

Sets the styling for the legend icons (minimize/maximize and drag).

Icon style applies to all icons (minimize/maximize and drag)

{...}

item Object

Sets the styling for the active legend items.

{...}

item-off
itemOff
Object

Sets the styling for the inactive legend items.

{...}

layout String

Sets the layout for the legend items.

"horizontal" | "h" | "vertical" | "v" | "row x col" | "x col" | "row x" | "float"

margin Mixed

Sets the object's margin/s from the top-left of the chart.

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

marker Object

Sets the styling for the legend markers.

{...}

max-items
maxItems
Numeric

Sets the maximum number of items displayed on the legend. To be used with overflow.

5 | 10 | ...

minimize Boolean

Sets whether the legend can be minimized or not.

offset-x
offsetX
Mixed

Sets an X offset to apply when positioning the legend. A positive value moves the legend to the right. A negative value moves the legend to the left.

4 | "6px" | ...

offset-y
offsetY
Mixed

Sets a Y offset to apply when positioning the legend. A positive value moves the legend down. A negative value moves the legend up.

4 | "6px" | ...

overflow String

Sets the display mode for legend items beyond max-items setting: none will display all items, hidden will display just top max-items items, page will enable the pagination module, scroll will enable legend scrolling, with top max-items items per page. To be used with max-item.

"none" | "hidden" | "page" | "scroll"

page-off
pageOff
Object

Sets the styling for the inactive page navigation object (previous and next arrows).

{...}

page-on
pageOn
Object

Sets the styling for the active page navigation object (previous and next arrows).

{...}

page-status
pageStatus
Object

Sets the styling for the page status text.

{...}

reverse-series
reverseSeries
Boolean

Reverses the items in the legend

position String

Sets the object's position relative to its container. Similar results can be obtained by setting [margin] and [margin-...] attributes. Uses x,y coordinates originating from the top left of the chart.

scroll Object

To enable legend scrolling.

{...}

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. The higher the value, the less transparent the shadow will be.

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

shared boolean

For graphsets with multiple chart objects, setting this attribute to true within the legend object of each chart will allow you to use one legend to toggle data on or off for each chart simultaneously. It should be noted that while each chart must have a legend object, the visible attribute can be set to false to hide a legend.

true | false | 1 | 0

toggle-action
toggleAction
String

Sets the action performed on legend item toggle: hide will simply hide the respective plot, remove will repaint the chart without considering the respective plot, disabled will not generate any action for the legend items/markers.

"hide" | "remove" | "disabled"

tooltip Object

To create and style legend tooltips.

{...}

vertical-align
verticalAlign
String

Automatically aligns the legend and adjusts "plotarea" margins accordingly.

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

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