graph » crosshair » scale-label
scale-label
[ root » graph » crosshair-x, crosshair-y » scale-label ]
The crosshair scale labels appear over the x- and/or y-axis on your chart. They can be styled and, on x-axis scale labels, the text can be customized. Refer to the Crosshairs 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 | ... |
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" |
bold | Boolean | Sets whether the text of the scale label is displayed with bold characters or not. To see this, hover over the axis to the bottom. true | false | 1 | 0 |
border-alpha borderAlpha | Numeric | Sets the transparency of the border. 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 | ... |
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 "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; 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. 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 4 | "6px" | ... |
callout | Boolean | Sets whether an object will have a callout arrow or not. true | false | 1 | 0 |
callout-width calloutWidth | Mixed | Sets the width of the object's callout arrow. A larger value will create a wider callout arrow. 4 | "6px" | ... |
color | String | Sets the text's color of the crosshair xy label when you hover over the graph items. "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
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 a 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" |
font-angle fontAngle | Numeric | Sets the rotation angle of the crosshair xy label when you hover over the graph items. Similar with -45 | 115 | ... |
font-color fontColor | String | Sets the text's color of the crosshair xy label when you hover over the graph items. Similar with "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
font-family fontFamily | String | Sets the text's font family of the crosshair xy label when you hover over the graph items. "Arial" | "Tahoma,Verdana" | ... |
font-size fontSize | Mixed | Sets the text's font size of the crosshair xy label when you hover over the graph items. 4 | "6px" | ... |
font-style fontStyle | String | Sets the text's font style of the crosshair xy label when you hover over the graph items. Similar with "none" | "italic" | "oblique" |
font-weight fontWeight | String | Sets the text's font weight of the crosshair xy label when you hover over the graph items. Similar with "normal" | "bold" |
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" | ... |
height | Mixed | Sets the object's height. 10 | "20px" | 0.3 | "30%" | ... |
italic | Boolean | Sets whether the text of the crosshair xy label when you hover over the graph items is displayed with italic characters or not . true | false | 1 | 0 |
js-rule jsRule | String | Set a window.functionName to call dynamically. jsRule: "window.functionName()" Demo |
max-chars maxChars | Numeric | Sets the maximum numbers of characters displayed in the object. The value determines how many characters will be displayed before the text is cut and appended with "..." 5 | 10 | ... |
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" | ... |
padding | Mixed | Sets the object's padding around the text. Up to four values can be entered to set the padding for all four sides, with the first value affecting the top padding, the second value affecting the right padding, and so on, in a clockwise direction. 10 | "5px" | "10 20" | "5px 10px 15px 20px" | ... |
padding-bottom paddingBottom | Mixed | Sets the object's bottom padding around the text. 4 | "6px" | ... |
padding-left paddingLeft | Mixed | Sets the object's left padding around the text. 4 | "6px" | ... |
padding-right paddingRight | Mixed | Sets the object's right padding around the text. 4 | "6px" | ... |
padding-top paddingTop | Mixed | Sets the object's top padding around the text. 4 | "6px" | ... |
rtl (right-to-left) | Boolean | Renders text right-to-left. Default value is false. true | false | 1 | 0 |
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" | ... |
text | String | X-Axis Crosshair Scale Labels Only: Sets the text content of the object. "Some Text" | ... |
text-align textAlign | String | Sets the text's horizontal alignment relative to the object's box. "left" | "center" | "right" |
text-alpha textAlpha | Numeric | Sets the text's transparency independent of the object's transparency. Value must be between 0.0 and 1.0, with 0.0 being 100% transparent and 1.0 being 100% opaque. The leading 0 before the decimal is required. 0.3 | 0.9 | ... |
text-decoration textDecoration | String | Sets the text's decoration to use underlined characters. Similar to May not display properly in Mozilla Firefox when charts are rendered using SVG. "none" | "underline" |
transform | Object | Allows the underlying data to be 'transformed' to a new format if it was in that format originally. For example, if data is coded as a date and time, and 'type':'date' is specified as an attribute of this object, '1311261385209' will display 'Wed, 19 of May 05:00 PM' if '%D, %d %M %h:%i %A' is specified under the transform attribute of scale-x. {...} |
underline | Boolean | Sets whether the text is displayed with underlined characters or not. Similar to May not display properly in Mozilla Firefox when charts are rendered using SVG. true | false | 1 | 0 |
vertical-align verticalAlign | String | Sets the text's vertical alignment to one of the three applicable values, relative to the object's box. "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%" | ... |
wrap-text wrapText | Boolean | Sets whether the text will wrap, depending on the width of the object. true | false | 1 | 0 |