Recharts柱状图：标签显示百分比时图表无法正常渲染问题求助

我明白你遇到的问题了——直接给数据里的数值加上%符号后，柱子就不显示了对吧？这是因为Recharts需要数值类型的数据来计算柱子的高度，一旦你把数值改成带%的字符串，它就无法识别这个值了，自然渲染不出柱子。

正确的做法是保留原始数据的数值类型不变，通过Recharts提供的格式化功能来让标签显示百分比，具体有两种常用方式：

1. 使用<LabelList>组件（推荐） #

<LabelList>是Recharts专门用于配置数据标签的组件，它支持formatter属性，可以直接把数值格式化为带百分比的字符串：

import { BarChart, Bar, XAxis, YAxis, Tooltip, LabelList } from 'recharts';

const data = [
  { name: "18-24", audience: 35.18 },
  { name: "25-34", audience: 21.96 },
  { name: "35-44", audience: 7.26 },
  { name: "45-54", audience: 2.19 },
  { name: "55-64", audience: 0.67 },
  { name: "65+", audience: 0.33 },
  { name: "unknown", audience: 32.41 }
];

export default function AudienceChart() {
  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="audience" name="Audience Share">
        {/* 这里配置标签的格式化逻辑 */}
        <LabelList 
          dataKey="audience" 
          formatter={(value) => `${value}%`} 
          position="top" 
        />
      </Bar>
    </BarChart>
  );
}

2. 手动映射<Label>组件 #

如果你需要更精细的控制，也可以通过遍历数据给每个柱子单独添加标签：

import { BarChart, Bar, XAxis, YAxis, Tooltip, Cell, Label } from 'recharts';

// 数据保持不变...

export default function AudienceChart() {
  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="audience" name="Audience Share">
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`}>
            <Label value={`${entry.audience}%`} position="top" />
          </Cell>
        ))}
      </Bar>
    </BarChart>
  );
}

额外优化：Tooltip也显示百分比 #

如果连Tooltip里的内容也想显示百分比，只需要给<Tooltip>组件配置formatter即可：

<Tooltip formatter={(value) => [`${value}%`, "Audience Percentage"]} />

这样处理后，既保证了Recharts能正常识别数值渲染柱子，又能让标签和Tooltip都显示带%的格式啦。

内容的提问来源于stack exchange，提问作者Gearóid