Highcharts tooltip image

1
votes

I have a question.

I am using highchars in my project and i wanna know if it's possible to show an image (in this case i wanna show a google map static image) on the tooltip?

Thanks in advance

1
javascripthighcharts
I think a question like this has already been asked here: stackoverflow.com/questions/7399051/…, and was answered by one of the developers at Highsoft. Also check out the api, which doesn't appear to make any provision for your request. highcharts.com/ref/#tooltip - mg1075
I can't answer my question, so i'll leave here my solution. In the tooltip i added useHtml: true. Then in the formatter i've make a function return some html beyond the ones that highcharts supports (in my case <img> tag) - Miguel Teixeira

1 Answers

6
votes

You can Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip.

Check out the 'formatter' option inside tooltip:

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<small>{point.key}</small><table>',
            pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
            '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
            footerFormat: '</table>',
            formatter: function() {
                return '<img src="http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg" title="" alt="" border="0" height="250" width="220">';
            },
            valueDecimals: 2
        },

        series: [{
            name: 'Short',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'Long named series',
            data: [129.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4].reverse()
        }]

    });
});​

You can just insert the code of the static Google map image you were talking about.

Hope that helps.