Creates the balloons ( tooltips ) of the chart, It follows the mouse cursor when you roll-over the data items.
The framework generates the instances automatically you only need to adjust the appearance to your needs.
var chart = AmCharts.makeChart("chartdiv", {
...
"balloon": {
"adjustBorderColor": true,
"color": "#000000",
"cornerRadius": 5,
"fillColor": "#FFFFFF"
}
});
| Property | Type | Default | Description |
|---|---|---|---|
| adjustBorderColor | Boolean | true | If this is set to true, border color instead of background color will be changed when user rolls-over the slice, graph, etc. |
| animationDuration | Number | 0.3 | Duration of balloon movement from previous point to current point, in seconds. |
| borderAlpha | Number | 1 | Balloon border opacity. Value range is 0 - 1. |
| borderColor | Color | #FFFFFF | Balloon border color. Will only be used of adjustBorderColor is false. |
| borderThickness | Number | 2 | Balloon border thickness. |
| color | Color | #000000 | Color of text in the balloon. |
| cornerRadius | Number | 0 | Balloon corner radius. |
| disableMouseEvents | Boolean | true | If your balloon has links, you have to set this to false in order for those links to be clickable. |
| drop | Boolean | false | Allows having drop-shaped balloons. Note, these balloons will not check for overlapping with other balloons, or if they go outside plot area. It also does not change pointer orientation automatically based on its vertical position like regular balloons do. You can use pointerOrientation property if you want it to point to different direction. Not supported by IE8. |
| enabled | Boolean | true | Use this property to disable balloons for certain value axes. I.e.:"valueAxes": [{
// ...
// value balloons are shown
}, {
// ...
"balloon": {
"enabled": false
}
// value balloons are not shown
}]
|
| fadeOutDuration | Number | 0.3 | Duration of a fade out animation, in seconds. |
| fillAlpha | Number | 0.8 | Balloon background opacity. |
| fillColor | Color | #FFFFFF | Balloon background color. Usually balloon background color is set by the chart. Only if "adjustBorderColor" is "true" this color will be used. |
| fixedPosition | Boolean | true | Specifies if balloon should follow mouse when hovering the slice/column/bullet or stay in fixed position (this does not affect balloon behavior if ChartCursor is used). Note: This setting is ignored in JavaScript Maps. |
| fontSize | Number | Size of text in the balloon. Chart's fontSize is used by default. | |
| horizontalPadding | Number | 8 | Horizontal padding of the balloon. |
| maxWidth | Number | Maximum width of a balloon. | |
| offsetX | Number | 1 | Defines horizontal distance from mouse pointer to balloon pointer. If you set it to a small value, the balloon might flicker, as mouse might lose focus on hovered object. NOTE: this setting is ignored unless fixedPosition is set to false or Chart Cursor is enabled. |
| offsetY | Number | 6 | Defines vertical distance from mouse pointer to balloon pointer. If you set it to a small value, the balloon might flicker, as mouse might lose focus on hovered object. NOTE: this setting is ignored unless fixedPosition is set to false or Chart Cursor is enabled. |
| pointerOrientation | String | down | Works only if balloon.drop set to true, specifies direction of a pointer. |
| pointerWidth | Number | 6 | The width of the pointer (arrow) "root". Only used if cornerRadius is 0. |
| shadowAlpha | Number | 0.4 | Opacity of a shadow. |
| shadowColor | Color | #000000 | Color of a shadow. |
| showBullet | Boolean | false | If cornerRadius of a balloon is >0, showBullet is set to true for value balloons when ChartCursor is used. If you don't want the bullet near the balloon, set it to false: chart.balloon.showBullet = false |
| textAlign | String | middle | Text alignment, possible values "left", "middle" and "right" |
| verticalPadding | Number | 4 | Vertical padding of the balloon. |
| Name | Parameters | Returns | Description |
|---|---|---|---|
| hide() | Hides balloon. | ||
| setBounds(left, top, right, bottom) | Defines a square within which the balloon should appear. Bounds are set by chart class, you don't need to call this method yourself. | ||
| setPosition(x, y) | Sets coordinates the balloon should point to. |