score:1

Accepted answer

you can use the flag series from highstock. the below example contains also anti-collision logic for the flags.

highcharts.chart('container', {
    chart: {
        ...,
        events: {
            render: function() {
                const points = this.series[0].points;

                points.foreach(function(point, i) {
                    if (points[i + 1] && point.plotx + point.graphic.width > points[i + 1].plotx) {
                        const translatey = point.graphic.translatey - point.graphic.height - 10;

                        points[i + 1].graphic.attr({
                            anchorx: points[i + 1].plotx,
                            anchory: point.graphic.anchory + point.graphic.height + 10,
                            translatey: translatey
                        });
                    }
                });
            }
        }
    },
    series: [{
        type: 'flags',
        fillcolor: null,
        showinlegend: false,
        colorbypoint: true,
        allowoverlapx: true,
        stackdistance: false,
        data: [{
            x: 1.7,
            title: '1.7'
        }, {
            x: 1.8,
            title: '1.8'
        }, {
            x: 2.1,
            title: '2.1'
        }, {
            x: 2.5,
            title: '2.5'
        }, {
            x: 2.5,
            title: '2.5'
        }],
        shape: 'flag'
    }]
});

live demo: https://jsfiddle.net/blacklabel/eg0oxr4t/

docs: https://www.highcharts.com/docs/stock/flag-series


Related Query

More Query from same tag