Pramod N
Posts: 4
Joined: Tue Feb 13, 2024 10:04 am

How to set first starting point on X Axis

Hi ,

I am trying to solve a scenario where X-Axis labels need to be started from one particular data point (this can change dynamically)

https://jsfiddle.net/r0o624xf/
See example below (check link and then read description below -

Lets say for one condition I want to start X-Axis label from 3rd data point ("3/17") and then step 3.
For another condition I want the plot to start from 5th data point ("5/17") and then step 6.

This should work without affecting the one-on-one mapping with y-axis points and on resizing as well.

Is there any way to achieve this ?

Thanks,
Pramod N
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to set first starting point on X Axis

Welcome to our forum and thanks for contacting us with your question!

You can use xAxis.tickPositioner to create custom positions, here based on startingPoint and step variables that I've added, see:

Demo: https://jsfiddle.net/BlackLabel/49htendw/

Let me know if that was what you were looking for!
Kind regards
Jakub
Pramod N
Posts: 4
Joined: Tue Feb 13, 2024 10:04 am

Re: How to set first starting point on X Axis

Hi Jakub,

Thanks it helped.
Also, had a query for this again - so now i see am able to fix the labels and on resize as well its not disappearing. However, lets say if the labels where in larger numbers(like 1000s of them), then since i want all labels, on resize i see they get clumsy.
Is there a way to include labels( like position remains as it is) but we give some space between them on resize. This should happen dynamically.

I tried to give label formatting, but with that am running into issue where the x-axis labels become empty and nothing is displayed.
So your above approach worked on resize, its not hiding any labels. But its getting clumsy on resize, which can be done dynamically.

any way to solve this ?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to set first starting point on X Axis

Hi!

You can dynamically calculate the step based on the axis range, see:

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

Let me know if that was what you were looking for!
Kind regards!
Jakub
Pramod N
Posts: 4
Joined: Tue Feb 13, 2024 10:04 am

Re: How to set first starting point on X Axis

Hi Jakob,

Thanks, but no. This was not what i was looking for. Let me explain with an example.

Lets say I have set the starting position and the step size dynamically. So it will display those positions in the chart.
Now when I resize, if there are lot of positions , then it becomes clumsy.

What I want is, I want the step size and starting position to remain same. But while displaying on resize, the chart should adjust and display only certain positions out of the positions array.

Is this possible ?

Thanks,
Pramod N
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: How to set first starting point on X Axis

Hi!

Could you please elaborate a bit more about this behaviour? If I understand correctly, you want to remain the starting position and step, thus the amount of ticks will remain the same, as you're overriding their layout with tickPositioner, so it's not possible to do it this way.

Patiently waiting for your reply.
Best regards!
Jędrzej Ruta
Highcharts Developer
Pramod N
Posts: 4
Joined: Tue Feb 13, 2024 10:04 am

Re: How to set first starting point on X Axis

Hi,

Apologies for late reply.
Okay, makes sense. Noted.
Client agreed to the change you proposed earlier.


Thanks,
Pramod N

Return to “Highcharts Usage”