React-ChartJS-2 Radar chart still showing default point labels even when pointLabels.display is false

Question

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?

• kikon: The pointLabels.display: false option works as expected. Here's a codesandbox with your code (I set plugin label color to red, to make it clear) and a non-react jsFiddle with the same options. Please verify if you're importing from a recent version of chart.js, and if you can't find the issue, consider including a minimal reproducible example, possibly as a codesandbox or stackblitz.

Answer 1

pointLabels.display = false setting turns off the captions near the outer angles. Since your plugin adds new similar labels. If you don't see the duplicates near the angles, the setting has worked.

If you want to turn off the tooltip on you points, you can delete prop "Tooltip" from your

ChartJS.register(...)