Linear gradient doesn't work on backgroundColor prop

Sandbox: https://codesandbox.io/s/distracted-feynman-tnn96

function createGradient(ctx: CanvasRenderingContext2D, area: ChartArea) {
  const colorStart = faker.random.arrayElement(colors);
  const colorMid = faker.random.arrayElement(
    colors.filter((color) => color !== colorStart)
  );
  const colorEnd = faker.random.arrayElement(
    colors.filter((color) => color !== colorStart && color !== colorMid)
  );

  const gradient = ctx.createLinearGradient(0, area.bottom, 0, area.top);

  gradient.addColorStop(0, colorStart);
  gradient.addColorStop(0.5, colorMid);
  gradient.addColorStop(1, colorEnd);

  return gradient;
}

  useEffect(() => {
    const chart = chartRef.current;

    if (!chart) {
      return;
    }

    const chartData = {
      ...data,
      datasets: data.datasets.map((dataset) => ({
        ...dataset,
        borderColor: createGradient(chart.ctx, chart.chartArea),
        fill: 1,
        backgroundColor: createGradient(chart.ctx, chart.chartArea).  <---- Doesn't add gradient background
      }))
    };

    setChartData(chartData);
  }, []);

[dangreen]

@drydenwilliams Hi.

1. Gradient example
2. About background fill

[drydenwilliams]

Legend, thank you @dangreen! Missed that one 😄