Create chart in tooltip formatter

问题:

I tried to create a inside formatter[of tooltip config] inside which I was trying to create a chart dynamically but failed to acheive so. Any bright ideas?

回答1:

Create new container inside tooltip formatter, and there also create new chart. Important part is to create chart after tooltip is rendered. For example use setTimeout. Also, useHTML: true is required, so formatter will return HTML elements, not SVG.

See working demo: http://jsfiddle.net/EtvMR/4/

Of course, you will need to get some data according to hovered point, but in example I'm using static data.

$('#container').highcharts({
    tooltip: {
        useHTML: true,
        formatter: function() {
            setTimeout( function() {
                $("#hc-tooltip").highcharts({
                    series: [{
                        data: [12, 12]
                    }]
                });
            }, 10)

            return '<div id="hc-tooltip"></div>';
        }
    },
    series: [{
        type: 'column',
        data: [29.9, 71.5]
    }]
});