{
"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
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 "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 "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 "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 "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 "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 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 "#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 "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 "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 4 | "6px" | ... |
| line-segment-size lineSegmentSize |
Mixed |
Can be used to create custom dashed or dotted lines when used with 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 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 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 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 |