ChartJS：如何增大极地区域图与上方标签的间距？

首先明确：这个需求完全可以实现，并非无法解决。你之前尝试的两种配置没起效，是因为没找对控制图例（上方标签）与图表主体间隙的正确配置项。

为什么之前的配置没用 #

• layout.padding.top是给整个图表容器添加上内边距，会把包括图例在内的整个区域往下推，并非单独拉开图例和图表的距离
• legend.labels.padding仅控制每个图例标签之间的间距，和图表主体没有关联

正确配置方法 #

在legend的根层级添加padding属性（注意不是labels子项里的padding），这个属性专门控制图例容器与图表主体之间的间距：

const options = {
    plugins: {
      tooltip: {    
        backgroundColor: '#78a2d3' 
      },
      legend: {
        position: 'top',
        padding: 30, // 此处设置的就是图例与图表主体的间距，数值可按需调整
        labels: {
          color: '#ffffff', 
          padding: 20, // 该配置仍控制标签之间的间距，可保留原有设置
        },
      },
    },
    // 若需微调整个图表容器的顶部留白，可保留该配置并按需调整数值
    layout: {
      padding: {
        top: 10,
      },
    }
};

补充说明 #

legend.padding是ChartJS官方文档明确支持的配置项，作用就是设置图例与图表画布之间的空白距离，针对顶部图例的场景，正好用来增加它和下方图表主体的间距。

内容的提问来源于stack exchange，提问作者Kaja S.