New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flags overlap when they are close date to each other #4674

Closed
bharathd opened this Issue Oct 20, 2015 · 16 comments

Comments

Projects
None yet
7 participants
@bharathd

bharathd commented Oct 20, 2015

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

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 28, 2015

Contributor

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

Contributor

pawelfus commented Oct 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@bharathd

bharathd Oct 28, 2015

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 commented Oct 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 28, 2015

Contributor

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.

Contributor

pawelfus commented Oct 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@niketh90

niketh90 Oct 29, 2015

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 commented Oct 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@bharathd

bharathd Oct 29, 2015

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 commented Oct 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 29, 2015

Contributor

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).

Contributor

pawelfus commented Oct 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@bharathd

bharathd Oct 29, 2015

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 commented Oct 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 30, 2015

Contributor

Connected UserVoice idea.

Contributor

pawelfus commented Oct 30, 2015

Connected UserVoice idea.

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 5, 2015

Contributor

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!

Contributor

pawelfus commented Nov 5, 2015

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 comment has been minimized.

Show comment
Hide comment
@prettycode

prettycode Mar 20, 2017

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

prettycode commented Mar 20, 2017

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

@mykbaker

This comment has been minimized.

Show comment
Hide comment
@mykbaker

mykbaker May 1, 2017

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 commented May 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@niketh90

niketh90 Nov 6, 2017

Any updates on flag overlap fix?

niketh90 commented Nov 6, 2017

Any updates on flag overlap fix?

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi
Collaborator

TorsteinHonsi commented Nov 8, 2017

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Nov 8, 2017

Collaborator

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/ .

Collaborator

TorsteinHonsi commented Nov 8, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kuerbiskern

kuerbiskern Nov 16, 2017

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 commented Nov 16, 2017

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 added a commit that referenced this issue Nov 20, 2017

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Nov 20, 2017

Collaborator

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/.

Collaborator

TorsteinHonsi commented Nov 20, 2017

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/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment