solankimanish357
Posts: 6
Joined: Wed Oct 25, 2023 1:20 pm

Highcharts custom tooltip alignment

Greetings, I am trying to create custom tooltip. But the created tooltip is getting cut off outside the chart wrapper. I tried increasing zindex but to no avail.

Here is the tooltip code on mouse hover.

Code: Select all

  outageMouseHover() {
    return function (e) {
      const chart = this.axis.chart;
      const xAxisCoordinate = this.axis.toValue(e.offsetX);
      const filteredOutages = this.axis.plotLinesAndBands
        .mapBy('options')
        .filter((_outage) => {
          if (
            moment(xAxisCoordinate).isBetween(
              moment(_outage.from),
              moment(_outage.to)
            )
          ) {
            return _outage;
          }
        });
      const htmlOutageTooltip = filteredOutages
        .map((_o) => {
          const outage = _o.data;
          const outageInfo = {
            'Start Time': moment(outage?.x1).format('MMM DD YYYY HH:mm:ss'),
            'End Time': moment(outage?.x2).format('MMM DD YYYY HH:mm:ss'),
            Description: outage?.name,
            'Outage Id': outage?.fdmOutageId,
            'Major System': outage?.majorsystem,
            'Major Component': outage?.majorcomponent,
            'Sub Component': outage?.subcomponent,
          };
          return Object.keys(outageInfo).reduce((output, key) => {
            const value = outageInfo[key];

            return (output += `<span><b>${key}</b>: ${value}</span><br>`);
          }, '<b>Operational Outage</b><br>');
        })
        .join('<br><hr>');
      if (chart.customLabel && Object.keys(chart.customLabel).length > 0) {
        chart.customLabel.destroy();
      }

      let xVal = e.offsetX;

      if (e.offsetX > this.axis.len * 0.85) {
        xVal = this.axis.len * 0.7;
      } else if (e.offsetX < this.axis.len * 0.1) {
        xVal = this.axis.len * 0.1;
      }

      chart.customLabel = chart.renderer
        .label(htmlOutageTooltip, xVal + 5, 0, 'rect', 70, 50, true, false)
        .css({
          fontSize: '11px',
        })
        .attr({
          fill: '#f1f1f1',
          'stroke-width': 2,
          stroke: chart.get('outageBandHex'),
          padding: 10,
          r: 5,
          zIndex: 9999,
        })
        .add();
    };
  }
Image where tooltip cutting off
Image

https://i.postimg.cc/W12ssRQg/Screensho ... -38-AM.png
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts custom tooltip alignment

Hello!

I think that tooltip.outside will work best in your case.

Alternatively, adding scrolling of the tooltip content.

Demo: https://jsfiddle.net/gh/get/library/pur ... ip/outside
API: https://api.highcharts.com/highcharts/tooltip.outside
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
solankimanish357
Posts: 6
Joined: Wed Oct 25, 2023 1:20 pm

Re: Highcharts custom tooltip alignment

Thanks for replying.

But I'm using custom tooltip on plotbands. And plotbands does not have tooltip API on highcharts docs.
GeethaL
Posts: 3
Joined: Tue Feb 27, 2024 8:33 am

Re: Highcharts custom tooltip alignment

I have a query. Need to align the tooltip at the top right if the hover coordinates is above the center point and need to show the tooltip below right when the hover coordinates is below the center point of the pie chart.

Now the tooltip is hiding the the center data of the pie chart.

Thanks in advance.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts custom tooltip alignment

In this case, instead of using SVGRenderer to draw the label, I would suggest simply creating a new DOM element in the document body and positioning it appropriately with fixed X and Y.

Demo: https://jsfiddle.net/BlackLabel/vhe0a7rp/
MDN Docs: https://developer.mozilla.org/en-US/doc ... ic_example
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
GeethaL
Posts: 3
Joined: Tue Feb 27, 2024 8:33 am

Re: Highcharts custom tooltip alignment

Hi Michal,

Thanks for the quick response.But that didn't workout for my issue.The tooltip hiding the word "Text" which is in middle of the piechart.I have uploaded the image in this link https://imgur.com/a/Rg2ThkQ and demo link Demo: https://jsfiddle.net/BlackLabel/5xgwvpe6/. Please have a look once.

Thanks
Geetha
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts custom tooltip alignment

I think this message relates to a different topic. More specifically: viewtopic.php?p=191669 So there you will get an answer to your Pie chart related topic.

The question is, is the above solution what you are looking for for the "overflow" tooltip?
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”