Ashokkumaresan
Posts: 3
Joined: Wed Feb 10, 2016 10:30 am

how to display image in tooltip

Wed Feb 10, 2016 10:34 am

Please guide me to display image in tooltip of specific width and height

Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: how to display image in tooltip

Wed Feb 10, 2016 12:19 pm

Hi,

You can use special parameter of tooltip, named useHTML. Here you can read about this parameter inside our API:
http://api.highcharts.com/highcharts#tooltip.useHTML

If you want to change your tooltip, you can do it inside tooltip.formatter function. You can read about it here:
http://api.highcharts.com/highcharts#tooltip.formatter

Inside this function you can use HTML img tag for adding image to your tooltip.
You can use height and width parameters inside HTML tag for setting width and height of your image.

Here you can see example of code that should work:

Code: Select all

 tooltip: {
      useHTML: true,
      formatter: function() {
        var img = '<img src = "https://static.pexels.com/photos/6606/flowers-garden-orange-tulips.jpg" height="82" width="122"/>'
        return img
      }
    },
I have made jsFiddle, I hope that you it will meet your requirements:
http://jsfiddle.net/0mjfqkxr/1/

Best regards.
Grzegorz Blachliński
Highcharts Developer

Ashokkumaresan
Posts: 3
Joined: Wed Feb 10, 2016 10:30 am

Re: how to display image in tooltip

Thu Feb 11, 2016 7:02 am

Thank you its working :D

Return to “Highcharts Usage”