Highcharts Flag series tooltip does not follow yAxis

Question

I refer to http://jsfiddle.net/VJsjg/2/

$(function() {
$('#container').highcharts('StockChart', {
    chart: {
            zoomType: 'x',
            marginTop: 100, //avoid overlapping with navigator
            spacingLeft: 0
        },
    scrollbar: {
        enabled: false
    },

    navigator: {
        enabled: true,
        top: 40
    },

    rangeSelector: {
        selected: 1
    },
    yAxis:[{
        top:140,
        height:150
    }],
    series: [{
        id:'msft',
        name: 'MSFT',            
        data: MSFT
    }]
});

$('#button').click(function() {
    var chart = $('#container').highcharts();

    chart.addAxis({
        id:'secondY',            
        top:300,
        height:150
    });

    chart.addSeries({
        id:'adbe',
        yAxis:'secondY',
        name: 'ADBE', 
        data: ADBE
    });
    $(this).attr('disabled', true);

    chart.addSeries(
    // the event marker flags
        {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 3, 25),
                title : 'H',
                text : 'Euro Contained by Channel Resistance'
            }, {
                x : Date.UTC(2011, 3, 28),
                title : 'G',
                text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
            }],
            onSeries : 'adbe',
            shape : 'circlepin',
            width : 16
        });



   });
});

Notice that the circlepin H and C are at the correct position of the bottom series. However, when we do a mouseover, the position of the tooltip followed the top series instead.

Has anyone encountered the same problem before?

Answer 1

I fixed my own problem by adding a

tooltip: {
   followPointer:true
}

to the series.

Refer to http://jsfiddle.net/VGj9q/ for the solution.

Answer 2

Tooltip can follow yAxis by adding followingPointer:true, but in this way, the tooltip shape became 'square', not 'callout'.

I think this is a bug of highcharts, some similar issues can be found on github. But seems they didn't fix it for 'flag' series.

Refer to http://jsfiddle.net/4jt9jxs1/2/ for this issue.

 Highcharts.stockChart('container', { chart: { height: 600, }, navigator: { enabled: false }, yAxis: [{ id: "1", height: 200, },{ id: "2", top: 300, height: 200, }], tooltip:{ shared: false }, series: [{ name: 'USD to EUR', id: 'dataseries', data: usdeur, yAxis: "1" },{ name: 'USD to EUR1', id: 's1', data: usdeur, yAxis:"2" }, { type: 'flags', data: [{ x: Date.UTC(2011, 1, 14), title: 'A', text: 'Shape: "squarepin"' }, { x: Date.UTC(2011, 3, 28), title: 'A', text: 'Shape: "squarepin"' }], onSeries: 'dataseries', shape: 'squarepin', width: 16 }, { type: 'flags', data: [{ x: Date.UTC(2010, 2, 1), text: 'Shape: "circlepin"' }, { x: Date.UTC(2010, 9, 1), text: 'Shape: "circlepin"' }], shape: 'circlepin', onSeries: 's1', yAxis:"2", title: 'B', tooltip: { followPointer: true, }, width: 16 }, { type: 'flags', data: [{ x: Date.UTC(2012, 2, 10), title: 'C', text: 'Shape: "flag"' }, { x: Date.UTC(2013, 3, 11), title: 'C', text: 'Shape: "flag"' }], yAxis:"2", color: '#5F86B3', fillColor: '#5F86B3', onSeries: 's1', width: 16, style: { // text style color: 'white' }, states: { hover: { fillColor: '#395C84' // darker } } }] }); 

 <div id="container" style="height: 400px; min-width: 600px"></div> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>