React line chart background fill

I have a line chart in my React application created using Chart.js library. The line chart has a background fill applied to it, but I'm facing an issue where the fill covers the y-axis border between 0 and the first data point. I want the border to be drawn over the background color so that it's visible.

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const Graph = ({ chartData, chartColour, chartFillColour }) => {

  const options = {
    plugins: {
      legend: {
        display: false,
      }
    },
    scales: {
      x: {
        grid: {
          display: true,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      },
      y: {
        grid: {
          display: false,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      }
    }
  }

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        pointRadius: 0,
        fill: true,
      }
    ]
  }

  return chartData.labels ? <Line data={data} options={options}/> : null;
}

export default Graph;

Is there a way to ensure that the border is drawn over the background color? Any help or suggestions would be greatly appreciated. Thank you!

You can set the drawTime of the fillerPlugin to beforeDraw so it draws the fill before chart.js draws any of its own components.

https://www.chartjs.org/docs/4.3.0/charts/area.html#configuration

new Chart(ctx, {
    data: {
        datasets: []
    },
    options: {
        plugins: {
            filler: {
                drawTime: 'beforeDraw'
            }
        }
    }
});