Anatomía

El componente envuelve un SVG centrado de 300×300 dentro de una columna flex que también contiene una fila de leyenda debajo. Dentro del SVG, cuatro polígonos concéntricos forman el fondo de la rejilla, cada uno al 25/50/75/100% del radio. Líneas radiales finas conectan el centro con cada extremo de eje. Encima de ellas, un `<motion.path>` por opción dibuja el polígono de datos relleno. Elementos `<motion.circle>` escalonados marcan cada punto de datos. Las etiquetas de texto se sitúan 24px más allá de los extremos del radio, calculadas con el mismo ángulo polar que su eje.

Cómo funciona

Las primitivas clave son `polarToXY` (convierte un ángulo de 0-360 grados y un radio en coordenadas x/y SVG, desplazado -90° para que el primer eje apunte hacia arriba) y `buildPath` (asigna cada valor a su punto y los une con comandos de path SVG M/L). Cada `<motion.path>` anima `pathLength` de 0 a 1 mediante `whileInView`, con un escalonado de 0.3s de retardo entre opciones. Los círculos de datos usan un escalonado secundario: `0.5 + optionIndex * 0.3 + axisIndex * 0.05` segundos, para que parezcan surgir a lo largo del path mientras se dibuja. La curva de easing `[0.16, 1, 0.3, 1]` es un cubic-bezier personalizado que aporta una sensación de rápido al inicio y lento al final en todo momento.

Cómo crearlo en React

1. Configurar los helpers de geometría polar

   Escribe dos funciones puras: `polarToXY` convierte un ángulo en grados y un radio en coordenadas x/y SVG (resta 90° para que 0° apunte hacia arriba), y `buildPath` transforma un array de valores de 0-100 en una cadena de path SVG cerrada. Ambas son JavaScript puro, sin necesidad de bibliotecas.

   function polarToXY(angle: number, r: number): [number, number] {
     const rad = ((angle - 90) * Math.PI) / 180;
     return [CENTER + r * Math.cos(rad), CENTER + r * Math.sin(rad)];
   }
   
   function buildPath(values: number[], count: number): string {
     return values
       .map((v, i) => {
         const angle = (360 / count) * i;
         const [x, y] = polarToXY(angle, (v / 100) * RADIUS);
         return `${i === 0 ? "M" : "L"}${x},${y}`;
       })
       .join(" ") + " Z";
   }

2. Dibujar la rejilla y las líneas de eje

   Representa 4 elementos `<polygon>` concéntricos calculando cada vértice en `(level / LEVELS) * RADIUS` a lo largo del ángulo de cada eje. Luego añade una `<line>` por eje desde el centro hasta su extremo. Ambos usan la variable CSS `--color-border` para adaptarse automáticamente a cualquier preset de tema.

   {Array.from({ length: LEVELS }).map((_, li) => {
     const r = ((li + 1) / LEVELS) * RADIUS;
     const pts = axes
       .map((_, ai) => polarToXY((360 / count) * ai, r).join(","))
       .join(" ");
     return <polygon key={li} points={pts} fill="none" stroke="var(--color-border)" strokeWidth="1" opacity={0.5} />;
   })}

3. Animar los polígonos de datos con pathLength

   Para cada conjunto de datos, representa un `<motion.path>` con el resultado de `buildPath`. Anima `pathLength` de 0 a 1 con `whileInView` para que el dibujo se active al hacer scroll. Escalona varias opciones con `delay: index * 0.3` para que aparezcan de forma secuencial en lugar de todas a la vez.

   <motion.path
     d={buildPath(opt.values, count)}
     fill="var(--color-accent)"
     fillOpacity={0.15}
     stroke="var(--color-accent)"
     strokeWidth={2}
     initial={{ opacity: 0, pathLength: 0 }}
     whileInView={{ opacity: 1, pathLength: 1 }}
     viewport={{ once: true }}
     transition={{ duration: 1, delay: index * 0.3, ease: [0.16, 1, 0.3, 1] }}
   />

4. Añadir los círculos de puntos de datos escalonados y las etiquetas

   Recorre cada valor de cada opción para representar un `<motion.circle>` en la posición polar calculada. Usa un retardo compuesto `0.5 + optionIndex * 0.3 + axisIndex * 0.05` para que los círculos parezcan recorrer el path. Coloca los elementos `<text>` 24px más allá del extremo del radio para las etiquetas de eje, usando `textAnchor='middle'` y `dominantBaseline='central'` para que se centren correctamente independientemente del ángulo.

Cuándo usarlo

Recurre a un gráfico radar cuando necesites comparar 2-3 opciones a través de 5-8 dimensiones cualitativas o puntuadas de forma simultánea: comparativas de funcionalidades en páginas de precios SaaS, perfiles de competencias de candidatos o fichas de especificaciones de producto. Evítalo cuando tus datos sean ordinales o secuenciales (un gráfico de barras o de líneas es más claro), cuando tengas más de 3 opciones (los polígonos superpuestos se vuelven ilegibles) o cuando necesites valores numéricos precisos (los gráficos radar destacan la forma por encima de los números).

Usado por

• GitHub, Usa visualizaciones de competencias de tipo radar en los perfiles de desarrollador y en las funciones de análisis de contribuciones.
• Notion, Los dashboards de Notion de terceros incrustan con frecuencia gráficos radar para las matrices de competencias de equipo y el seguimiento de OKR.
• HubSpot, Los dashboards de análisis de contactos y deals usan gráficos radar para mostrar de un vistazo las puntuaciones de leads con múltiples atributos.

FAQ