skip to Main Content

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/

desired output chart + icon

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

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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

    API Reference:

    https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

    https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search