shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

Hi All,

I need to plot a historical stock chart with one data point.
Example: 1666659407 in America/new_york timezone is 24th October 2022, 20:56:47, so the graph should be plotted as
22:00 |
21:00 | *
20:00 |
19:00 |---------------------------
23/10 24/10 25/10
I am trying to send x,y in epoch milliseconds [1666659407000, 1666659407000]
Demo: https://jsfiddle.net/0enwp25q/3/

However this is not working as expected. What is the best way to plot such a series
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

Hello shreshtha,

Thanks for contacting us again!

I'd suggest using the scatter series as it seems to be ideal for rendering a single point. To adjust the proper axes ticks (days for the x-axis and hours for the y-axis), you can simply set the min and max properties to define the range between the first and the last tick, and the tickInterval property to set the correct intervals (spaces) between them (on both axes). I've updated your example: https://jsfiddle.net/BlackLabel/urzjaf7w/.

As you can see, on the x-axis, the properties are defined as the days in milliseconds, and on the y-axis, the properties are defined as the hours also in milliseconds. The point's x and y values are also adjusted.

Let me know if you found it helpful,
Kind Regards!
Kamil Kubik
Highcharts Developer
shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

Thank you Kamil for the reply.

I have modified the data to [1669994528000, 1669994528000] that is both x and y as epoch , in the demo you shared and I start facing the same issue.
Demo: https://jsfiddle.net/xsLzg7dc/

Also added the min, max and tickinterval in the original demo shared by me, but still face the same issue.
Demo: https://jsfiddle.net/f24t93mq/1/

Can you please suggest how it can be handled.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

What you are missing is the wrong y property as you defined it as 1669994528000 which refers to the specific date. Instead, you should pass the specific hour defined in milliseconds as shown in the demo from my previous post. I've passed there the 16 * 3600 * 1000 value that refers accordingly to the hour * seconds in 1 hour * 1000 (convert to the milliseconds).

To summarize, try to pass the 57600000 or mentioned 16 * 3600 * 1000 value as your data y property to see the rendered point.

Sharing the demo once again: https://jsfiddle.net/BlackLabel/tpuy5noz/.

Let me know if that works for you,
Regards!
Kamil Kubik
Highcharts Developer
shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

My requirement is to plot 1669994528000 i.e 02/12/2022 on x axis and 3:22:08 PM on y axis. As per above example I need to write an extra logic to extract the hours from 1669994528000. Hence I am looking for a way in which I can use 1669994528000 to plot yAxis as well. Is is possible use 1669994528000 only?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

Thanks for the clarification, unfortunately, there is a need to handle it with a custom formatting logic and provide the y value as I mentioned above. You can do it either before passing the data or on the initial chart's load using e.g. build-in chart.events.load method. I've updated your example showing a potential, custom solution: https://jsfiddle.net/BlackLabel/n2m1aL6p/.

API:
- https://api.highcharts.com/highstock/chart.events.load
- https://api.highcharts.com/class-refere ... int#update

I hope you will find it useful,
Regards!
Kamil Kubik
Highcharts Developer
shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

Thanks a lot Kamil this helps.

Regards,
Shreshtha
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: yAxis with dd/mm/yyyy and xAxis with HH:MM for data value in epoch

That's great to hear!

Feel free to ask any further questions!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”