带有嵌入式迷你图的 Highcharts 工具提示

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?

Answer 1

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