tooltip

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. For graph plot tooltip.

0.3 | 0.9 | ...

angle

Numeric

Sets the rotation angle of the object/shape. For graph plot tooltip.

-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)"). For graph plot tooltip.

"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. For graph plot tooltip.

"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. For graph plot tooltip.

"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". For graph plot tooltip.

"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. For graph plot tooltip.

"image.png" | ...

background-position backgroundPosition

String

Sets the position of the background when the background-repeat value is no-repeat. For graph plot tooltip.

"0 0" | "50 100" | "80% 60%" | ...

background-repeat backgroundRepeat

String

Sets the repeating mode for the background image. For graph plot tooltip.

"no-repeat" | "repeat" | "repeat-x" | "repeat-y"

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. For graph plot tooltip.

"2px solid #f00" | ...

border-color borderColor

String

Sets the border color of the object. For graph plot tooltip.

"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. For graph plot tooltip.

"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, while 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. For graph plot tooltip.

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. For graph plot tooltip.

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. For graph plot tooltip.

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. For graph plot tooltip.

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. For graph plot tooltip.

4 | "6px" | "-6px" | -4 | ...

border-right borderRight

String

Sets the object's right border style. Accepts solid, dashed, and dotted styles. For graph plot tooltip.

"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. For graph plot tooltip.

"2px solid #f00" | ...

border-width borderWidth

Mixed

Sets the border width of the object. For graph plot tooltip.

4 | "6px" | ...

callout

Boolean

Sets whether an object will have a callout arrow or not. For graph plot tooltip.

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. For graph plot tooltip.

4 | "6px" | ...

callout-hook calloutHook

Array

Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart. For graph plot tooltip.

[200, 50] | ...

callout-offset calloutOffset

Mixed

Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the callout-position. For graph plot tooltip.

4 | "6px" | ...

callout-position calloutPosition

String

Sets the position for the object's callout arrow. The position is "bottom" by default. For graph plot tooltip.

"top" | "right" | "bottom" | "left"

callout-width calloutWidth

Mixed

Sets the width of the object's callout arrow. A larger value will create a wider callout arrow. For graph plot tooltip.

4 | "6px" | ...

clip-text clipText

Boolean

Cuts off extra text. Use with width. For graph plot tooltip.

true | false | 1 | 0

color

String

Sets the text's color of the tooltip. Similar with font-color. For graph plot tooltip.

"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. For graph plot tooltip.

-45 | 115 | ...

fill-offset-x fillOffsetX

Mixed

Sets an X offset to apply to the fill. For graph plot tooltip.

4 | "6px" | ...

fill-offset-y fillOffsetY

Mixed

Sets an Y offset to apply to the fill. For graph plot tooltip.

4 | "6px" | ...

fill-type fillType

String

Sets the background gradient fill type to either linear or radial. For graph plot tooltip.

"linear" | "radial"

font-angle fontAngle

Numeric

Sets the rotation angle of the text of the tooltip. Similar with angle.

-45 | 115 | ...

font-color fontColor

String

Sets the text's color of the tooltip. 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 tooltip.

"Arial" | "Tahoma,Verdana" | ...

font-size fontSize

Mixed

Sets the text's font size of the tooltip.

4 | "6px" | ...

font-style fontStyle

String

Sets the text's font style of the tooltip. Similar with italic.

"none" | "italic" | "oblique"

font-weight fontWeight

String

Sets the text's font weight of the tooltip. 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. For graph plot tooltip.

"#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. For graph plot tooltip.

"0.1 0.5 0.9" | ...

height

Mixed

Sets the object's height. For graph plot tooltip.

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

html-mode htmlMode

Boolean

To create HTML tooltips. Set the value to true, and then in the "text" attribute, provide your HTML markup. Refer to the Tooltips Tutorial for more information.

true | false | 1 | 0

margin

Mixed

Sets the object's margins. For graph plot tooltip. Works with output flash.

10 | "5px" | "10 20" | "5px 10px 15px 20px" | ...

margin-bottom marginBottom

Mixed

Sets the object's bottom margin. For graph plot tooltip. Works with output flash.

4 | "6px" | ...

margin-left marginLeft

Mixed

Sets the object's left margin. For graph plot tooltip. Works with output flash.

4 | "6px" | ...

margin-right marginRight

Mixed

Sets the object's right margin. For graph plot tooltip. Works with output flash.

4 | "6px" | ...

margin-top marginTop

Mixed

Sets the object's top margin. For graph plot tooltip. Works with output flash.

4 | "6px" | ...

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 "..." For graph plot tooltip. Works with output canvas and svg.

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. For graph plot tooltip. Works with output canvas and svg.

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

offset-x offsetX

Mixed

Sets an X offset to apply when positioning the object/shape. For graph plot tooltip.

4 | "6px" | ...

offset-y offsetY

Mixed

Sets an Y offset to apply when positioning the object/shape. For graph plot tooltip.

4 | "6px" | ...

padding

Mixed

Sets the object's padding around the text of the tooltip.

10 | "5px" | "10 20" | "5px 10px 15px 20px" | ...

padding-bottom paddingBottom

Mixed

Sets the object's bottom padding around the text of the tooltip.

4 | "6px" | ...

padding-left paddingLeft

Mixed

Sets the object's left padding around the text of the tooltip.

4 | "6px" | ...

padding-right paddingRight

Mixed

Sets the object's right padding around the text of the tooltip.

4 | "6px" | ...

padding-top paddingTop

Mixed

Sets the object's top padding around the text of the tooltip.

4 | "6px" | ...

placement

String

Specifies where tooltips are fixed relative to their node values. Refer to the applicable chart types page for more information.

Options by Chart Type:

"node:top" | "node:center" | "node:out" | ...

position

String

Sets the object's position relative to it's container. Similar results can be obtained by setting marginand margin-... attributes. For graph plot tooltip.

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

sticky

Boolean

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

true | false | 1 |0

text

String

Specifies what text to display in your tooltips. (By default, chart data values are displayed.) You can provide any alphanumeric characters and/or ZingChart tokens combination. Note: You can also provide HTML markup to create HTML tooltips. In addition to this attribute, add an "html-mode" attribute and set the value to true. Refer to the Tooltips Tutorial for more information.

"%v" | "Total Sales: %v" | "%v %t" | "..."

text-alpha textAlpha

Numeric

Sets the transparency of the text. 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 | ...

timeout

Numeric

To create sticky tooltips. Provide a value in milliseconds. Use this with the "sticky" attribute, which specifies whether or not tooltips will "stick" to the chart. Refer to the Tooltips Tutorial for more information.

30000 | 10000 | ...

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. For graph plot tooltip.

true | false | 1 | 0

x

Mixed

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

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

y

Mixed

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

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

z-index zIndex

Numeric

Sets the z position of the object. Objects with higher z indexes will appear "above" those with lower z index values.

5 | 10 | ...