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?

enter image description here

I think you'll need to assign the left value of your class based on the left edge of your bar + the value displayed minus half the width of the widget scaled to a percentage and relative to the bar container using JavaScript. — J E Carter II, Jun 09 '15 at 18:58
How about using `dataLabels` to render that shapes? See: http://jsfiddle.net/5joufkwa/4/ - of course it requires some extra work. Also, you may need to set `overflow: visible` for the container in the CSS, or resize labels to fit container. More info about labels and positioning them in the [API](http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.crop) - like this: http://jsfiddle.net/5joufkwa/6/ — Paweł Fus, Jun 10 '15 at 09:42
@Paweł Fus, that second jsfiddle is sweet! You are the man! If you put this as a suggested answer, I'll mark this one answered. — duyn9uyen, Jun 10 '15 at 14:36
Any idea on how to have the call out point to the last data point within a range? I notice that it is currently centered. — duyn9uyen, Jun 10 '15 at 15:15

score 1 · Accepted Answer · answered Jun 11 '15 at 07:34

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.

Adding call outs to a Highcharts - Stacked Bar

1 Answers1

Linked