Disproportionate column stacks

[akbnz89]

Hello there,

I've noticed that some of the columns on the graph are disproportionate. I've attached an image as an example.

Is there an option to resolve this?

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

In this demo, everything seems to work fine: https://jsfiddle.net/BlackLabel/xLqpvye4/

Could you please try to reproduce this in an online code editor like JSFiddle so I can take a look?

It's worth keeping in mind that there are different settings for column.stacking as explained in the API - https://api.highcharts.com/highcharts/s ... n.stacking

Depending on which one you use, your columns will be stacked based on a different method.

Please let me know if that helps.

Best regards!

[akbnz89]

Here is a demo of my implementation: https://jsfiddle.net/gLp97eh6/4/

I do understand that the usage of logarithmic view will compress some of the stacks so they fit properly on the Y axis but is there any work around as this is kind of confusing. From a first look you might get the wrong impression. Look at the first column, the bottom stack is with value of 2 and is larger than the top stack which holds a value of 5.

[jakub.s]

Hi,

Thanks!

I fully understand now. The column stacks do not seem to fit well with the logarithmic axis, but that's the default behavior of the logarithmic axis - the yAxis values stretch/shrink (so do the points on the axis).

I'd advise you stick to a standard yAxis if you can.

Could you please tell me whether using a logarithmic axis is a requirement for your project, and if yes - why is it a requirement? I feel like stacked columns with logarithmic axis is very rarely used as it's not pretty intuitive for the viewers.

Best regards!

[akbnz89]

The initial problem that we were trying to resolve was that in some cases we could have a column that holds a larger value in comparison to the rest of the columns, which will cause the rest of the columns to shrink to a level that they are almost invisible. That is why i switched to the logarithmic view. However, the view introduced another problem that does not seem logic to myself, nor to the people that are willing to use the charts. Our company is looking at purchasing your library but we can't really go forward without having a solution.

This is an example of the problem i was experiencing before we changed to logarithmic view.

https://jsfiddle.net/frvkc8om/2/

[jakub.s]

Hi,

Thanks for sharing!

You're absolutely right, now I understand what's the problem.

The good news is that we have a broken-axis.js module which allows you to create a "break" in your axis which means that one column which is extremely large should not disrupt the other, smaller columns.

Here's a simple demo: https://jsfiddle.net/gh/get/library/pur ... ak-simple/

Here's an extended demo for your example: https://jsfiddle.net/BlackLabel/3hs47dbe/

Here's the API reference: https://api.highcharts.com/highcharts/yAxis.breaks

Please do not hesitate to ask in case you have any problems with implementing it in your project. I'll be happy to help.

Best regards!

[akbnz89]

I am sorry but i think that your extended demo doesn't really solve the problem with the disproportionate stacks. If you look at the second column the top bit holds a bigger value but it appears smaller in size and that is my main concern.

[jakub.s]

You're absolutely right, that was my mistake - I created a break which included not only the tallest of the columns, but also the green ones which "appeared smaller in size".

Here's a new demo: https://jsfiddle.net/BlackLabel/n5b2k9fg/

Please check it out and let me know if that solved the problem.

Best regards!

[akbnz89]

I've managed to implement the breaks, however it seems like there is a bug (or maybe i haven't set things correctly) with the break lines when using zoom.

As you can see it all looks good until i zoom the columns on the right hand side.



https://i.ibb.co/qyvN7hq/2023-10-04-13-15.png

[jakub.s]

Hi,

You're absolutely right. The broken-axis does not take zooming into account.

I've created a GitHub issue for it here: https://github.com/highcharts/highcharts/issues/19885

In the meantime, I've prepared a simple fix for you: https://jsfiddle.net/BlackLabel/2eryvjzh/

Please try it out and let me know if that solves it for you.

Regards!

[akbnz89]

The fix that you have suggested tackled the problem and with that i believe my implementation is completed.

Thank you very much for the support!

[jakub.s]

I'm glad I could help.

Do not hesitate to ask in case you have any more Highcharts-related questions.

Regards!