react-chartjs-2(v4.3.1)标签导致饼图尺寸不一致的解决办法

问题核心是底部图例（legend）会随标签数量自动调整高度，挤压饼图的绘制区域。以下是几种实用的解决方法：

方法1：给图例设置固定最大高度，超出滚动 #

通过限制图例的最大高度，让多余标签滚动显示，避免占用额外空间挤压饼图：

<div style={{ height: '400px' }}>
  <Pie
    data={{ /* 你的数据配置 */ }}
    options={{
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          position: "bottom",
          // 设置图例最大高度，超出后垂直滚动
          maxHeight: 100,
          // 可选：缩小图例元素尺寸，进一步节省空间
          labels: {
            boxWidth: 12,
            padding: 6
          }
        },
      }
    }}
  />
</div>

方法2：给饼图绘制区域预留固定底部padding #

通过layout.padding给底部图例预留固定高度，确保饼图的绘制区域尺寸始终一致：

<div style={{ height: '400px' }}>
  <Pie
    data={{ /* 你的数据配置 */ }}
    options={{
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        // 给底部图例预留固定高度，根据实际标签情况调整数值
        padding: { bottom: 120 }
      },
      plugins: {
        legend: {
          display: true,
          position: "bottom"
        },
      }
    }}
  />
</div>

方法3：将图例移至侧边（可选） #

如果允许调整图例位置，将其放在左侧或右侧，可从根源避免垂直方向的空间挤压：

<Pie
  data={{ /* 你的数据配置 */ }}
  options={{
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: "right" // 或 "left"
      },
    }
  }}
/>

关键注意点 #

• 务必给Pie组件外层容器设置固定高度（比如示例中的400px），配合maintainAspectRatio: false确保整体组件高度统一。
• maxHeight和layout.padding的具体数值需要根据你的标签长度、数量实际调整，找到最适配的参数。

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