Highcharts annotations not working when using boost module

Question

I've added dynamic annotations to my line chart, clicking on any point adds a shape annotation. However as soon as I add boost.js module the annotations.js module seems to stop working (or at least does not render shape annotations on click).

In Highcharts documentation caveats section they explain:

In addition to that, area lines are not drawn, and marker shapes, apart from circles, are not supported. It also not possible to set dash style for lines. Zones, stacking, and negative colors are also not supported.

Annotations aren't mentioned though, are they incompatible? Does anybody know a workaround? I haven't found any useful answers and I really need to use both features.

Answer 1

To make the annotations work the way you want, you should calculate the correct position on the chart:

    events: {
        click: function(e) {
            var chart = this;

            chart.addAnnotation({
                shapes: [{
                    fill: 'none',
                    stroke: 'red',
                    strokeWidth: 3,
                    type: 'path',
                    points: [{
                        x: e.chartX - chart.plotLeft,
                        y: 0,
                        //xAxis: 0,
                        //yAxis: 0
                    }, {
                        x: e.chartX - chart.plotLeft,
                        y: 300,
                        //xAxis: 0,
                        //yAxis: 0
                    }]
                }]
            });
        }
    }

Live demo: http://jsfiddle.net/BlackLabel/mcw8v7ns/