Visit ZingGrid.com to learn more about our new JavaScript library for data grids & data tables
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

legend-marker

[ root » graph » series » legend-marker]

To style the legend marker 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 the shape to the left of the text in the upper right box.

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 the shape to the left of the text in the upper right box.

-45 | 115 | ...
background-color
backgroundColor		 String

Sets the background color of the object. For the shape to the left of the Legend text. 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 the orange shape to the left of the text in the 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 the shape to the left of the text in the 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 the shape to the left of the text in the 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 the shape to the left of the text in the 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 the shape to the left of the text in the 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 the shape to the left of the text in the 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 the shape to the left of the text in the upper right box.

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"
border-color
borderColor		 String

Sets the border color of the object, applicable on closed shapes. See also line-color for closed shapes. Requires Legend. Used only inside individual series rather than Plot. See the shape to the left of the text in the upper right box.

"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 also line-width for closed shapes. See also line-color for closed shapes. Requires Legend. Used only inside individual series rather than Plot. See the shape to the left of the text in the upper right box.

4 | "6px" | ...
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 the shape to the left of the text in the upper right box.

-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 the shape to the left of the text in the upper right box.

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 the shape to the left of the text in the upper right box.

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 the shape to the left of the text in the upper right box.

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

"#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 the shape to the left of the text in the upper right box.

"0.1 0.5 0.9" | ...
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 the shape to the left of the text in the upper right box.

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 the shape to the left of the text in the upper right box.

4 | "6px" | ...
size Mixed

Sets the size of the object/shape. Requires Legend. Used only inside individual series rather than Plot. See the shape to the left of the text in the upper right box.

4 | "6px" | ...
type String

Sets the type of the object/shape. Requires Legend. Used only inside individual series rather than Plot. See the shape to the left of the text in the upper right box.

"pie" | "circle" | "star5" | ...
visible Boolean

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. Requires Legend. Used only inside individual series rather than Plot. See the shapes to the left of the text in the upper right box.

true | false | 1 | 0
x Mixed

Sets the X position of the object. Requires Legend. Used only inside individual series rather than Plot. See the shapes to the left of the text in the upper right box.

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

Sets the Y position of the object. Requires Legend. Used only inside individual series rather than Plot. See the shapes to the left of the text in the upper right box.

10 | "20px" | 0.3 | "30%" | ...
Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON