AmCharts 4饼图：如何将图例默认百分比改为显示数值

Hey there! I totally get the frustration when switching from AmCharts V3 to V4—small, familiar features like showing raw values in the legend don’t work the same out of the box. Luckily, fixing this is straightforward with a quick template override.

By default, when you initialize a legend with pieChart.legend = new am4charts.Legend(), it pulls the percentage values from your pie series for display. To replicate the V3 behavior of showing exact numeric values, follow these steps:

1. Set up your legend as normal
   Start with the basic legend initialization you’re already using:

   pieChart.legend = new am4charts.Legend();
   

2. Override the legend label template
   The legend’s labels use a text template that defaults to showing the category name and percentage. We’ll modify this template to reference your data’s raw value field instead. If your data uses value as the numeric field (like most default setups), use this:

   // Update legend labels to show name + exact value
   pieChart.legend.labels.template.text = "{name}: {value}";
   

   If your data uses a different field name (e.g., sales), just replace {value} with {sales} to match your dataset.

3. Adjust separate value labels (optional)
   If your legend displays values in a separate element next to the labels (common in some V4 configurations), update that template too:

   // Update standalone value labels to show exact values
   pieChart.legend.valueLabels.template.text = "{value}";
   

Example Data Context #

Just to make sure it clicks, here’s what a sample dataset might look like:

const chartData = [
  { category: "Electronics", value: 4500 },
  { category: "Clothing", value: 2300 },
  { category: "Home Goods", value: 1800 }
];

With the template changes above, your legend will show "Electronics: 4500" instead of the percentage of the total pie that category represents.

内容的提问来源于stack exchange，提问作者Leandro Murta