Preventing Low Values from Clustering at Center in Chart.js Radar Chart

Question

import React from "react";
import { Radar } from "react-chartjs-2";
import {
  Chart,
  RadialLinearScale,
  CategoryScale,
  PointElement,
  LineElement,
  RadarController
} from "chart.js";

Chart.register(
  RadialLinearScale,
  CategoryScale,
  PointElement,
  LineElement,
  RadarController
);

const RadarChartSimple = () => {
  const data = {
    labels: ["Spanish", "English", "French", "Dutch", "German"],
    datasets: [
      {
        label: "Language Proficiency",
        data: [100, 98, 95, 60, 40],
        backgroundColor: "rgba(108, 46, 156, 0.4)", // Opacidad del relleno
        borderColor: "#6c2e9c", // Color del borde
        borderWidth: 1,
        pointBackgroundColor: "#6c2e9c",
        pointRadius: 0 // Esto hará que los puntos de datos no se dibujen
      }
    ]
  };

  const options = {
    scale: {
      ticks: {
        beginAtZero: true,
        max: 100,
        stepSize: 20,
        display: false, // Esto debería ocultar los números del eje radial
        showLabelBackdrop: false // Esto debería ocultar el fondo de las etiquetas
      },
      gridLines: {
        color: "#0d284f"
      },
      angleLines: {
        color: "#0d284f"
      },
      pointLabels: {
        fontColor: "#eadbc8",
        fontSize: 16, // Ajusta este valor según lo que necesites
        fontStyle: "bold" // Esto hará que el texto sea negrita
      },
      backgroundColor: "#eadbc8"
    },
    legend: {
      display: false
    },
    maintainAspectRatio: false
  };

  return (
    <div style={{ height: "300px", width: "100%" }}>
      <Radar data={data} options={options} />
    </div>
  );
};

export default RadarChartSimple;

The problem I'm facing is with a radar chart created using react-chartjs-2 and Chart.js. I have a set of values representing language proficiency levels that are plotted on the radar chart. Most values are represented correctly except for the lower values, specifically a score of 40 for German, which is incorrectly clustering at the center of the radar chart.

Despite setting the beginAtZero option to true in the scale options, which I expected would ensure that the plotting starts from the edge of the chart, this particular value is not being placed accurately according to its scale. It's visually misleading as it gives the impression that the proficiency level for German is lower than it actually is.

The issue persists even after several attempts to fix it, such as adjusting the suggestedMin and max properties, and ensuring there is no conflicting CSS or global styles. I'm looking for a solution that would allow all the data points, no matter how small, to be placed proportionately on the radar chart, giving an accurate visual representation of the data.

I've tried adjusting the ticks configuration within the options for the chart, specifically setting beginAtZero to true, with the expectation that it would cause all the data points to originate from the outermost edge of the chart, not the center. Additionally, I set the pointRadius to 0 to remove the data point dots, as they are not needed for my visualization.

I also attempted to manipulate the max, stepSize, and display properties within the ticks configuration to see if they would correct the placement of the 40 value for German. My expectation was that these changes would ensure each data point is plotted accurately in proportion to its value, with no points unnaturally clustered at the center when they should be closer to the edge.

However, contrary to these expectations, the 40 value for German remains improperly positioned at the center of the chart, which visually misrepresents the data. This issue persists and seems unaffected by the changes in the chart configuration or the removal of potentially conflicting global styles and CSS.