amCharts pie chart how to customize the balloon text

4
votes

I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],

  • (a) a text that depends on the data item, and

  • (b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.

For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.

Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.

Will greatly appreciate your help.

3
javascriptamcharts

3 Answers

1
votes

You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.

I have used description for a custom field, it works fine.

1
votes

For writing dynamic text in the balloon you can also do the folowing:

"graphs": [{
    "balloonFunction": function(graphDataItem, graph) {
      var value = graphDataItem.values.value;
      if (value < 500) {
        return value + "<br>(Little)";
      } else {
        return value + "<br>(A Lot)";
      }
    }
  }],
0
votes

You can add any custom field to your data provider and then display it in your balloon in the same way as value:

{value:15, title:"slice title", someCustomField:"some custom data"}

and then:

chart.balloonText = "[[someCustomField]]";