graph » crosshair » plot-label

plot-label

[ root » graph » crosshair-x » plot-label ]

The crosshair plot labels appear over the data points (or node values) on your chart. They can be customized to display any combination of tokens and text. On multi-series charts, they can be separated to display as multiple plot labels. Refer to the Crosshairs Tutorial for more information.

AttributeTypeInfo
alphaNumeric

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

boldBoolean

Sets whether the text is displayed with bold characters or not.

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

A negative value will cut a corner off without rounding.

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

calloutBoolean

Sets whether an object will have a callout arrow or not.

true | false | 1 | 0

callout-height
calloutHeight		Mixed

Sets the height of the object's callout arrow. A larger value will create a taller callout arrow.

4 | "6px" | ...

clip-text
clipText		Boolean

Clips text that runs longer than the width of the parent object.

true | false | 1 | 0

colorString

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

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

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

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

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

heightMixed

Sets the object's height.

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

italicBoolean

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

max-width
maxWidth		Mixed

Sets the maximum width of the text box. If text is longer than the max-width value, it will overlap the box or will wrap if wrap-text is set to true.

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

multipleBoolean

To separate the plot labels so that a label appears for each series. You can assign unique text and styling to each label by going to the "series" array. In each series object, create a "guide-label" object, where you can place your series-specific text and styling attributes.

true | false | 1 | 0

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

paddingMixed

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

placementString

Demo

Fixes the crosshair plot labels above the nodes. Make sure to include the "multiple" attribute (set to true) in the same object. Use the "offset-y" attribute to adjust as needed.

"node-top"

rtl (right-to-left)Boolean

Renders text right-to-left. Default value is false.

true | false | 1 | 0

shadowBoolean

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

sort-by-value
sortByValue		String

Sort the series by value displayed in the crosshair plotlabel.

asc | desc

stickyBoolean

To create sticky crosshair labels. Use this with the "timeout" attribute, which allows you to specify how long you want the labels to "stick" to the chart. Refer to the Crosshairs Tutorial for more information.

true | false | 1 |0

textString

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

May not display properly in Mozilla Firefox when charts are rendered using SVG.

"none" | "underline"

timeoutNumeric

To create sticky crosshair labels. Provide a value in milliseconds. Use this with the "sticky" attribute, which specifies whether or not labels will "stick" to the chart. Refer to the Crosshairs Tutorialfor more information.

30000 | 10000 | ...

transformObject

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.

{...}

underlineBoolean

Sets whether the text is displayed with underlined characters or not. Similar to text-decoration.

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"

visibleBoolean

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON.

true | false | 1 | 0

widthMixed

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

xMixed

To create fixed crosshair labels. This attribute specifies the "x" position of your label, and can be used with the "y" attribute to specify the "y" position. Refer to the Crosshairs Tutorial for more information.

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

yMixed

To create fixed crosshair labels. This attribute specifies the "y" position of your label, and can be used with the "x" attribute to specify the "x" position. Refer to the Crosshairs Tutorial for more information.

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