Tengo un gráfico circular con etiquetas de datos, que están directamente en el punto y muestran el valor y el nombre del mismo. Pero tuve algunos problemas que no pude resolver, incluso después de horas de intentarlo y buscar en Google.
right y en el lado derecho con el texto alineado a la left . Para que siempre estén alineados hacia el centro. Ni siquiera he descubierto una manera de cambiar la alineación del texto.Creé un pequeño JSFiddle: https://jsfiddle.net/x503prs6/54/
Gracias por leer y toda su ayuda!
Dentro de events chart.events.load también puede actualizar el estilo para etiquetas de datos específicas.
events: { load: function() { let chart = this; chart.series[0].data[0].update({ dataLabels: { useHTML: true, style: { fontSize: '20px', color: 'red', } } }) } }https://jsfiddle.net/BlackLabel/vnbxf64a/
Otras opciones son cambiar el formato de las propiedades y agregar saltos, para personalizar el truncamiento del texto en las tablas de datos, tiene la opción de agregar estilos CSS adicionales en línea.
dataLabels: { useHTML: true, format: '<p class="truncate"><b>{point.name}</b></br>{point.y}</p>', style: { fontSize: '20px', color: 'red', textOverflow: 'ellipsis' } } .truncate { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px 0; }https://jsfiddle.net/BlackLabel/vnbxf64a/1/
Intente usar alignTo: 'plotEdges' , establecen que la etiqueta toca el borde vertical más cercano del área de trazado, pero no estoy seguro de cómo desea alinear exactamente las etiquetas. https://api.highcharts.com/highcharts/series.pie.dataLabels.alignTo