MUI X Charts长标签截断问题求解：实现标签省略+Tooltip完整显示

问题描述 #

使用MUI X Charts时遇到长标签被截断的问题，需要实现以下两个效果：

• 坐标轴标签末尾添加省略号...
• 鼠标悬停对应柱状图时，通过Tooltip显示完整标签内容

已尝试调整库自带设置及图表容器边距，效果不佳。

当前效果 #

期望效果 #

解决方案 #

1. 自定义坐标轴标签实现文本溢出省略 #

通过tickLabelComponent自定义x轴标签组件，利用CSS实现文本溢出时显示省略号：

import { Typography } from '@mui/material';

// 自定义标签组件
const CustomTickLabel = ({ value }: { value: string }) => (
  <Typography
    sx={{
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      maxWidth: '80px', // 根据实际布局调整最大宽度
    }}
  >
    {value}
  </Typography>
);

// 在BarChart中配置x轴
<BarChart
  xAxis={[
    {
      data: ['非常长的标签内容示例1', '非常长的标签内容示例2', '正常长度标签'],
      tickLabelComponent: CustomTickLabel,
    },
  ]}
  // 其他图表配置
/>

2. 自定义Tooltip展示完整标签 #

通过tooltip.content属性自定义Tooltip内容，直接渲染完整的标签文本：

// 自定义Tooltip组件
const CustomTooltip = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  
  return (
    <div style={{
      backgroundColor: '#fff',
      padding: '8px 12px',
      borderRadius: '4px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      fontSize: '14px',
    }}>
      <p style={{ margin: '0 0 4px 0' }}>{payload[0].axisValue}</p>
      <p style={{ margin: 0 }}>{`数值: ${payload[0].value}`}</p>
    </div>
  );
};

// 在BarChart中配置Tooltip
<BarChart
  tooltip={{ content: CustomTooltip }}
  // 其他图表配置
/>

注意事项 #

• 调整CustomTickLabel中的maxWidth值，适配你的图表布局宽度
• 若使用TypeScript，可根据MUI X Charts的类型定义完善组件的类型注解

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