Chart.js柱状图如何隐藏X轴底部标签以解决文字重叠问题

要隐藏柱状图底部重叠的X轴标签，只需在X轴的ticks配置项中添加display: false即可，该配置不会影响悬浮提示的信息展示，完全符合使用需求。

修改后完整代码 #

var newChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: newArrName,
            datasets: [{
                    label: 'Passed',
                    data: passArray,
                    backgroundColor: 'rgb(150,238,144)'
                },
                {
                    label: 'Failed',
                    data: failArray,
                    backgroundColor: 'rgb(204,0,0)'
                },
                {
                    label: 'Not Run',
                    data: notrunArray,
                    backgroundColor: 'rgb(0,109,204)'
                },
                {
                    label: 'Error',
                    data: errorArray,
                    backgroundColor: 'rgb(204,112,0)'
                },
                {
                    label: 'NA',
                    data: naArray,
                    backgroundColor: 'rgb(33,33,33)'
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: title
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            responsive: false,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 1,
                        min: 0,
                        autoSkip: false,
                        display: false // 新增该行即可隐藏X轴底部文字
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 5,
                        min: 0
                    }
                }]
            }

        }
    });

配置说明 #

• ticks.display是Chart.js控制坐标轴刻度文字显隐的原生参数，设置为false后会彻底隐藏X轴的所有底部文字，完全解决重叠问题
• 该配置不会修改图表数据源和悬浮提示逻辑，仍然可以通过鼠标悬浮获取对应柱状条的完整标签信息

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup