I’m building a Radar chart in React using react-chartjs-2 and Chart.js v4.
I want to disable the default black "point labels" (around the circle) because I’m drawing my own custom labels with a plugin.

I’ve already tried all the obvious configuration options, like this:

pointLabels: {
 display: false,
 callback: () => "",
 color: "transparent",
 font: { size: 0 },
},

and even patching the prototype:

RadialLinearScale.prototype.drawPointLabels = function () {};

...but the default labels still appear on top of my custom ones.
Even setting pointLabels.display = false doesn’t remove them.

Here’s a minimal reproducible example:

// complete working example
"use client";
import React from "react";
import { Radar } from "react-chartjs-2";
import {
 Chart as ChartJS,
 RadialLinearScale,
 PointElement,
 LineElement,
 Filler,
 Tooltip,
 Legend,
} from "chart.js";
ChartJS.register(
 RadialLinearScale,
 PointElement,
 LineElement,
 Filler,
 Tooltip,
 Legend
);
const horizontalPointLabelsPlugin = {
 id: "horizontalPointLabels",
 afterDraw(chart) {
 const r = chart.scales.r;
 if (!r) return;
 const { ctx } = chart;
 const labels = chart.data.labels || [];
 const n = labels.length;
 if (!n) return;
 const cx = r.xCenter;
 const cy = r.yCenter;
 const radius = r.drawingArea + 22;
 const angleStep = (2 * Math.PI) / n;
 const baseAngle = -Math.PI / 2;
 ctx.save();
 ctx.font = "14px sans-serif";
 ctx.fillStyle = "#6B7280";
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";
 for (let i = 0; i < n; i++) {
 const angle = baseAngle + i * angleStep;
 const x = cx + Math.cos(angle) * radius;
 const y = cy + Math.sin(angle) * radius;
 ctx.fillText(labels[i], x, y);
 }
 ctx.restore();
 },
};
const data = {
 labels: ["Oqimlilik", "Lug’at", "O’zaro ta’sir", "Talaffuz", "Grammatika"],
 datasets: [
 {
 data: [1.2, 1.1, 1.0, 1.3, 1.15],
 backgroundColor: "rgba(37,99,235,0.45)",
 borderColor: "#2563EB",
 borderWidth: 2,
 pointRadius: 0,
 },
 ],
};
const options = {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 r: {
 grid: { circular: false, color: "rgba(148,163,253,0.4)" },
 angleLines: { display: false },
 ticks: { display: false },
 pointLabels: {
 display: false,
 callback: () => "",
 color: "transparent",
 font: { size: 0 },
 },
 },
 },
 plugins: {
 legend: { display: false },
 tooltip: { enabled: false },
 },
};
export default function StatsRadar() {
 return (
 <div style={{ width: 480, height: 320 }}>
 <Radar data={data} options={options} plugins={[horizontalPointLabelsPlugin]} />
 </div>
 );
}

Expected:
No default labels, only my gray custom labels.

Actual:
The default black labels still appear behind or over my custom ones.

What I tried:

• pointLabels.display = false

• callback returning empty string

• setting transparent color and font size 0

• patching RadialLinearScale.prototype.drawPointLabels

• using plugin hooks like beforeDraw, beforeLayout, afterDraw

Question:
Is this a known issue in Chart.js 4 or react-chartjs-2?
How can I completely prevent Chart.js from drawing the built-in point labels in a radar chart?