Adding call outs to a Highcharts - Stacked Bar

Question

I am trying to make an age timeline using a Stacked Bar from Hightcharts. I want to have multiple call outs that point to a data point in the timeline. I was going to use the tooltips but I need all the tooltips to always show and I need different content for each tooltip. So I though using a call out would be a better solution.

How can I make sure my call outs point to the data I need it to? How can I make it responsive since the bar chart itself, is responsive?

Does anyone have any idea on how I can achieve this?

Answer 1

Live demo: http://jsfiddle.net/5joufkwa/9/

Solution is to use series.dataLabels and generate there callouts:

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                align: "right", // right align for label
                enabled: true,
                useHTML: true,
                allowOverlap: true,
                overflow: "none",
                crop: false,
                y: -50,
                x: 145,
                formatter: function () {
                    return '<div class="callout top" data-name="Jane">I need to have this call out point to 75!</div>';
                }
            }
        }
    },

Note: x and y may vary, since those depends on width and height of the callout.