Skip to content
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
Closed

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

bharathd opened this issue Oct 20, 2015 · 16 comments

Comments

@bharathd
Copy link

@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
Copy link
Contributor

@pawelfus 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
Copy link
Author

@bharathd 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
Copy link
Contributor

@pawelfus 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
Copy link

@niketh90 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
Copy link
Author

@bharathd 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
Copy link
Contributor

@pawelfus 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
Copy link
Author

@bharathd 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
Copy link
Contributor

@pawelfus pawelfus commented Oct 30, 2015

Connected UserVoice idea.

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link

@prettycode prettycode commented Mar 20, 2017

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

@mykbaker
Copy link

@mykbaker 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
Copy link

@niketh90 niketh90 commented Nov 6, 2017

Any updates on flag overlap fix?

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Nov 8, 2017

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi 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
Copy link

@kuerbiskern 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
Copy link
Collaborator

@TorsteinHonsi 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants