MUI水平条形图Y轴标签截断问题求助

你遇到的这个Y轴标签截断的问题我之前也碰到过！用margin={{ left: 100 }}确实会给整个图表加左边距，根本不是精准解决标签截断的办法，咱们换几个更靠谱的思路来搞定：

1. 直接给Y轴专属区域设置宽度 #

在yAxis的配置项里添加width属性，专门给Y轴标签区域预留足够空间，完全不会影响整个图表的布局，这是最直接的方案：

yAxis={[
  {
    data: dummyData.map((item) => item.label),
    width: 120, // 数值根据你的标签实际长度调整，比如长标签可以设到150
  }
]}

2. 配置Y轴标签的溢出与换行规则 #

如果标签本身偏长，还可以让标签自动换行，或者强制显示完整内容，在yAxis的tick属性里做设置：

yAxis={[
  {
    data: dummyData.map((item) => item.label),
    tick: {
      overflow: 'visible', // 强制显示超出的标签内容
      width: 100, // 限制标签的宽度，超出部分自动换行
      textOverflow: 'clip', // 不想显示省略号就用这个，要省略号可以改成'ellipsis'
    }
  }
]}

3. 精准调整图表容器的内边距 #

别再用全局的margin了，改用sx里的paddingLeft给图表容器加内边距，再配合Y轴的宽度设置，能精准控制左边的留白：

sx={{
  ".MuiBarElement-root": {
    rx: 6,
  },
  padding: "5px",
  paddingLeft: "120px", // 数值和Y轴的width对应上就行
}}

整合后的完整代码示例 #

我把上面的方案直接套进你的代码里了，你可以直接复制试试：

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

const dummyData = [
  { label: "Label 1", value: 45 },
  { label: "Label 2", value: 30 },
  { label: "Label 3", value: 20 },
];

export default function HorizontalStatusBarChart({ data = [] }) {
  return (
    <BarChart
      layout="horizontal"
      height={360}
      yAxis={[
        {
          data: dummyData.map((item) => item.label),
          width: 120, // 关键配置：给Y轴标签留足宽度
          tick: {
            overflow: 'visible',
            width: 100,
          }
        }
      ]}
      series={[
        {
          data: dummyData.map((item) => item.value),
          label: "Count",
        },
      ]}
      sx={{
        ".MuiBarElement-root": {
          rx: 6,
        },
        padding: "5px",
        paddingLeft: "10px", // 配合Y轴宽度微调容器内边距
      }}
    />
  );
}

你可以根据自己标签的实际长度，灵活调整width的数值。如果标签特别长，优先试试让标签自动换行的方式，这样不用留太宽的空白也能完整展示内容。

内容来源于stack exchange