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

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

Inheritance

AmBalloon does not extend any other symbol.

AmBalloon is not extended by any other symbol.

Properties

adjustBorderColor
#

Type boolean

Default 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 number

Default 0.3

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

borderAlpha
#

Type number

Default 1

Balloon border opacity. Value range is 0 - 1.

borderColor
#

Type color

Default #FFFFFF

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

borderThickness
#

Type number

Default 2

Balloon border thickness.

color
#

Type color

Default #000000

Color of text in the balloon.

cornerRadius
#

Type number

Default 0

Balloon corner radius.

disableMouseEvents
#

Type boolean

Default true

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

drop
#

Type boolean

Default 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 boolean

Default 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 number

Default 0.3

Duration of a fade out animation, in seconds.

fillAlpha
#

Type number

Default 0.8

Balloon background opacity.

fillColor
#

Type color

Default #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 boolean

Default 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 number

Default 8

Horizontal padding of the balloon.

maxWidth
#

Type number

Maximum width of a balloon.

offsetX
#

Type number

Default 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 number

Default 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 string

Default down

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

pointerWidth
#

Type number

Default 6

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

shadowAlpha
#

Type number

Default 0.4

Opacity of a shadow.

shadowColor
#

Type color

Default #000000

Color of a shadow.

showBullet
#

Type boolean

Default 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 string

Default middle

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

verticalPadding
#

Type number

Default 4

Vertical padding of the balloon.

Methods

hide()

#

Returns void

Hides balloon.

setBounds(
  left,
  top,
  right,
  bottom
)

#

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(
  x,
  y
)

#

Returns void

Sets coordinates the balloon should point to.

Events

AmBalloon does not have any events.

Adapters

AmBalloon does not have any adapters.