AmBalloon

Type class

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.

Example

```js var chart = AmCharts.makeChart("chartdiv", { ... "balloon": { "adjustBorderColor": true, "color": "#000000", "cornerRadius": 5, "fillColor": "#FFFFFF" } });```

Sources

This information about AmBalloon is provided for reference only and is not available through exported packages and thus should not be imported or used on its own.

Inheritance

AmBalloon does not extend any other symbol.

AmBalloon is not extended by any other symbol.

Properties

#adjustBorderColor

Type booleanDefault 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

Type numberDefault 0.3

Duration of balloon movement from previous point to current point, in seconds.

#borderAlpha

Type numberDefault 1

Balloon border opacity. Value range is 0 - 1.

#borderColor

Type colorDefault #FFFFFF

Balloon border color. Will only be used of adjustBorderColor is false.

#borderThickness

Type numberDefault 2

Balloon border thickness.

#color

Type colorDefault #000000

Color of text in the balloon.

#cornerRadius

Type numberDefault 0

Balloon corner radius.

#disableMouseEvents

Type booleanDefault true

If your balloon has links, you have to set this to false in order for those links to be clickable.

#drop

Type booleanDefault 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

Type booleanDefault 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

Type numberDefault 0.3

Duration of a fade out animation, in seconds.

#fillAlpha

Type numberDefault 0.8

Balloon background opacity.

#fillColor

Type colorDefault #FFFFFF

Balloon background color. Usually balloon background color is set by the chart. Only if "adjustBorderColor" is "true" this color will be used.

#fixedPosition

Type booleanDefault 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

Type number

Size of text in the balloon. Chart's fontSize is used by default.

#horizontalPadding

Type numberDefault 8

Horizontal padding of the balloon.

#maxWidth

Type number

Maximum width of a balloon.

#offsetX

Type numberDefault 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

Type numberDefault 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

Type stringDefault down

Works only if balloon.drop set to true, specifies direction of a pointer.

#pointerWidth

Type numberDefault 6

The width of the pointer (arrow) "root". Only used if cornerRadius is 0.

#shadowAlpha

Type numberDefault 0.4

Opacity of a shadow.

#shadowColor

Type colorDefault #000000

Color of a shadow.

#showBullet

Type booleanDefault 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

Type stringDefault middle

Text alignment, possible values "left", "middle" and "right"

#verticalPadding

Type numberDefault 4

Vertical padding of the balloon.

Methods

#hide()

Returns void

Hides balloon.

#setBounds()

Returns void

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()

Returns void

Sets coordinates the balloon should point to.

Events

AmBalloon does not have any events.