Chart.js v3分组堆叠柱状图重叠显示：同组数据从x轴起始展示交集值

调整方案 #

你当前同堆叠组数值累加的核心原因是Y轴开启了堆叠配置，同stack名的数据集会自动累加高度。要实现同组重叠、都从X轴起始绘制的效果，只需做以下调整： #

1. 保留现有dataset的stack配置不变

Label1、Label2同属first堆叠组，Label3属second堆叠组的配置不需要改动，用来区分X轴上的两个分组位置。

2. 新增/修改scales配置

在图表配置的options字段下添加坐标轴配置，关闭Y轴的堆叠开关，开启X轴的堆叠开关：

type: 'bar',
data: {
    labels: labelsVals,
    datasets: [
        {
            label: 'Label 1',
            data: seriesValsPaid,
            backgroundColor: 'rgba(21, 169, 225, 0.6)',
            borderColor: 'rgba(21, 169, 225, 1)',
            borderWidth: 1,
            stack: 'first',
        },
        {
            label: 'Label 2',
            data: seriesValsWaiting,
            backgroundColor: 'rgba(21, 122, 225, 0.6)',
            borderColor: 'rgba(21, 122, 225, 1)',
            borderWidth: 1,
            stack: 'first',
        },
        {
            label: 'Label 3',
            data: seriesValsOutgoing,
            backgroundColor: 'rgba(255, 0, 0, 0.6)',
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 1,
            stack: 'second',
        }
    ]
},
// 新增options配置
options: {
    scales: {
        x: {
            // 开启X轴堆叠：相同stack名的数据集会放在同一个X轴分组位置
            stacked: true,
            // 可选调整：控制分组和柱子宽度，避免显示过宽
            categoryPercentage: 0.7,
            barPercentage: 0.9
        },
        y: {
            // 关闭Y轴堆叠：同位置的多个数据集不会累加高度，都从X轴（0值）开始绘制
            stacked: false,
            beginAtZero: true
        }
    }
}
});

效果说明

• 同属first组的Label1、Label2会在同一个X轴位置绘制，两者均从Y轴0值开始计算高度，带透明度的背景可以直接展示数值交集
• 属second组的Label3会在相邻的另一个X轴分组位置单独展示，实现分组+重叠的组合效果

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