lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

How to deal with flags overlapping problem?

Hey everyone!

My chart should display many flags, but I want to display without overlapping between flags. but I found some flags overlap. How can I display without overlap between flags? Let me know how to solve it.

Image

Regards
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

Hello there!

Welcome to our forum and thank you contacting us with your question.

I think that you are looking for the series.flags.allowOverlapX property. Set it to false, and it should resolve your issue.
API Reference: https://api.highcharts.com/highstock/se ... owOverlapX

Do not hesitate to contact us with any other questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

Hi!

Thanks for the prompt reponse. The thing is that allowOverlapX only works when the data is strictly equal, so won't work in this case.

Is there any other solution?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

I'm not sure what you mean by strictly equal data, do you mean when the flags are in the exact same position on the chart?

Please reproduce your code in an online editor such as JSFiddle, I'll take a look at it and try to guide you in a right direction.

Thanks!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

I uploaded a chart here:

https://jsfiddle.net/wqL493po/1/

They point to the same data, but C is behind E, is there any way to fix that?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

Thank you for sharing you demo with us. Please remove (or set to a different number value) the stackDistance property in line 14. That will fix the overlap problem for you.

https://jsfiddle.net/BlackLabel/e3ksphn6/

Best regards!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

Hi,

It's me again, you are right in that example it's work great. Now, I replicated the same chart that is causing me the flags issues, can you please help me figguring out, what's happening?

https://codesandbox.io/s/priceless-sun- ... api/api.js

StackDistance property it's on line 6063

Regards,
Lucas
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

Hi there!

In short, the allowOverlapX and stackDistance properties (like many others) that are set on a particular series object, refer only to that series. So only the flags in this series will not overlap with each other (but can overlap with other flags from different series).

To fix that, I would suggest putting all of your flags in one series if that's possible.

Regards!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

Hi, thanks for the quick response!

But in this case the only flags that are overlapping are the "flags" type, that they are all included in the same series object, so it should be working..
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

I have enabled the legend in your project to show you how it's working.
The series is an array of objects, and every object in that array is a separate series. Every position in your legend is a different series.
Take a look here: https://codesandbox.io/s/hidden-dream-1 ... api/api.js

If you would like to have all of your flags in one series, then they would have to be in one object in that array.

I hope that I made that clear, but in case of any questions, do not hesitate to write here!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

Hi,

Sorry for being late, it's possible to have different type of series in one object? How can I achieve that?

Regards,
Lucas
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

Hi there,

Good to hear from you again!

I'm not sure what you mean by 'one object', do you mean one Highcharts.chart object or series object?

Do you mean something like that?
Multiple series types in one series object: https://jsfiddle.net/BlackLabel/hL01q9rf/

Best regards!
Kamil Musiałowski
Highcharts Developer
lucasbara
Posts: 10
Joined: Fri Sep 02, 2022 2:10 pm

Re: How to deal with flags overlapping problem?

In this case, we have all the flags in one series object https://codesandbox.io/s/hidden-dream-1 ... 884-261890
And flags.allowOverlapX property doens't work
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to deal with flags overlapping problem?

The are in one series array, but this array contains multiple objects with series type: 'flag'. Therefore you are experiencing the overlap, and see so many series in the legend.
Kamil Musiałowski
Highcharts Developer
mnc
Posts: 1
Joined: Wed Oct 12, 2022 12:10 pm

Re: How to deal with flags overlapping problem?

Hi guys! I work with Lucas and we found a solution using this plugin: http://jsfiddle.net/p037jdyj/

However the poles of the elevated flags cover some other flags.

Is there any solution to this? I tried with zIndex but couldn't make it work. Maybe removing the flagpoles? Is that even possible?

Thanks!

Image

Return to “Highcharts Stock”