Chart.js V3柱状图网格线显示异常求助：网格线未覆盖柱状图

要让网格线显示在柱状图上方，核心是调整网格线的渲染层级——Chart.js V3中元素的渲染顺序由z属性控制，默认网格线的层级（z:0）低于柱子（z:1），只需把网格线的z值设为大于1的数值即可。

具体配置步骤 #

• 在图表的options.scales中找到对应坐标轴（通常是y轴，x轴同理）的grid配置项
• 添加z: 2（或更高数值），确保网格线层级高于柱子
• 确认drawOnChartArea: true（默认开启，若之前手动关闭需重新打开）

完整示例代码 #

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                grid: {
                    z: 2, // 提升网格线层级，使其覆盖柱子
                    drawOnChartArea: true
                }
            },
            // 若需要x轴网格线也覆盖，添加以下配置
            x: {
                grid: {
                    z: 2
                }
            }
        }
    }
});

注意事项 #

• 该配置仅适用于Chart.js V3及以上版本，z属性是V3新增的层级控制属性
• 若之前尝试的配置无效，检查是否将grid配置嵌套在了正确的坐标轴（scales.y/scales.x）下，而非全局配置中

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