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

Equally spaced columns

Wed Aug 17, 2022 8:25 am

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 109 times


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

Thanks in advance

hubert.k
Posts: 924
Joined: Mon Apr 11, 2022 11:48 am

Re: Equally spaced columns

Wed Aug 17, 2022 9:19 am

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

Wed Aug 17, 2022 9:49 am

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 96 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 96 times
Thanks in advance.

Regards,
Shalini

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

Re: Equally spaced columns

Thu Aug 18, 2022 7:16 am

Please help me to add labels under each column.

Regards!

hubert.k
Posts: 924
Joined: Mon Apr 11, 2022 11:48 am

Re: Equally spaced columns

Thu Aug 18, 2022 8:02 am

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

Thu Aug 18, 2022 9:42 am

Hi,

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

Regards,
Shalini

hubert.k
Posts: 924
Joined: Mon Apr 11, 2022 11:48 am

Re: Equally spaced columns

Thu Aug 18, 2022 10:39 am

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”