Apex Chart环形图底部留白问题：图表高度未达容器设定值

我用Apex Charts制作了环形图，将图例设置在底部，期望图表能完全填满外层260px高的div，但实际图表容器高度仅为227.7px，底部出现了留白。相关配置代码如下：

donutOption = {
  "series": [10800,0,16800,4800],
  "labels": ["Legend (1)","Legend (2)","Legend (3)","Legend (4)"], // 修正拼写错误：Legent → Legend
  "chart": {
    "type": "donut",
    "width": "100%",
    "height": "260",
  },
  "legend": {
    "position": "bottom",
  },
}

问题原因 #

Apex Charts中，chart.height设置的固定值仅对应**图表主体（环形图部分）**的高度，底部的图例是额外占用空间的元素，导致整体容器高度无法匹配外层div的260px，进而出现留白。

解决方法 #

• 让图表自适应外层容器高度：将chart.height改为"100%"，让整个图表容器（主体+图例）自动填满外层div的高度：

"chart": {
  "type": "donut",
  "width": "100%",
  "height": "100%", // 修改为100%
},

• 优化图例间距（可选）：若仍有少量留白，可调整图例的边距或偏移量，减少额外空间占用：

"legend": {
  "position": "bottom",
  "margin": 0, // 移除图例默认边距
  "offsetY": 0 // 调整图例垂直偏移
},

• 隐藏冗余工具栏（可选）：如果不需要图表顶部的工具栏，可将其隐藏以节省空间：

"toolbar": {
  "show": false
},

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