Wrong distance between columns

[rise]

I realized a chart with columns, ordered by pointPlacement and pointRange.
I made a chart with columns whose locations are set via properties. But despite my efforts to place them at the same distance from each other, nothing comes of it. Some columns have a different distance from the specified one. How can I fix this problem?

[jakub.s]

Hi,

Thanks for the question.

By default, the column chart has equal distances between columns (https://jsfiddle.net/BlackLabel/jps0duc1/). So it's hard for me to help you without seeing your code.

Could you please send me a demo of this in an online code editor like JSFiddle?

Only then will I be able to help.

Best regards,
Jakub

[rise]

I can't show the real code because of NDA.
But this is a close example
https://jsfiddle.net/ms1awxu3/1/
Compare JAN and FEB groups. The distance between central columns is different.

[jakub.s]

Thanks for the demo!

However, I don't think I could find any undesired behavior. Here's what I saw:

Columns.png (37.89 KiB) Viewed 556 times

Also, could you tell me why are you using pointPlacement for each series? I don't think that's necessary for most charts.

What is your desired solution?

Maybe I could propose something then.

Regards,
Jakub

[rise]

Thanks for the demo!

However, I don't think I could find any undesired behavior. Here's what I saw:

I marked the different spaces on the screenshot below.

Also, could you tell me why are you using pointPlacement for each series? I don't think that's necessary for most charts.

What is your desired solution?

Maybe I could propose something then.

There are the compared data sets. The compared columns must be placed one behind one another. Just like here.
That's why I use pointPlacement.

And, there is one problem. I didn't show it in this example. If one dataset has a value that is smaller than the compared value in another dataset, the smaller column with this value must be placed in front of the compared pair.
I didn't find a way to change the z-index for single columns in a series. Thus, I prepare front and back series with mixed data and show it.
But, because of this, I have a problem with the legend and column clicking. Because I need to manipulate columns with the same data, that is placed in different series. I realized custom clicks, but they are uncomfortable in support and update.

If you know how to realize this logic without data mixing between series, I will be happy.

[rise]

And some more. If compared values have the same size, the chart shows one striped column.

[jakub.s]

Hi,

Thanks!

Unfortunately, there is no Highcharts API option to achieve it (for now). By setting plotOptions.column.stacking to 'normal' you will receive a similar result but without all the complications. Here's a demo: https://jsfiddle.net/BlackLabel/g7hadnsu/

I believe there should be a stacking option to stack the columns the way you describe so I'll talk to our developers about this additional option, add a GitHub feature request and get back to you when it's ready.

But for now, we need to figure out an alternative solution.

1. You could either use stacking = 'normal' (you'll not have any of the placement or legend problems) but the chart is not going to be exactly the same as you desire.

2. You could stay with your chart and implement a lot of the logic yourself (unfortunately, I don't see a way to surpass this series mixing that you mentioned - it's probably the only way for now to achieve this result).
By experimenting with pointPlacement values I found that 0.3 and 0.1 work well (and give same distances). Here's a demo: https://jsfiddle.net/BlackLabel/noz5wmfd/

Best regards,
Jakub

[rise]

Hi Jakub!

Unfortunately, there is no Highcharts API option to achieve it (for now). By setting plotOptions.column.stacking to 'normal' you will receive a similar result but without all the complications. Here's a demo: https://jsfiddle.net/BlackLabel/g7hadnsu/

I believe there should be a stacking option to stack the columns the way you describe so I'll talk to our developers about this additional option, add a GitHub feature request and get back to you when it's ready.

But for now, we need to figure out an alternative solution.

1. You could either use stacking = 'normal' (you'll not have any of the placement or legend problems) but the chart is not going to be exactly the same as you desire.

Unfortunately, the stacking chart can be used only if the chief agrees on placing the data one over another. But he doesn't want.

By experimenting with pointPlacement values I found that 0.3 and 0.1 work well (and give same distances). Here's a demo: https://jsfiddle.net/BlackLabel/noz5wmfd/

You fixed the distances for columns on my screenshot but broke it for some different columns.
I used pointPlacement on a very simple column chart with two series. This problem has appeared again.
No doubt, the pointPlacement function has a bug. Could you notify the developers about it? Or, shall I do it myself?

[jakub.s]

Sure, I'll notify our developers.

I'll talk to them and create a GitHub issue and send you a link.

In the meantime could you please send me a demo where you noticed this pointPlacement bug?

That'll be helpful.

Regards,
Jakub

[rise]

Hi Jakub!

I prepared the simplest example:
https://jsfiddle.net/563eaLcg/
The JAN, JUN, JUL, and DEC months have a distance between columns inside pairs smaller than other months.

[jakub.s]

I've reached out to our developer team.

If you want to track the progress of this issue, here's a link: https://github.com/highcharts/highcharts/issues/18724

In the meantime do not hesitate to ask if you have any more questions.

Best regards,
Jakub

[rise]

Ok.
Thanks, Jakub.

[jakub.s]

No problem.

Hope it gets solved quickly.

Regards,
Jakub