Chart.js: Stacked Bar Chart Layout Issue with Additional Single Bar

I’m facing an issue with the layout of my Chart.js stacked bar chart. I’m trying to display a single bar for “前年電力量” (Previous Year’s Power Consumption) alongside a stacked bar for “予想電力量” (Current Year’s Power Consumption).

The issue is with the ordering and stack. if I comment the dataset “Previous year’s total power consumption” in the testdata and the order and stack, the layout works fine, there is an example of data with the correct layout but only for one month, trying to achieve for all 12.

here is the code example in the codesandbox: https://codesandbox.io/p/sandbox/dv2wl3

Trying to achieve the same is if you use data instead of testdata in .

const testdata = {
    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    datasets: [
      // Unique bar for 前年電力量 (Previous Year's Power Consumption)
      {
        label: "前年電力量", // Previous year's total power consumption
        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        backgroundColor: "rgb(114, 225, 164)", // Green color for previous year
        // stack: "previousYear", // Separate stack for previous year
        barPercentage: 0.5,
        // grouped: false,
        // order: 3,
      },
  
      // Baseline bar (container) for 今年の電力消費量 (Current Year Estimate)
      {
        label: "予想電力量", // Estimated power consumption for the current year
        data: [150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150], // Baseline data for each month
        backgroundColor: "rgba(237, 239, 255, 1)", // Light color to act as background container
        borderColor: "rgba(106, 122, 242, 1)",
        borderWidth: 1,
        borderDash: [5, 5],
        stack: "currentYear", // Stack for current year estimate
        grouped: false,
        order: 1, // Render this first to act as a background layer
        barPercentage: 0.5,
      },

      // Stacked categories within 今年の電力消費量 (Current Year Power Consumption)
      {
        label: "空調 (今年)", // Air Conditioning - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgba(88, 181, 247, 1)", // Blue color for air conditioning
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "照明 (今年)", // Illumination - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(71, 68, 222)", // Color for illumination
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "冷ケース (今年)", // Cooling Case - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(157, 201, 210)", // Color for cooling case
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "その他 (今年)", // Others - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(182, 193, 200)", // Color for others
        stack: "currentYear", // Stack for current year
        grouped: true,
        order: 1,
        barPercentage: 0.5,
      },
    ],
  };

Thanks!