shalini
Posts: 12
Joined: Wed Jun 01, 2022 10:01 am

Equally spaced columns

Hi,

I want to place all columns equally spaced in a graph irrespective of interval between them.

As of now my graph looks like:
uneually spaced columns.PNG
uneually spaced columns.PNG (32.33 KiB) Viewed 262 times


But it should be like
Equally spaced columns.PNG
Equally spaced columns.PNG (50.04 KiB) Viewed 262 times
Please help me out in this,

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

Re: Equally spaced columns

Hi shalini!
Thanks for contacting us with your question!

You are looking for xAxis.ordinal property, which makes sure that points are spaced equally regardless of the time, distance and different similar factors. It is available in the Highstock package. You can check the simple demo below.

Demo: https://jsfiddle.net/BlackLabel/9aupzbqj/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
shalini
Posts: 12
Joined: Wed Jun 01, 2022 10:01 am

Re: Equally spaced columns

Hey,

Thank you for stepping in for help, now columns are equally spaced. But labels for columns are messing up
labels.PNG
labels.PNG (20.28 KiB) Viewed 249 times
I want labels for each respective column in slanted format as shown below
Equally spaced columns.PNG
Equally spaced columns.PNG (50.04 KiB) Viewed 249 times
Thanks in advance.

Regards,
Shalini
shalini
Posts: 12
Joined: Wed Jun 01, 2022 10:01 am

Re: Equally spaced columns

Please help me to add labels under each column.

Regards!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Equally spaced columns

shalini,
In your case, you should use xAxis.tickPositioner function to calculate ticks along with xAxis.ordinal set to true. To rotate labels you can use xAxis.labels.rotation property and set and as you would like to or use the default setting of auto-rotation labels on xAxis based on chart width (or set it individually). You can read more about these properties in the API documentation.

Demo: https://jsfiddle.net/BlackLabel/p3vtz25u/
API Reference: https://api.highcharts.com/highstock/xA ... Positioner
https://api.highcharts.com/highstock/xA ... s.rotation
https://api.highcharts.com/highstock/xA ... toRotation

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer
shalini
Posts: 12
Joined: Wed Jun 01, 2022 10:01 am

Re: Equally spaced columns

Hi,

This solution fits my requirement, Thanks for your time and help.

Regards,
Shalini
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Equally spaced columns

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”