AmCharts Gauge Balloon Tooltip

Question

How can I ad an balloon to an AmCharts Gauge? Is this not possible?

How can I add an balloon tooltip to the arrow showing the value in percent?

Copied the markup from AmChart docs. But only seems to work with regular charts and not gauges.

http://docs.amcharts.com/3/javascriptcharts/AmBalloon http://docs.amcharts.com/3/javascriptcharts/AmAngularGauge

http://jsfiddle.net/shL0g1rc/2/

Code Sample

var chart = AmCharts.makeChart("chartdiv", {
  "type": "gauge",
  "arrows": [
    {
      "value": 130
    }
  ],
  "titles": [
    {
      "text": "Speedometer",
      "size": 15
    }
  ],
  "axes": [
    {
      "bottomText": "0 km/h",
      "endValue": 220,
      "valueInterval": 10,
      "bands": [
        {
          "color": "#00CC00",
          "endValue": 90,
          "startValue": 0
        },
        {
          "color": "#ffac29",
          "endValue": 130,
          "startValue": 90
        },
        {
          "color": "#ea3838",
          "endValue": 220,
          "startValue": 130,
          "innerRadius": "95%"
        }
      ]
    }
  ],
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});

Answer 1

You can use balloonText on your gauge band to display the balloon.

You can also use "rendered" event, to dynamically update balloonText so it reflects the arrow values.

 var chart = AmCharts.makeChart("chartdiv", { "type": "gauge", "arrows": [ { "value": 130, "title": "Speed" } ], "titles": [ { "text": "Speedometer", "size": 15 } ], "axes": [ { "bottomText": "0 km/h", "endValue": 220, "valueInterval": 10, "bands": [ { "color": "#00CC00", "endValue": 90, "startValue": 0, "balloonText": "Good" }, { "color": "#ffac29", "endValue": 130, "startValue": 90, "balloonText": "Careful" }, { "color": "#ea3838", "endValue": 220, "startValue": 130, "innerRadius": "95%", "balloonText": "Too Fast!" } ] } ], "balloon": { "adjustBorderColor": true, "color": "#000000", "cornerRadius": 5, "fillColor": "#FFFFFF" }, "listeners": [{ "event": "rendered", "method": function(event) { var chart = event.chart; var text = ""; for(var i = 0; i < chart.arrows.length; i++) { var arrow = chart.arrows[i]; text += arrow.title + ": " + arrow.value + "<br />"; } for(var i = 0; i < chart.axes[0].bands.length; i++) { chart.axes[0].bands[i].balloonText = text; } } }] }); 

 #chartdiv { width: 100%; height: 500px; } 

 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/gauge.js"></script> <div id="chartdiv"></div>