0
239
Views¿Cómo centrar el título verticalmente en el gráfico circular/donut de HighCharts?
Tengo un gráfico circular de HighCharts configurado como un estilo de "rosquilla", y configuré el título "verticalAlign" en "medio", pero esto parece centrar el título en toda el área ocupada por el gráfico (incluida la leyenda), lo cual está bien para algunos puntos de datos, pero una vez que el gráfico tiene muchos puntos agregados, el título comienza a superponerse a los segmentos coloreados e incluso a la leyenda. ¿Hay alguna manera de centrar el título solo en la rosquilla?
Ejemplo: 
2 answers
Answer question0
Highcharts tiene varias formas de ajustar el estilo. No queda claro cómo visualizas tu título, pero parece que el problema está en la altura de tu leyenda. Una forma de hacerlo es ajustar el parámetro 'y' del título para mover el título un poco:
title: { text: 'A title to move', align: 'center', verticalAlign: 'middle', y: -20, }El inconveniente es que es posible que no llene todo el contenido del gráfico posible, por lo que debe estimar de alguna manera cuánto desea ajustar la 'y'.
0
Después de muchas pruebas y errores, la solución final para mi caso de uso específico involucró:
- Arreglando el parámetro 'chart.spacingTop' a 10 píxeles. Esto arregló la parte superior del gráfico para que no cambiara dinámicamente en el espacio vertical.
- Configuración de 'plotOptions.pie.size' en '250px'. Esto fijó el tamaño del pastel en 250 px, independientemente de cuántos puntos se mostraran.
- Configuración de 'plotOptions.pie.center' en '['50%', 105]'. Esto centró el gráfico al 50% de ancho, 105 px desde la parte superior.
- Limitar mi serie a 24 puntos de datos como máximo (para evitar una leyenda demasiado larga para administrar)
Finalmente, creé un <div> justo antes del contenedor del gráfico que me permitió usar CSS para configurarlo en relación con el gráfico, colocando mi etiqueta justo en el centro de la dona.
El resultado: 