react-chartjs-2 fill property not working?

Question

I want to add fill to a line chart using the react-chartjs-2 package. I'm passing fill: true to the dataset but that doesn't work as expected. Any suggestions?

const data = {
    labels,
    datasets: [
      {
        label: "Balance",
        data: history.balances.map((item) => item.balance),
        fill: true,
        borderColor: "rgba(190, 56, 242, 1)",
        backgroundColor: "rgba(190, 56, 242, 1)",
        tension: 0.3,
      },
    ],
  };

Answer 1

This is because you are using treeshaking and not importing/registering the filler plugin.

import {Chart, Filler} from 'chart.js';

Chart.register(Filler);