Chart.js 3.9.1柱状图：如何缩小柱子与Y轴的间距？

针对你遇到的柱子和Y轴间距过大的问题，调整以下几个配置项就能解决：

• 修正x轴的比例参数：你当前设置的barPercentage: 6.5超出了合理范围（该值需在0-1之间，控制单根柱子在分类宽度中的占比），会导致Chart.js布局计算异常，先把它改成合理值，比如0.8；categoryPercentage也调整为0.9（控制分类本身在x轴上的宽度占比）。
• 关闭x轴的偏移：设置x.offset: false，默认offset: true会在第一个柱子左侧和最后一个柱子右侧添加额外间距，关闭后柱子会紧贴Y轴。
• 移除y轴无效配置：barPercentage和categoryPercentage是x轴专属参数，y轴设置它们没有作用，直接删掉。

修改后的配置代码如下：

Chart.register(ChartDataLabels);

var options = {
    tooltips: {
        enabled: false
    },
    plugins: {
        datalabels: {
            color: 'white'
        },
        legend: {
            position: 'top', 
            labels: {
                font: {size: 10},
                usePointStyle: true
            }
        }
    },
    scales: {
        x: {
            barPercentage: 0.8, // 修正为0-1之间的合理值
            categoryPercentage: 0.9, // 修正为0-1之间的合理值
            offset: false, // 关闭偏移，让柱子紧贴Y轴
            // 若还需要微调，可添加padding控制
            // padding: { left: 5 }
        },
        y: {
            beginAtZero: true,
            grace: '3%',
            ticks: {
                beginAtZero: true
            }
        }
    }
};

// 后续图表初始化和数据更新代码保持不变
var barChart = new Chart(document.getElementById("chart3"), {
    type: 'bar',
    data: {
        labels: [""]
    },
    options: options
});

for (i = 0; i < parsed[0].length; i++) {
    barChart.data.datasets.push({ 
        label: parsed[0][i].label, 
        backgroundColor: parsed[0][i].backgroundColor, 
        data: [parsed[0][i].data], // 这里不需要转字符串，直接用数值即可
        pointStyle:'circle' 
    });
}

barChart.update();

补充说明：你之前尝试设置的padding如果是加在y轴上，自然对x轴方向的间距无效，要调整x轴的padding或者offset才能控制柱子与Y轴的水平间距。

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