Scale graph in angular

Question

I am working on an angular application. I need graphs in my app and for that I am using highcharts library in my app. I need a graph as shown in image attached.

This chart has a kind of scale ranging 0 to 5 and data is plotted using flags/boxes

I am not able to find this type of chart on high chart website or any other angular library. How can I have this chart? Please help.

Answer 1

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