How to add "data-gaps" in CharJs?

Question

I try to create filled line chart from BarChart component. I need to fill gaps in chart.

Here is my chart settings (i`m using vue-chart-3, so, i show just configs):

Chart Data

{
  labels: [
    "23.10-29.10",
    "30.10-05.11",
    "06.11-12.11",
    "13.11-19.11",
    "20.11-26.11",
    "27.11-03.12",
    "04.12-10.12",
    "11.12-17.12",
  ],

  datasets: [
    {
      type: "line",
      label: "Data One",
      backgroundColor: "rgba(0, 0, 255, 0.3)",
      fill: "start",
      data: [14.9, 21.2, 19.8, 20.7, 22.9, 29.6, 38.6, 27.4],
    },

    {
      type: "line",
      label: "Data three",
      backgroundColor: "rgba(255, 0, 0, 0.3)",
      data: [30.4, 32.0, 31.8, 41.8, 22.9, 51.8, 50.1, 40.8],
      fill: "start",
    },
    { data: [0, 0, 0, 0, 0, 0, 0, 0], hidden: true },
  ],
}

ChartOptions:

{
  responsive: true,
  events: [],
  plugins: {
    tooltip: {
      enabled: false,
    },
    legend: {
        display: false
    }
  },

  animation: {
    duration: 0,
    onComplete: ({ chart }) => {
      chart.ctx.font = `${Chart.defaults.font.size} ${Chart.defaults.font.family}`;
      chart.ctx.textAlign = "center";
      chart.ctx.textBaseline = "bottom";

      const firstMetaDatasetData = chart.getDatasetMeta(0).data;
      const firstDatasetData = chart.data.datasets[0].data as number[];

      const secondMetaDatasetData = chart.getDatasetMeta(1).data;
      const secondDatasetData = chart.data.datasets[1].data as number[];

      const calculatedDatasetData = secondDatasetData.reduce<number[]>(
        (acc, value, index) => {
          return [...acc, value - firstDatasetData[index]];
        },
        []
      );

      for (let i = 0; i < firstDatasetData.length; i++) {
        // draw first dataset labels
        chart.ctx.fillText(
          (firstDatasetData[i] as number).toString(),
          firstMetaDatasetData[i].x,
          firstMetaDatasetData[i].y + 20
        );
        // draw second dataset label
        chart.ctx.fillText(
          (secondDatasetData[i] as number).toString(),
          secondMetaDatasetData[i].x,
          secondMetaDatasetData[i].y - 5
        );

        // draw calculated dataset label
        const d = firstMetaDatasetData[i].y - secondMetaDatasetData[i].y;
        if (calculatedDatasetData[i]) {
          chart.ctx.fillText(
            (calculatedDatasetData[i] as number).toFixed(1),
            secondMetaDatasetData[i].x,
            secondMetaDatasetData[i].y + d / 2 + 5
          );
        }
      }
    },
  },
}

And here is my current result:

https://i.stack.imgur.com/0FBmo.png

I need to fill gaps from left and right, like here:

https://i.stack.imgur.com/cdpZh.png

Value of zero point on this example is equal the first real point. The same on the last point. Third dataset with zero values i added for bar chart grid (if you have better solution, please, told me).

How can i fill this areas on chart? P.S. Updated formatting