Chart.js搭配datalabels时Y轴自动缩放遮挡数据标签如何解决

问题现象 #

使用Chart.js搭配datalabels插件实现图表数据标签展示时，动态数据更新后Y轴自动缩放逻辑存在缺陷，柱体最高处的数值标签会被图表上边界裁剪遮挡，示例效果如下：

示例中柱体顶部本应显示的数值“3”标签被完全遮挡，无法正常展示。

问题原因 #

Chart.js默认计算Y轴刻度范围时，仅参考数据系列本身的数值区间，不会将datalabels插件渲染在图形外部的标签高度纳入计算范围。当前配置中datalabels设置为anchor: 'end'+align: 'end'，标签会显示在柱体顶端的上方位置，这部分超出Y轴最大刻度对应高度的内容就会被画布边界裁剪。
另外原有配置存在一处无效写法：scales节点下直接编写的display: false属性位置错误，不会生效，可以直接删除。

修复方法 #

核心修改是给Y轴配置添加grace属性，在数据最大值的基础上额外预留一定比例的轴高度空间，用于容纳顶部的数据标签；同时可搭配画布顶部内边距做双重保障，适配所有动态数据场景。
修改后的完整配置如下：

const completionOptions = {
        responsive: true,
        // 给画布顶部增加固定内边距，避免标签贴边被切
        layout: {
            padding: {
                top: 15
            }
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                backgroundColor: 'rgb(85, 85, 85, 1)',
                displayColors: false,
            },
            datalabels: {
                color: 'rgb(203, 203, 203)',
                anchor: 'end',
                align: 'end',
                labels: {
                    title: {
                        font: {
                            family: 'karla',
                            weight: '600',
                            size: 12,
                        },
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                display: false,
                grid: {
                    display: false,
                },
                ticks: {
                    padding: 10
                },
                // 核心配置：Y轴范围在数据极值基础上预留10%的额外空间
                grace: '10%'
            },
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    autoSkip: false,
                    maxRotation: 0,
                    minRotation: 0,
                    font: {
                        size: 20,
                    }
                }
            },
          }
    }

配置说明 #

• grace属性支持百分比和固定值两种写法：百分比写法会根据当前数据最大值按比例预留空间，适配动态数据场景；如果数据范围固定，也可以写固定数值（比如grace: 1表示Y轴最大值比实际数据最大值高1个单位）
• 如果10%的留白在个别极值场景下仍不足以展示标签，可以根据标签字号调大比例，比如调整为'15%'即可覆盖常规12-14px字号的标签展示需求
• 搭配layout.padding.top的固定内边距，可以避免标签紧贴画布上边缘，展示效果更美观

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