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

markers

[ root » graph » scaleY » markers ]

Scale markers can be used to highlight an area of data or to draw a trendline to emphasize data movement or patterns. Create a markers array in the scaleY object, and add an object for each scale marker. Refer to the X/Y-Axis Scale Configuration 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 | ...
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"
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-width
borderWidth		 Mixed

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

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

To create and style labels for the scale markers.

{...}
label-alignment
labelAlignment		 String

Allows you to set how the label is aligned with the chart.

"normal" | "opposite" | "auto"
label-placement
labelPlacement		 String

Allows you to set how the label is placed on the chart.

"normal" | "opposite" | "auto"
line-color
lineColor		 String

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

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
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" | "dashdot"
line-width
lineWidth		 Mixed

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

4 | "6px" | ...
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" | ...
placement String

Setting 'placement' to 'top' will overlay the marker on top of your charted data. By default, markers are set to 'placement':'bottom', which will place the marker behind your charted data.

top | bottom
range Array

To indicate the range you want the scale marker to span. Without specification, that range is based on the scale indexes. Add a "value-range" attribute and set the value to true to set the range based on the scale values.

Line scale markers accept one or two range values. One value specifies the point that the scale marker is drawn at, similar to a reference line. Two values specify the starting and ending points, appearing as an angled line.

Area scale markers accept two or four range values. Two values specify the starting and ending points, always appearing as a rectangle shape. Four values specify the connecting points of the scale marker, allowing you to create various trapezoid shapes.

[1] | [3,4] | [3,4,5,6] | ...
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" | ...
type String

Sets the marker type to either a single line or a marker that will cover an area.

"line" | "area"
value-range
valueRange		 Boolean

To use with the "range" array. When set to true, the scale marker (area or line) accommodates values, including Unix timestamps, as your starting and ending values. E.g., "range":[30,34] or "range":[1420491600000,1422651600000].

true | false (default) | 1 | 0
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