React chartjs: background gradient not appearing - chart.js

Question

Trying to create a gradient background for my Line chart. The solution I tried to implement is not working. See screenshot:
I implemented canvas's createLinearGradient() to no avail. What else could I be doing wrong?
Edit: I added all my imports, including the Filler. This way it still doesn't work.
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler,
ScriptableContext,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler
);
function Linechart() {
const labels = ["January", "February", "March", "April", "May", "June"];
const dataLineChart = {
labels: labels,
datasets: [
{
backgroundColor: (context: ScriptableContext<"line">) => {
const ctx = context.chart.ctx;
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, "rgba(250,174,50,1)");
gradient.addColorStop(1, "rgba(250,174,50,0)");
return gradient;
},
label: "UST",
fill: "start",
borderColor: "#8E95DF",
data: [0, 10, 5, 2, 20, 30, 45],
},
],
};
const configLineChart = {
type: "line",
dataLineChart,
elements: {
line: {
tension: 0.35,
},
},
plugins: {
filler: {
propagate: false,
},
},
};
return (
<div>
<div className="px-5 py-3">Fund Profits</div>
<Line data={dataLineChart} options={configLineChart}></Line>
</div>
);
}
export default Linechart;
Edit: When changing this const gradient = ctx.createLinearGradient(0, 0, 0, 200); to const gradient = ctx.createLinearGradient(0, 0, 0, 500); my gradient becomes visible. Can someone explain how that value works?