Highcharts tooltips with embedded sparklines

Question

I want to create a map with tooltips that show some additional data shown in the tooltip as a collection of sparklines. Basically I want to achieve a similar effect to this map. I have looked through the Highcharts tooltip formatter documentation but it seems that the HTML code that I can pass to the formatter function is quite limited.

So in nutshell, is there way to embed a sparkline in a Highcharts tooltip or is this not really possible?

ppotaczek ppotaczek · Accepted Answer · 2020-10-16T09:08:42

You can create a chart in a tooltip by using a setTimeout callback function:

    tooltip: {
        useHTML: true,
        formatter: function() {
            setTimeout(function() {
                Highcharts.chart('tooltip-chart', {
                    ...
                });
            }, 10)

            return '<div style="width: 100px; height: 60px;" id="tooltip-chart"></div>';
        }
    }

Live demo: https://jsfiddle.net/BlackLabel/yqtvr5Lm/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

Highcharts tooltips with embedded sparklines

1 Answers