Why is a background fill not working?

As you can see in migration to v4 guide:

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

So to enable background filling, you should register Filler component:

import { Filler } from "chart.js";

ChartJS.register(Filler);