Set Time format according local time format

[Harshad_919]

Hi
I am plotting the line chart with x-axis type as Datetime. But it always shows the 24hr clock. But I want to set it dynamically (12 hr or 24 hr)according to the machine. How I can do this?

[mateusz.b]

Hi Harshad_919,

Thanks for contacting us with your question.

X axis intervals depend on your data granuality. To tell more about it please create a simplified working demo with you chart and sample data. You can start here: https://jsfiddle.net/BlackLabel/Lcf36abd/

If you want to set axis interval programatically you can use options like tickInterval:
https://api.highcharts.com/highcharts/x ... ckInterval

Also, please provide me with some more details about your chart configuration. Should axis date range be equal to 12 or 24 hours or just single axis tick?

Regards!

[Harshad_919]

hi
Please refer below example
https://jsfiddle.net/wqno06m2/

X-axis labels are always shown in 24 hr clock format even our machine has 12 hr clock.

So I just want to show x-axis labels based on 12 hr clock or 24 hr clock. How I can set axis labels format dynamically based on the machine time format?

[mateusz.b]

Hi Harshad_919,

I think I must have misunderstood you initially. I was thinking that you want to make data span across specific time, 12 or 24 hours, but it seems that you want to adjust time format based on local clock system. If that is the case, you want to use dateTimeLabelFormats to format labels.
Demo: https://jsfiddle.net/BlackLabel/s24ckw13/
API reference: https://api.highcharts.com/highcharts/x ... belFormats,
https://api.highcharts.com/class-refere ... dateFormat

If you want to set it dynamically, you need to find out user localization and then update chart with appropriate set of dateTimeLabelFormats options. In Highcharts it doesn't happen automatically.

Let me know if that was what you were looking for!
Regards!

[Harshad_919]

Thank you so much @mateusz.b

Can you please give me example for updating chart with appropriate set of dateTimeLabelFormats options based on user localization?

[mateusz.b]

Hi Harshad_919,

I have created a demo showing how you can update dateTimeLabelFormats options:
https://jsfiddle.net/BlackLabel/4sfoj7pd/

Now all you have to do is find out user localization and add some conditional statements based on that. I can't really help you with that, because this is not a part of Highcharts, but I think you could try to make use of something like HTML Geolocation etc. For more accurate informations on this subject you should check related docs or ask on Stack Overflow.

Regards!