usrokkk
Posts: 3
Joined: Thu Sep 22, 2022 1:02 pm

how to set min & max datetime on xAxis label

Thu Sep 22, 2022 1:22 pm

Hi,

I want to make highcharts with xAxis always showing the start date and end date of my data.

Here's the jsfiddle that I made.
Example :
http://jsfiddle.net/2bwzv47n/4/

I want to always set xAxis label start from 05 July 2015 and end on 22 October 2017

Regards!

kamil.m
Posts: 643
Joined: Thu May 19, 2022 1:33 pm

Re: how to set min & max datetime on xAxis label

Thu Sep 22, 2022 1:31 pm

Hello there,

Welcome to our forum and thank you for contacting us with your question.

You can easily achieve that by setting the xAxis.min/max properties with your desired dates. Built in JS function called Date.UTC() will definitely be helpful here.

DEMO: http://jsfiddle.net/BlackLabel/hk9214wa/
API Reference: https://api.highcharts.com/highcharts/xAxis.min

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer

usrokkk
Posts: 3
Joined: Thu Sep 22, 2022 1:02 pm

Re: how to set min & max datetime on xAxis label

Fri Sep 23, 2022 2:23 am

kamil.m wrote:
Thu Sep 22, 2022 1:31 pm
Hello there,

Welcome to our forum and thank you for contacting us with your question.

You can easily achieve that by setting the xAxis.min/max properties with your desired dates. Built in JS function called Date.UTC() will definitely be helpful here.

DEMO: http://jsfiddle.net/BlackLabel/hk9214wa/
API Reference: https://api.highcharts.com/highcharts/xAxis.min

Let me know if that's what you were looking for,
Best regards!
thanks for your response.

but for the xAxis label still not specifying the date I want.
the date on the xAxis label shows start label xAxis 01 July 2015 & end label xAxis 01 july 2017

i want to show label xAxis like this image :
Screenshot from 2022-09-23 09-18-41.png
Screenshot from 2022-09-23 09-18-41.png (16.02 KiB) Viewed 29 times

kamil.m
Posts: 643
Joined: Thu May 19, 2022 1:33 pm

Re: how to set min & max datetime on xAxis label

Fri Sep 23, 2022 7:39 am

Hello again,

I'm sorry, I must have misunderstood your requirements. In that case, I would suggest using a tiny bit of custom code, to force the xAxis to show the first and last tick from your data, while removing some of the ticks in the middle.

The final logic is completely up to you. You can even hardcode all of the ticks values, to avoid some unwanted overlaps, etc.

DEMO: http://jsfiddle.net/BlackLabel/ctxLvy4o/
API Reference: https://api.highcharts.com/highcharts/x ... Positioner

Let me know if that's what you wanted to achieve,
Best regards!
Kamil Musiałowski
Highcharts Developer

usrokkk
Posts: 3
Joined: Thu Sep 22, 2022 1:02 pm

Re: how to set min & max datetime on xAxis label

Fri Sep 23, 2022 9:58 am

Hi kamil,

thank you very much, you help me a lot.
now I have another problem when the chart is zoom-in. I need to set tickStart and tickEnd when the chart is zoom-in.
can you solve this?

thank you for your patience..

kamil.m
Posts: 643
Joined: Thu May 19, 2022 1:33 pm

Re: how to set min & max datetime on xAxis label

Fri Sep 23, 2022 10:45 am

Oh, you are right about this one. I haven't tested it while zooming. I've changed the functionality a bit to make it more universal and responsive, take a look at it.

DEMO: http://jsfiddle.net/BlackLabel/zer2bqa9/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”