I'm using the highcharts-react-official package and sometimes my charts have texts that are long enough to be truncated. In those cases the texts end with "...".
I would like to be able to see the full text if I hover the mouse over it. Is that possible somehow?
Edited: See the picture. The truncated text is the third one from the top.
Edited: I actually found out that the "tooltip" option can fix this, but I wonder if it's possible to configure the tooltip so that it only appears if the text is truncated?
The possible solution is to set custom "ellipsis" in formatter, according to the length of the label text.
dataLabels: {
enabled: true,
inside: true,
formatter: function() {
let name = this.key;
if (name.length > 10) {
name = name.substring(0, 8) + '...';
}
return name;
}
},
Then, you can easily check which label has an abbreviated text. For checking it and setting the tooltip on point hover, use the point.mouseOver() event.
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
}
});
}
}
}
API References: https://api.highcharts.com/highcharts/series.column.events.mouseOver https://api.highcharts.com/highcharts/series.column.events.mouseOut