Flags overlap when they are close date to each other

[bharathd]

flags are overlapping with close date.so how to avoid such kind of issue
Below is sample
http://jsfiddle.net/JppHN/7/

[pawelfus]

As stated in #4692: for now, stackDistance is applied only when two flags are exactly in the same place (the same x-value).

As for workaround, consider using plugin for flags grouping, see: http://www.highcharts.com/plugin-registry/single/41/flags-grouping

[pawelfus]

As stated in #4692: for now, stackDistance is applied only when two flags are exactly in the same place (the same x-value).

As for workaround, consider using plugin for flags grouping, see: http://www.highcharts.com/plugin-registry/single/41/flags-grouping

[bharathd]

After using flags grouping also still facing overlapping issue.can u please solve the issue in the below url
http://jsfiddle.net/JppHN/7/

[bharathd]

After using flags grouping also still facing overlapping issue.can u please solve the issue in the below url
http://jsfiddle.net/JppHN/7/

[pawelfus]

Sure, here is an example: http://jsfiddle.net/JppHN/8/

Note:
You need to set more flagsGrouping.groupings options, my jsFiddle is just an example.

[pawelfus]

Sure, here is an example: http://jsfiddle.net/JppHN/8/

Note:
You need to set more flagsGrouping.groupings options, my jsFiddle is just an example.

[niketh90]

Hi

Can this plugin be modified to stack the flags one above the other instead of grouping it and not being shown on the chart.

[niketh90]

Hi

Can this plugin be modified to stack the flags one above the other instead of grouping it and not being shown on the chart.

[bharathd]

overlapping issue is solved but when we scroll the navigator still i can see the overlapping .As niketh suggested can we make the flags one above the other?

[bharathd]

overlapping issue is solved but when we scroll the navigator still i can see the overlapping .As niketh suggested can we make the flags one above the other?

[pawelfus]

