How to display percentage on top of column in stacked Amchart

Question

I am using stacked amcharts . For example one in Amchart

Now I want to display overall percentage on top of each column. How to add percentage

Answer 1

You can display the percentage instead of the columns' value by setting the graphs' labelText strings to "[[percents]]%" . The documentation lists all of the [[shortcodes]] that can be used.

  "graphs": [{
    // ...
    "labelText": "[[percents]]%",
    // ...
  }, 
  // repeat for each graph object
  ]

Demo

Edit

If you need to display a percentage of category's overall value with respect to the sum of all of your data, you can work around this by providing your category total and sum of all of your columns in your dataProvider , create an invisible line graph that uses the column total and displays the calculated percentage using the labelFunction

Here's an example of what your data would look like:

  "dataProvider": [{
    "year": 2003,
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1,
    "columnTotal": 7.7, // total for this column
    "dataTotal": 24.7  // calculated total of the data in all categories
  }, 
  // repeat for each data point
]

And here's the graph setup:

"graphs": [
    // other graphs omitted
  {
    "showBalloon": false, //ensures that no balloon is displayed
    "visibleInLegend": false, //ensures that this graph is not displayed in the legend
    "lineAlpha": 0, //hides the line
    "labelText": "[[value]]", //required for the labelFunction
    "labelFunction": function(graphDataItem, valueText) { //calculates the percent and displays the label
      return ((graphDataItem.dataContext.columnTotal / graphDataItem.dataContext.dataTotal) * 100).toFixed(2) + "%";
    },
    "valueField": "columnTotal"
  }
]

Demo