CODEWITHSUNDEEP
javascripthighcharts
Zayyana Khoir
Zayyana Khoir

Reputation: 3

Fixing flag min/max on Highchart graph

I have a Highchart graph with xAxis being datetime, on yAxis i have different datas. I would like to put markers on the Min and Max values but flags show up for each series of data, how to fix its. Thanks.

Flags show up for each series of data

My JsFiddle

I want show Highchart like this

Flags show up only single series of data what I'm expected

This is my code :

var newArr = [];
Highcharts.chart('container', {
chart: {
    type: 'spline',
    events: {
        load: function(){
            var chart = this;
            for(var i = 0; i < chart.series[0].processedXData.length; i++){
                newArr.push({
                    y: chart.series[0].processedYData[i],
                    x: chart.series[0].processedXData[i]
                })
                var maxY = Math.max.apply(Math, newArr.map(function(o){
                    return o.y
                }));
                var minY = Math.min.apply(Math, newArr.map(function (o) {
                    return o.y;
                }));
                maxIndex = newArr.findIndex(x => x.y == maxY);
                minIndex = newArr.findIndex(x => x.y == minY);
                this.addSeries({

                    type: 'flags',
                    data: [{
                    x: newArr[maxIndex].x,
                    y: newArr[maxIndex].y,
                    title: 'Max:' + newArr[maxIndex].y,
                    }, {
                    x: newArr[minIndex].x,
                    y: newArr[minIndex].y,
                    title: 'Min: ' + newArr[minIndex].y,
                    }],

                });
            }
        }
    }
},
title: {
    text: 'Steps by Day'
},
xAxis: {
    type: 'datetime',
    tickInterval: 3600000
},
yAxis: {
    title: {
        text: 'Steps'
    },
},
series: [{
    name: 'Steps',
    data: [[1560297675000, 4.0], [1560300046000, 4.0], [1560302158000, 1.0], [1560302865000, 1.0], [1560303544000, 3.0], [1560305303000, 11.0], [1560305640000, 10.0], [1560306856000, 17.0], [1560307167000, 10.0], [1560308973000, 24.0], [1560309641000, 12.0], [1560309941000, 22.0], [1560310243000, 6.0], [1560310886000, 5.0], [1560312466000, 19.0], [1560313206000, 155.0], [1560314359000, 26.0], [1560316400000, 343.0], [1560318218000, 64.0], [1560319682000, 353.0], [1560325074000, 96.0], [1560326743000, 1037.0]]

}]});

Upvotes: 0

Views: 251

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You need to add only one flag series:

chart: {
    type: 'spline',
    events: {
        load: function() {
            var series = this.series[0],
                yData = series.yData,
                min = Math.min(...yData),
                max = Math.max(...yData),
                x1 = series.points[yData.indexOf(min)].x,
                x2 = series.points[yData.indexOf(max)].x;

            this.addSeries({
                type: 'flags',
                data: [{
                    x: x1,
                    y: min,
                    title: 'Min: ' + min
                }, {
                    x: x2,
                    y: max,
                    title: 'Max:' + max
                }]
            });
        }
    }
}

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

Upvotes: 0

Related Questions