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

Tooltips are labels that appear when users hover over data points (nodes) on your chart. They can display any combination of values, text, and/or tokens. In addition to standard tooltips, ZingChart offers the functionality to create sticky tooltips, fixed tooltips, and HTML tooltips. Refer to the Tooltips 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. 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-extension
calloutExtension
Mixed

Sets the length of the extension that extends beyond the tip of the callout arrow.

4 | "6px" | ...

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

decimals Numeric

Allows you to set the number of decimal places displayed for each value.

2 | 3 | 10 | ...

decimals-separator
decimalsSeparator
String

Allows you to set the decimal mark displayed for each value.

"." | "," | " " | ...

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

item String

Sets the item id of the map on which the object/shape is being added.

"itemid" | ...

map String

Sets the map id of the map on which the object/shape is being added.

"mapid" | ...

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:

Area node:top | node:bottom | node:left | node:right | node:center
Bar/Column node:top | node:bottom | node:left | node:right | node:center
Bubble node:top | node:bottom | node:left | node:right | node:center
Line node:top | node:bottom | node:left | node:right | node:center
Scatter node:top | node:bottom | node:left | node:right | node:center
Pie node:center | node:out

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

thousands-separator
thousandsSeparator
String

Sets the character used to separate thousands.

"," | "." | " " | ...

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

Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON