How to see truncated text with hover in highcharts?

Question

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?

My chart

Answer 1

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

Demo: https://jsfiddle.net/BlackLabel/c4qezstf/