Material UI堆叠柱状图：如何在Tooltip中展示总计并独立控制显示

核心思路 #

放弃全局valueFormatter配置，改用自定义Tooltip组件，完全掌控Tooltip内的内容展示逻辑——既可以添加堆叠总计，也能自定义单条数据格式，同时彻底隔离Tooltip与坐标轴的显示规则，避免互相影响。

具体实现步骤 #

1. 编写自定义Tooltip组件 #

基于@mui/x-charts提供的Tooltip组件，通过content属性传入自定义内容，在组件内完成总计计算、数据格式定制：

import { Tooltip } from '@mui/x-charts';

const CustomStackedTooltip = ({ tooltipItems, position }) => {
  // 计算当前堆叠柱子的总计值
  const total = tooltipItems.reduce((sum, item) => sum + item.value, 0);

  return (
    <Tooltip position={position}>
      <div style={{ padding: '8px 12px', backgroundColor: '#fff', borderRadius: '4px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
        {/* 顶部展示总计 */}
        <div style={{ fontWeight: 600, marginBottom: '8px' }}>总计: {total}</div>
        {/* 格式化单条数据为「标签 - 数值」格式 */}
        {tooltipItems.map((item) => (
          <div key={item.dataIndex} style={{ display: 'flex', alignItems: 'center', gap: '8px', margin: '4px 0' }}>
            <span style={{ display: 'inline-block', width: '12px', height: '12px', borderRadius: '50%', backgroundColor: item.color }} />
            <span>{item.seriesLabel} - {item.value}</span>
          </div>
        ))}
      </div>
    </Tooltip>
  );
};

2. 在堆叠柱状图中引入自定义Tooltip #

在BarChart组件中替换默认Tooltip，其余配置保持原有逻辑即可：

import { BarChart } from '@mui/x-charts';

export default function StackedBarChart() {
  const chartData = [
    { group: '组别1', F: 12, M: 18 },
    { group: '组别2', F: 22, M: 15 },
    // 更多数据...
  ];

  return (
    <BarChart
      series={[
        { data: chartData.map(d => d.F), label: 'F', stack: 'total' },
        { data: chartData.map(d => d.M), label: 'M', stack: 'total' },
      ]}
      xAxis={[{ data: chartData.map(d => d.group), scaleType: 'band' }]}
      yAxis={[{ label: '人数' }]}
      // 绑定自定义Tooltip
      tooltip={{ content: (props) => <CustomStackedTooltip {...props} /> }}
    />
  );
}

对应解决你的问题 #

• 避免单个Tooltip数值被全局格式化：自定义Tooltip直接使用原始item.value，完全按需求输出F - 12格式，不会像series.valueFormatter那样统一修改所有条目显示。
• 避免坐标轴文字溢出：坐标轴保持独立的显示逻辑（可单独配置坐标轴的格式化规则），与Tooltip的定制逻辑完全分离，不会互相干扰布局。

可选优化 #

• 若需要对数值做格式化（如千分位、添加单位），可在计算后处理：比如total.toLocaleString()或${item.value} 人。
• 可根据项目UI规范调整Tooltip的样式，如字体、间距、阴影效果等。

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