How can I add an icon w/ tooltip to the bottom right corner of a Highcharts graph?

pradeepupadhya
May 18, 2023
153 views
0 votes
2 Answers

I am using the highcharts as in below image. I want to add an information icon with a tooltip at the bottom right corner of graph (red square in screenshot).

Here is the sandbox link: http://jsfiddle.net/BlackLabel/smkcd39v/

I have tried to achive this using annotations it din’t helped.

Answers

Check this out

https://jsfiddle.net/subeeshamie/Lko3cw02/5/

Highcharts.chart('container', {
 credits: {
text: '<div class="hover-text">ⓘ <span class="tooltip-text" > a tooltip!</span></div>',
    href: '#',
    style:{  
   fontSize: '1.2em',
   color:'black'
}
  },
  series: [{
    type: 'column',
    data: [1, 2, 3],
    point: {
      events: {
        click: function() {
          var chart = this.series.chart;
          chart.selectedIndex = this.x;
          chart.redraw(false);
        }
      }
    }
  }],
  xAxis: {
    type: 'category',
    labels: {
      useHTML: true,
      formatter: function() {
        if (this.chart.selectedIndex === this.pos) {
          return '<img src="https://www.highcharts.com/samples/graphics/sun.png" height="40" width="40">';
        }
        return this.value;
      }
    }
  }
});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100px;  
  font-size: 15px;  
   fill:red !important;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}



.hover-text {
  position: relative;
  display: inline-block;
  margin: 40px;
  font-family: Arial;
  text-align: center;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

   
    

<div id="container"></div>

You can use Highcharts.SVGRenderer class to add an image with a tooltip.

For example:

events: {
  render: function() {
    const size = 40;
    const x = this.chartWidth - size;
    const y = this.chartHeight - size;

    if (!this.customImg) {
      this.customImg = this.renderer.image(
        "https://w7.pngwing.com/pngs/487/562/png-transparent-sun-logo-sunlight-silhouette-thumbnail.png",
        null,
        null,
        40,
        40
      ).add();

      this.customTooltip = this.renderer.label('Some tooltip', null, null, 'callout')
        .css({...})
        .attr({...})
        .hide()
        .add();

      this.customImg.on('mouseover', () => {
        this.customTooltip.show();
      });
      this.customImg.on('mouseout', () => {
        this.customTooltip.hide();
      });
    }

    this.customTooltip.attr({
      x: x + size,
      y: y - size,
      anchorX: x + size / 2,
      anchorY: y
    });
    this.customImg.attr({ x, y });
  }
}

Live demo: http://jsfiddle.net/BlackLabel/xq50skfa/

Docs: https://www.highcharts.com/docs/advanced-chart-features/freeform-drawing