如何在MUI X BarChart的柱状图上方显示数据文本？

我正在使用版本为^6.19.1的@mui/x-charts库中的<BarChart>组件，希望在每个柱状图的上方（水平布局下为右侧）显示对应的数据值，提升图表可读性。

原代码 #

const MyData = [
  {
    Name: "All",
    low: 19.63,
    middle: 34.84,
    average: 35.98,
    good: 9.55,
  },
  // ... 其他数据对象
];
export default function({MyData}){
    const lowMarks = [];
    const middleMarks = [];
    const averageMarks = [];
    const goodMarks = [];
    const xLabels = [];

    MyData.map(({Name, low, middle, average, good })=>{
        lowMarks.push(low)
        middleMarks.push(middle)
        averageMarks.push(average)
        goodMarks.push(good)
        xLabels.push(Name)
    })

return(
<BarChart  xs={12}
  series={
           [
  { data: lowMarks, label: 'low', id: 'low', stack: 'total', color: '#f4cccc',valueFormatter},
  { data: middleMarks, label: 'middle', id: 'middle', stack: 'total', color: '#ffe599', valueFormatter},
  { data: averageMarks, label: 'average', id: 'average', stack: 'total', color: '#b6d7a8', valueFormatter},
 { data: goodMarks, label: 'good', id: 'good', stack: 'total', color: '#9fc5e8', valueFormatter},
 ]
}
yAxis={[{ data: xLabels, scaleType: 'band'}]}
xAxis={[{valueFormatter}]}
layout="horizontal"
tooltip={{ trigger: 'item' }}
>
</BarChart>
)}

解决方案 #

要实现柱状条旁显示数据值，可通过series配置中的label属性定义标签渲染逻辑，或使用全局slotProps统一配置。

方式1：逐个系列配置标签

为每个series添加label配置，指定内容、位置和样式：

const MyData = [
  {
    Name: "All",
    low: 19.63,
    middle: 34.84,
    average: 35.98,
    good: 9.55,
  },
  // ... 其他数据对象
];

// 数值格式化函数，保留两位小数
const formatValue = (value) => value.toFixed(2);

export default function MyBarChart({ MyData }) {
  const lowMarks = [];
  const middleMarks = [];
  const averageMarks = [];
  const goodMarks = [];
  const xLabels = [];

  MyData.map(({ Name, low, middle, average, good }) => {
    lowMarks.push(low);
    middleMarks.push(middle);
    averageMarks.push(average);
    goodMarks.push(good);
    xLabels.push(Name);
  });

  return (
    <BarChart
      xs={12}
      series={[
        {
          data: lowMarks,
          label: 'low',
          id: 'low',
          stack: 'total',
          color: '#f4cccc',
          valueFormatter: formatValue,
          label: {
            content: (params) => formatValue(params.value),
            position: 'top', // 水平布局下对应柱状条右侧
            style: { fill: '#333', fontSize: 12 }
          }
        },
        {
          data: middleMarks,
          label: 'middle',
          id: 'middle',
          stack: 'total',
          color: '#ffe599',
          valueFormatter: formatValue,
          label: {
            content: (params) => formatValue(params.value),
            position: 'top',
            style: { fill: '#333', fontSize: 12 }
          }
        },
        {
          data: averageMarks,
          label: 'average',
          id: 'average',
          stack: 'total',
          color: '#b6d7a8',
          valueFormatter: formatValue,
          label: {
            content: (params) => formatValue(params.value),
            position: 'top',
            style: { fill: '#333', fontSize: 12 }
          }
        },
        {
          data: goodMarks,
          label: 'good',
          id: 'good',
          stack: 'total',
          color: '#9fc5e8',
          valueFormatter: formatValue,
          label: {
            content: (params) => formatValue(params.value),
            position: 'top',
            style: { fill: '#333', fontSize: 12 }
          }
        },
      ]}
      yAxis={[{ data: xLabels, scaleType: 'band' }]}
      xAxis={[{ valueFormatter: formatValue }]}
      layout="horizontal"
      tooltip={{ trigger: 'item' }}
    />
  );
}

方式2：全局统一配置标签

如果所有系列的标签样式一致，可通过slotProps全局设置，避免重复代码：

<BarChart
  // ... 其他原有配置
  slotProps={{
    barLabel: {
      style: { fill: '#333', fontSize: 12 },
      position: 'top',
      content: (params) => formatValue(params.value)
    }
  }}
/>

关键说明 #

• label.content：接收参数对象，params.value为当前柱状条的数值，可自定义格式化逻辑。
• label.position：设置为top时，水平布局下标签会显示在柱状条右侧，垂直布局下显示在顶部，符合期望效果。
• label.style：可自定义字体颜色、大小等样式，适配图表整体风格。

内容的提问来源于stack exchange，提问作者MAYUR BIRARI