React-chartjs How to make line chart touch the edge of the y-axis (right side)?

Question

I have a multi-chart made up of line chart and a bar chart. There is a gap between a final point in the line and the funding axis. I want that line to touch the funding axis. I have tried adding maximum date in the xAxes field. But that is not working either

I am using chartjs 3.5.1 with react-chartjs-2.

My existing option config is.

maintainAspectRatio: false,
interaction: {
  intersect: true,
  mode: 'nearest'
},
scales: {
  xAxes: {
    type: 'time',
    grid: {
      lineWidth: 1,
      display: false,
      borderDash: [8, 4]
    },
    min: minimumDate,
    max: finalDateOfLineChart, // this did not work
    time: {
      tooltipFormat: 'MMM DD, YYYY',
      unit: 'month',
      displayFormats: {
        year: 'MMM YYYY',
        quarter: 'MMM YYYY',
        month: 'MMM YYYY'
      }
    },
    ticks: {
      maxTicksLimit: 5,
      autoSkip: true,
      source: 'auto',
      maxRotation: 0
    }
  },
  y1: {
    min: 0,
    position: 'left',
    grid: {
      display: !bothDataExist,
      borderDash: [8, 4]
    },
    stacked: false,
    ticks: {
      maxTicksLimit: 5
    }
  },
  y2:
    barChartData.length > 0
      ? {
          position: 'right',
          min: 0,
          stacked: true,
          grid: {
            borderDash: [8, 4]
          },
          ticks: {
            maxTicksLimit: 5,
            callback: (label) => {
              return truncateMoneyValue(label as number, 0);
            }
          }
        }
      : undefined
},

plugins: {
  legend: {
    position: 'bottom',
    display: false
  },
  tooltip: {
    callbacks: {
      label: (ctx) => {
        const currentLabel = ctx?.dataset?.label;
        const value = ctx?.parsed?.y;
        if (ctx.dataset.type === 'line') return `${currentLabel}: ${value}`;
        return `${currentLabel} ${truncateMoneyValue(value, 0)}`;
      }
    }
  }
}