Hmm.. plugin's name is "Flags grouping", so I guess it won't do what you described (note: I'm not the author of that plugin).

[pawelfus]

Hmm.. plugin's name is "Flags grouping", so I guess it won't do what you described (note: I'm not the author of that plugin).

[bharathd]

I can understand that if any alternate solution is there let me know. anyone is working on this issue(highchart team) because this overlapping causing a serious problem ,which is dependent on the individual flag information.
Due to overlap i am unable to fetch the data.

[bharathd]

I can understand that if any alternate solution is there let me know. anyone is working on this issue(highchart team) because this overlapping causing a serious problem ,which is dependent on the individual flag information.
Due to overlap i am unable to fetch the data.

[pawelfus]

Connected UserVoice idea.

[pawelfus]

Connected UserVoice idea.

[pawelfus]

I created simple snippet plugin-style, which detects label collision and increments label position. See plugin in action: http://jsfiddle.net/p037jdyj/

Code:

(function (H) {
    function collide(a, b) {
        return !(b.x > a.x + a.width || b.x + b.width < a.x || b.y > a.y + a.height || b.y + b.height < a.y);
    }

    H.wrap(H.seriesTypes.flags.prototype, 'drawPoints', function (p) {
        var series = this,
            chart = series.chart,
            overlap = true,
            counter = 0,
            index,
            offset = series.options.stackDistance,
            currentBBox,
            compareBBox,
            compareSeries;

        p.call(this);

        while (overlap && counter < 100) { // as long as flags do overlap, move them. Extra limiter up to 100 iterations.
            overlap = false;
            H.each(series.points, function (currentPoint) {
                if (currentPoint.graphic) { // only existing point with label

                    index = 0;
                    currentBBox = {
                        x: currentPoint.graphic.translateX,
                        y: currentPoint.graphic.translateY,
                        width: currentPoint.graphic.width,
                        height: currentPoint.graphic.height
                    };

                    for (; series.index - index >= 0; index++) { // compare only with previous series

                        compareSeries = chart.series[index];

                        if (compareSeries.options.type === "flags") { // only flag type seires

                            H.each(compareSeries.points, function (comparePoint) { // compare current label with all others
                                if (compareSeries === series && comparePoint.index >= currentPoint.index ) {
                                    return; // perf
                                }

                                if (comparePoint.graphic) { // only existing point with label

                                    compareBBox = {
                                        x: comparePoint.graphic.translateX,
                                        y: comparePoint.graphic.translateY,
                                        width: comparePoint.graphic.width,
                                        height: comparePoint.graphic.height
                                    };

                                    if (collide(currentBBox, compareBBox)) { // when collide, move current label to top
                                        overlap = true;
                                        currentPoint.graphic.attr({
                                            y: currentPoint.graphic.attr("y") - offset,
                                            anchorY: currentPoint.plotY
                                        });
                                        currentPoint.tooltipPos[1] -= offset;
                                    }
                                }
                            });
                        }
                    }
                }
            });
            counter++;
        }
    });
})(Highcharts)

Let me know how it works for you!

[pawelfus]

I created simple snippet plugin-style, which detects label collision and increments label position. See plugin in action: http://jsfiddle.net/p037jdyj/

Code:

(function (H) {
    function collide(a, b) {
        return !(b.x > a.x + a.width || b.x + b.width < a.x || b.y > a.y + a.height || b.y + b.height < a.y);
    }

    H.wrap(H.seriesTypes.flags.prototype, 'drawPoints', function (p) {
        var series = this,
            chart = series.chart,
            overlap = true,
            counter = 0,
            index,
            offset = series.options.stackDistance,
            currentBBox,
            compareBBox,
            compareSeries;

        p.call(this);

        while (overlap && counter < 100) { // as long as flags do overlap, move them. Extra limiter up to 100 iterations.
            overlap = false;
            H.each(series.points, function (currentPoint) {
                if (currentPoint.graphic) { // only existing point with label

                    index = 0;
                    currentBBox = {
                        x: currentPoint.graphic.translateX,
                        y: currentPoint.graphic.translateY,
                        width: currentPoint.graphic.width,
                        height: currentPoint.graphic.height
                    };

                    for (; series.index - index >= 0; index++) { // compare only with previous series

                        compareSeries = chart.series[index];

                        if (compareSeries.options.type === "flags") { // only flag type seires

                            H.each(compareSeries.points, function (comparePoint) { // compare current label with all others
                                if (compareSeries === series && comparePoint.index >= currentPoint.index ) {
                                    return; // perf
                                }

                                if (comparePoint.graphic) { // only existing point with label

                                    compareBBox = {
                                        x: comparePoint.graphic.translateX,
                                        y: comparePoint.graphic.translateY,
                                        width: comparePoint.graphic.width,
                                        height: comparePoint.graphic.height
                                    };

                                    if (collide(currentBBox, compareBBox)) { // when collide, move current label to top
                                        overlap = true;
                                        currentPoint.graphic.attr({
                                            y: currentPoint.graphic.attr("y") - offset,
                                            anchorY: currentPoint.plotY
                                        });
                                        currentPoint.tooltipPos[1] -= offset;
                                    }
                                }
                            });
                        }
                    }
                }
            });
            counter++;
        }
    });
})(Highcharts)

Let me know how it works for you!

[prettycode]

This Highcharts.seriesTypes.flags.prototype modification worked great for me--thanks!

[prettycode]

This Highcharts.seriesTypes.flags.prototype modification worked great for me--thanks!

[mykbaker]

This issue is 1.5 years old, any update on a built in fix? This is not really an enhancement but a bug fix since the flags are unusable if they overlap.

[mykbaker]

This issue is 1.5 years old, any update on a built in fix? This is not really an enhancement but a bug fix since the flags are unusable if they overlap.

[niketh90]

Any updates on flag overlap fix?

[niketh90]

Any updates on flag overlap fix?

[TorsteinHonsi]

@pawelfus

[TorsteinHonsi]

@pawelfus

[TorsteinHonsi]

I applied the Highcharts.distribute algorithm to distribute the stacks along the X axis. See the change in action here: http://jsfiddle.net/highcharts/vu89r1fo/1/ .

[TorsteinHonsi]

I applied the Highcharts.distribute algorithm to distribute the stacks along the X axis. See the change in action here: http://jsfiddle.net/highcharts/vu89r1fo/1/ .

[kuerbiskern]

The change works very well when having only some flags, well done.

However, charts with a lot of flags become unusable, see http://jsfiddle.net/o4hpdnct/
Before change 57c8107, flags overlapped and i needed to zoom to see them, but it looked okay and worked very well. Now, flags are distributed only in x (they do not stack) and spread along the whole screen.

Is there an option to modify or turn this flag-distribution behavior off
(e.g.below a certain zoom level, or set a certain distribution limits)

Thanks

[kuerbiskern]

The change works very well when having only some flags, well done.

However, charts with a lot of flags become unusable, see http://jsfiddle.net/o4hpdnct/
Before change 57c8107, flags overlapped and i needed to zoom to see them, but it looked okay and worked very well. Now, flags are distributed only in x (they do not stack) and spread along the whole screen.

Is there an option to modify or turn this flag-distribution behavior off
(e.g.below a certain zoom level, or set a certain distribution limits)

Thanks

[TorsteinHonsi]

Thanks for your suggestion, yes of course we need an option to toggle this. Added the option called allowOverlapX that defaults to false. See http://jsfiddle.net/o4hpdnct/1/.

[TorsteinHonsi]

Thanks for your suggestion, yes of course we need an option to toggle this. Added the option called allowOverlapX that defaults to false. See http://jsfiddle.net/o4hpdnct/1/.