Estoy usando el paquete highcharts-react-official y, a veces, mis gráficos tienen textos que son lo suficientemente largos como para truncarlos. En esos casos los textos terminan con "...".
Me gustaría poder ver el texto completo si paso el mouse sobre él. ¿Es eso posible de alguna manera?
Editado: ver la imagen. El texto truncado es el tercero desde arriba.
Editado: de hecho, descubrí que la opción "información sobre herramientas" puede solucionar esto, pero me pregunto si es posible configurar la información sobre herramientas para que solo aparezca si el texto está truncado.
La posible solución es establecer "puntos suspensivos" personalizados en el formateador, de acuerdo con la longitud del texto de la etiqueta.
dataLabels: { enabled: true, inside: true, formatter: function() { let name = this.key; if (name.length > 10) { name = name.substring(0, 8) + '...'; } return name; } }, Luego, puede verificar fácilmente qué etiqueta tiene un texto abreviado. Para verificarlo y configurar la información sobre herramientas en el punto de desplazamiento, use el evento point.mouseOver() .
point: { events: { mouseOver: function() { let point = this; let name = point.options.name; if (name.length > 10) { point.series.chart.update({ tooltip: { enabled: true } }); } }, mouseOut: function() { this.series.chart.update({ tooltip: { enabled: false } }); } } }Referencias de API: https://api.highcharts.com/highcharts/series.column.events.mouseOver https://api.highcharts.com/highcharts/series.column.events.mouseOut
Demostración: https://jsfiddle.net/BlackLabel/c4qezstf/