Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Hi there Community!
Check this example:
https://jsfiddle.net/Cortez/u8721acm/

Some x-axes values have only one point, while others might have two or more points. I want columns to be aligned with corresponding x-axis tick value no matter how many points / columns there are per x-axes value. I can not set 'grouping' to false, because it will make my columns overlapping one over another and I need them side by side.

Thanks in advance!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Hello Cortez!
We appreciate you reaching out to us!

There is a similar topic on our forum about feature you requested here: viewtopic.php?t=41896

If you won't find the answer there or you will have any problems please let me know.
Kind regards!
Hubert Kozik
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Hello hubert!
Thanks for your reply. From solutions, proposed in the topic from your link, only "core methods wrapped" solution can suit my purposes. But I have two concerns here:
1. How save is it? Could it potentially influence anything else? In my application there are lots of different chart types with vast variety of settings, so I do not want to break anything.
2. This solution lacks one important thing for me: I need all columns to scale to the same width no matter how many columns per group. Is it possible to achieve?

Many thanks in advance!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Cortez,

1) This is a safe approach, it is just a small modification of two core functions. You can read an article about extending Highcharts here: https://www.highcharts.com/docs/extendi ... highcharts If you have more charts, it should not affect them, but if yes, there is also a possibility to create a custom property, which will enable your changes - if you need something like that, please let me know. I created a demo, based on your data, you can check it here: https://jsfiddle.net/BlackLabel/bm6p1ea5/

2) If I understand you correctly it is working, just like you requested (simple demo here: https://jsfiddle.net/BlackLabel/k0agt41L/ ) Column will be resized based on its count.

Feel free to ask any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

hubert

1. Enabling / disabling this wrapper function based on some custom property sounds like what I need. How to achieve that?

2. I afraid I wasn't clear enough. What I need is all columns of the same width - if first group has three columns, second group has two columns and third group have only one column - all columns from all groups should be of the same width. But at the same time this width should not be hardcoded. I believe that the default behavior for columns is: when plot area is small, and there are lots of columns to display - then columns scale to be thinner to fit the space available, and vice versa. Also if for example all groups have only one column - then all columns scale to a maximum width available.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Cortez,

1) I have prepared a demo for you with custom property chart.hideEmptyColumns, which is responsible for enabling modifications in core functions. If this value is set to false (or just there is no value like that) everything will work with functions directly from Highcharts Core. If this value is set to true the custom plugin will start to work and hide gaps between columns. Please, check the demo below. All you need to add to your project is the IIFE function from the 1st to 178th line.

Demo: https://jsfiddle.net/BlackLabel/v9cb6r2u/

2) Yea, that's the description of actual behaviour (and from previous posts) of the chart. The column is taking the maximum space for it. You can see it in the above JS Fiddle demo by changing the new custom property from true to false a few times. If the value is set to false (equals to H.wrap disabled) columns are not taking maximum space and if true individual columns in the group are wider as is possible.

Let me know if that fits your requirement and in case of any further questions or misunderstandings feel free to contact me :)
Regards!
Hubert Kozik
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

hubert,

1. That demo with hideEmptyColumns property is awesome and exactly what I need. Thanks!

2. I apologize for not being clear enough with my requests and taking too much of your time.
What we currently have is this:
1.png
1.png (13.34 KiB) Viewed 1127 times
As you can see, groups 2, 3 and 4 have single column of max width available. Group 0 has two columns of medium width. Groups 1 and 5 have three columns of the narrowest width.
And what I need is all columns in the chart of the same width. I need every column in the chart to take width of the narrowest column.

Like this:
examples.png
examples.png (31.24 KiB) Viewed 1127 times
But I need to achieve this without hardcoding column width. See how on first example all columns are of the narrowest width, on second example all columns are of the medium width and on third example all columns are of the maximum available width? This is what I need.
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Or maybe it will help if I formulate it like this: I need all columns to take as much width, as they would take if we didn't hide empty columns (but be centered at the same time). :)
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Cortez,

Thank you very much for your clarification - now I understand everything correctly.

In the demo below all columns in the chart have the same width. Like you requested, every column in the chart is taking width of the narrowest column.

Demo: https://jsfiddle.net/BlackLabel/57fuakgz/

And remember I am here to help you, so you don't take too much time :)
Kind regards!
Hubert Kozik
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

hubert,

It is really close this time. Now the behavior is correct for your demo: when there are groups with three, two and one columns per group, - every column from any group take up width of the narrowest column in the chart (which is a column from the group with three columns).
But when I remove third column from groups 1 and 5, leaving only two or one column per group - columns are still of the narrowest width (like if the third column still was there): https://jsfiddle.net/Cortez/ay7k9zv6/9/
And if after that I remove second column from groups 0, 1 and 5, leaving only one column per group - columns are still of the narrowest width (like if the second and third columns still were there): https://jsfiddle.net/Cortez/ay7k9zv6/11/
And what I expect can be seen on the images in my message above (notice the difference in column widths on every image).
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Hello Cortez,

I'm sorry for the late reply - it took us some time to work on this solution, we even have found an improvement that you can implement right away!

Firstly, I got rid of one unnecessary wrap. We do have an API property called centerInCategory - so that will take care of filling the blank spaces between columns.

Secondly, to get the width column functionality working I have improved the getColumnMetrics method. You can find the custom functionality in lines 49-61.

DEMO: https://jsfiddle.net/BlackLabel/rez4a3kd/
API Reference: https://api.highcharts.com/highcharts/p ... InCategory

Please tell me if that's what you were looking for and thank you for your patience.
Best regards!
Kamil Musiałowski
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

kamil,

Wow, that 'centerInCategory' property does exactly what I need (except for width thing). Never knew it existed lol :)

I have two minor remarks concerning your width fix:
1) I believe it should only kick in when 'centerInCategory' property is 'true'. Otherwise it might cause some unexpected behavior: https://jsfiddle.net/Cortez/pzjhwq91/2/
I would even say that I would expect this width behavior be a natural part of 'centerInCategory' property logics. Maybe you consider to include it in future releases.
2) I believe this width hack might be more useful for future visitors if it were written fully in ES5 (your recent additions are in ES6) considering that the rest of the code and the library itself is ES5. Of course, those who needs can transpile it by their own :)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Hi,

I'm glad that you are happy with this property!

1) You are right! Our wrap should kick in with this property set to true, let me fix that real quick with a simple JS if statement.
DEMO (ES6): https://jsfiddle.net/BlackLabel/u7cjxvbq/
We decided earlier, that leaving it as it is (without adding this width adjustment feature) would be a better option, so for now, we are not planning on adding it to our core.
But feel free to post any feature requests on our GitHub page! With a sufficient amount of upvotes, we will consider it.
https://github.com/highcharts/highchart ... new/choose

2) Sure thing, thank you for caring about future users!
DEMO (ES5): https://jsfiddle.net/BlackLabel/xyq7khdt/

Best regards!
Kamil Musiałowski
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Wow, that is awesome. Now it works exactly how I need it!

kamil, hubert,

many thanks guys! You are awesome! Never seen such good customer support before!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Thank you for such a kind words!

In case of any other questions, you are more than welcome to contact us anytime,
Have a good day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”