如何在Chart.js中将仅两个柱状图居中且不超设计限制

要解决两个柱状图居中的问题，不用调大categoryPercentage和barPercentage（避免柱子过宽），可以通过给x轴添加空白占位符的方式实现：

核心思路 #

在x轴的标签数组前后插入空字符串，同时对应位置填充null数据，让Chart.js在图表两端预留空白区域，自然将两个实际柱子推到中心位置。

修改后的代码 #

重点标注修改部分：

var newChart = document.getElementById('barChart').getContext('2d');
newChart = new Chart(newChart, {
    type: 'bar',
    data: {
        // 前后添加空字符串占位符，扩展x轴空间
        labels: ["", ...props.data.labels, ""],
        datasets: [{
            // 对应空占位符的位置填充null，避免生成无效柱子
            data: [null, ...props.data.data, null],
            backgroundColor: [null, ...props.data.color, null],
        }]
    },
    plugins: [htmlLegendBarChart],
    options: {
        plugins: {
            htmlLegend: {
                containerID: 'bar-legend-container',
            },
            legend: {
                display: false,
                position: 'top'
            },
            tooltip: {
                displayColors: false,
                callbacks: {
                    title: function (tooltipItem) {
                        return tooltipItem[0].label;
                    },
                    label: function (tooltipItem) {
                        return "₹" + Number(tooltipItem.formattedValue);
                    }
                },
                backgroundColor: Colors.white,
                titleColor: Colors.gray,
                bodyColor: Colors.black,
                titleFont: {
                    size: 12,
                    family: 'Poppins-Regular',
                    weight: 400
                },
                bodyFont: {
                    size: 12,
                    family: 'Inter-Medium',
                    weight: 500
                },
            },
        },
        scales: {
            x: {
                display: false,
                offset: true, // 确保柱子不贴边，优化居中效果
                grid: {
                    display: false // 隐藏x轴网格，避免空占位符产生多余线条
                }
            },
            y: {
                beginAtZero: true,
                ticks: {
                    display: false,
                    lineWidth: false,
                    drawTicks: false,
                },
                border: {
                    display: false,
                    dash: [8, 4]
                },
                grid: {
                    color: function (context) {
                        return Colors.pale_blue;
                    },
                },
            },
        },
        // 保留原有宽度参数，避免柱子超出设计限制
        categoryPercentage: 0.6,
        barPercentage: 0.6,
    },
});
return () => {
    newChart.destroy()
}

原理说明 #

• 空标签和null数据会让x轴生成额外的空白分类区域，将实际的两个柱子挤压到图表中心
• 保留原有的categoryPercentage和barPercentage参数，确保柱子宽度符合设计要求
• offset: true配置可以防止柱子贴到图表边缘，进一步优化居中视觉效果

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