如何在MUI X柱状图中实现小空间下显示全部标签并旋转？

在小宽度容器中使用Material UI Charts柱状图时，部分X轴标签不渲染的核心原因是图表默认的布局优化逻辑会在判断空间不足时直接跳过标签渲染，仅设置旋转样式无法解决这个问题，需要从强制显示标签、调整布局边距两方面入手：

针对MUI X Charts（新版）的解决方案 #

通过配置X轴的tick属性强制显示所有标签，同时调整旋转对齐方式和图表边距：

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

export default function SmallWidthBarChart() {
  const xData = ['标签1', '较长的标签2', '非常长的标签3', '标签4', '标签5'];
  const yData = [10, 20, 15, 25, 30];

  return (
    <BarChart
      width={350} // 小宽度容器
      height={300}
      series={[{ data: yData }]}
      xAxis={[
        {
          data: xData,
          tick: {
            display: true, // 强制显示所有标签
            angle: -45, // 旋转角度
            textAnchor: 'end', // 文字对齐方式，避免截断
            dx: -5, // 水平偏移
            dy: 10, // 垂直偏移，让标签更靠近X轴
          },
          margin: { bottom: 60 }, // 加大底部边距，给旋转标签留空间
        },
      ]}
    />
  );
}

基于Recharts的旧版MUI Charts解决方案 #

如果是使用基于Recharts封装的Material UI Charts，需要通过interval={0}强制显示所有标签，同时调整图表边距：

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
// 或对应MUI封装的组件

export default function SmallWidthBarChart() {
  const data = [
    { name: '标签1', value: 10 },
    { name: '较长的标签2', value: 20 },
    { name: '非常长的标签3', value: 15 },
    { name: '标签4', value: 25 },
    { name: '标签5', value: 30 },
  ];

  return (
    <BarChart
      width={350}
      height={300}
      data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 70 }} // 加大底部边距
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis
        dataKey="name"
        tick={{ angle: -45, textAnchor: 'end' }} // 旋转+对齐
        interval={0} // 强制显示所有标签，不间隔跳过
      />
      <YAxis />
      <Tooltip />
      <Bar dataKey="value" fill="#8884d8" />
    </BarChart>
  );
}

关键注意点 #

1. 强制显示标签：必须关闭图表的自动隐藏逻辑，否则即使设置旋转，空间不足时标签仍会被跳过渲染
2. 调整标签对齐：旋转后设置textAnchor: 'end'可以避免标签被左侧容器截断，配合偏移量优化显示位置
3. 预留足够边距：旋转后的标签需要更多垂直空间，必须加大图表底部边距，避免被容器或图表内容遮挡

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