Chart.js图例置顶时被图表覆盖，如何调整解决？

我之前在使用Chart.js 2.7版本时也碰到过一模一样的问题，分享几个亲测有效的解决思路：

一、通过布局内边距给图例预留顶部空间 #

你说调整画布尺寸没用是对的，但可以用Chart.js内置的布局配置，给图表顶部专门留出放图例的空间，不用改动整体画布大小：
在options里新增layout配置项设置顶部内边距，同时明确把图例的position设为top（你之前的代码里没指定这个属性）：

var myChart = new Chart(ctx, {
    type: "line",
    data: chartData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        // 新增布局内边距，给顶部图例腾空间
        layout: {
            padding: {
                top: 60 // 可以根据你图例的实际大小调整这个数值
            }
        },
        title: {
            display: true,
            text: "some data",
            fontColor: "#999",
            fontStyle: "300",
            fontSize: 12,
            fontFamily: '"Poppins", sans-serif'
        },
        legend: {
            position: 'top', // 明确指定图例位置为顶部
            padding: 20
        },
        tooltips: {
            mode: "index",
            intersect: true
        }
    }
});

二、针对2.7版本已知Bug的缓解方案 #

你提到的这个重叠问题确实是Chart.js 2.7版本的已知Bug（截至2017年3月尚未修复），它和图表的舍入计算逻辑相关，当数据集是以10为增量时特别容易触发。

缓解这个Bug的实用方法：

• 尽量避免使用以10为增量的数据集（比如把[10,20,30]改成[11,22,33]这类非10倍数的数据，就能绕过这个计算Bug）
• 如果必须用10增量的数据，就用上面提到的layout.padding方法强行给顶部留出足够空间，也能解决重叠问题

额外提示 #

如果后续有机会升级Chart.js版本，这个Bug在2.8及以上的版本里已经被修复了，升级后就不用再折腾这些临时方案啦。

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