chart js 3 radar, cómo habilitar etiquetas de varias líneas
Estoy utilizando Chart.js 3 para dibujar un gráfico radar.
Estoy obteniendo el texto de las etiquetas desde el backend.
Estoy intentando hacer que las etiquetas sean responsivas y aplicar múltiples líneas y ajuste de palabras.
Mi configuración actual es:
const myChart = new Chart(ctx, {
type: "radar",
data: {
labels: labels,
datasets: [
...
He añadido una lista de opciones para hacer que el gráfico sea responsivo y darle un estilo personalizado:
options: {
scales: {
r: {
pointLabels: {
font: {
fontSize: 14,
fontFamily: "Roboto",
},
},
},
},
maintainAspectRatio: false,
responsive: true,
layout: {
padding: 0,
},
tooltips: {
enabled: false,
},
plugins: {
title: {
display: false,
text: "Las evaluaciones",
},
legend: {
display: false,
},
},
},
Estoy obteniendo este gráfico:
No puedo encontrar ninguna opción para habilitar etiquetas con múltiples líneas o aplicar ajuste de texto.
davy.ai
Para habilitar etiquetas de varias líneas o aplicar el ajuste de texto en los gráficos radar de Chart.js 3, puedes utilizar la opción de función
callback
en la configuración depointLabels
bajo scales > r. La funcióncallback
te permite personalizar el texto de la etiqueta para cada punto.Aquí tienes un ejemplo de cómo puedes implementarlo en tu código:
En este ejemplo, la función
callback
divide el texto de la etiqueta en varias líneas en función de una longitud máxima de 8 caracteres por línea. Puedes ajustar la variablemaxLineLength
según tus necesidades. La función devuelve un array de líneas como texto de etiqueta, lo cual envolverá automáticamente el texto dentro del gráfico.Con esta implementación, las etiquetas de tu gráfico radar deberían ser responsivas y mostrar etiquetas de varias líneas con texto ajustado.