Chart.jsでレーダーチャートの背景色をカスタマイズする

Chart.pluginService.register({
    beforeDraw: chart => {
        const { ctx, scale, config } = chart
        const { xCenter, yCenter, drawingArea: radius } = scale

        ctx.save()
        ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2)
        ctx.fillStyle = config.options.chartArea.backgroundColor
        ctx.fill()
        ctx.restore()
    }
});

        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;

                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
                    var scale = chart.scale;
                    var ticksAsNumbers = scale.ticksAsNumbers;
                    var max = ticksAsNumbers[ticksAsNumbers.length - 1];
                    for (var i = 0; i < ticksAsNumbers.length; i++) {
                        var point = scale.getPointPositionForValue(i, max);
                        if (i === 0) {
                            ctx.moveTo(point.x, point.y);
                        } else {
                            ctx.lineTo(point.x, point.y);
                        }
                    }

                    ctx.fill();
                    ctx.restore();
                }
            }
        });

var radarOptions = {
   scaleLineWidth :16 ,
  scaleLineColor : "#EEEEEE"
}

const options: ChartOptions<'radar'> = {
  scales: {
    radarLinear: {
      min: 0,
      max: 5,
      grid: {
        lineWidth: 40,
        color: [
          'rgba(168, 219, 240,0.3)',
          'rgba(196, 224, 202,0.3)',
          'rgba(248, 245, 186,0.3)',
          'rgba(246, 212, 196,0.3)',
          'rgba(242, 199, 217,0.3)',
        ]
      },
      ticks: {
        stepSize: 1
      },
    },
  }
}