LucyLePrevost
Posts: 2
Joined: Wed Mar 30, 2022 1:21 pm

Irregular Date Intervals - X-axis

I have a monthly chart currently using the Highchart Stock component. Each value is on last day of the month.

A new requirement is to show monthly for complete months but show daily data for the current month as we have a daily series too. When I add the daily data into the current series, the chart isn't behaving how I would like it to.

Current monthly behavior:
Capture.PNG
Capture.PNG (37.54 KiB) Viewed 1572 times
New behavior:
Capture2.PNG
Capture2.PNG (36 KiB) Viewed 1572 times
I would like something like the below demo but for the Stock Chart.
https://www.highcharts.com/demo/spline-irregular-time

I would like it to continue to show monthly axis labels but just show more data points at the end. I don't want the space between the x-axis labels to increase in size. Is this possible pleas?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Irregular Date Intervals - X-axis

Hi LucyLePrevost,

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

Please create a live demo with the issue. You can start here:
https://jsfiddle.net/BlackLabel/y9eutvzn/

Regards!
Mateusz Bernacik
Highcharts Developer
LucyLePrevost
Posts: 2
Joined: Wed Mar 30, 2022 1:21 pm

Re: Irregular Date Intervals - X-axis

Hi,

Thank you for the reply.

I have an example for you here: https://jsfiddle.net/1L8sh36t/3/

Ideally what I would like is that the labels at the bottom were montly, and the daily data points at the end to be closer together to reflect the daily frequency rather than monthly. The same behavior as this chart: https://www.highcharts.com/demo/spline-irregular-time

Thank you
Lucy
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Irregular Date Intervals - X-axis

Hi LucyLePrevost,

If you want irregular point interval or rather realistic distance between the points relative to their data, then you need to disable ordinal option, which is enabled by default for stock charts.
Demo: https://jsfiddle.net/BlackLabel/uon3gsjf/
API reference:https://api.highcharts.com/highstock/xAxis.ordinal

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
ciprian.ilie
Posts: 3
Joined: Tue Apr 05, 2022 10:07 am

Re: Irregular Date Intervals - X-axis

Hi Mateusz,

This looks great, with one slight niggle...

Would it be possible to keep the x-axis labels to only those set in the data series, rather than automatically fill in the gaps. In the demo, on the initial load we can see the labels as "Apr 20", "Jul 20" etc... but if we zoom to "6m" the labels automatically adjust to "19 Jul", "2 Aug", "16 Aug". These values are inferred and not in the "data" array.

Thanks,
Ciprian
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Irregular Date Intervals - X-axis

Hi ciprian.ilie,

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

Yes, it is possible and to do that you should use tickPositioner callback function. However, for some data sets including this one ticks can overlap.
Demo: https://jsfiddle.net/BlackLabel/xvktc60j/
API reference: https://api.highcharts.com/highcharts/x ... Positioner

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
ciprian.ilie
Posts: 3
Joined: Tue Apr 05, 2022 10:07 am

Re: Irregular Date Intervals - X-axis

Hi Mateusz,

Follow up question on this; is it possible to line the ticks on the X axis to the Month Ends? Default behaviour seems to be to line up to the 1st day of the month.

Thanks,
Ciprian
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Irregular Date Intervals - X-axis

Hi Ciprian,

By default ticks are calculated based on series data, they don't necessary start on 1sr day of the month. In my previous example ticks show first day of the month because you asked if it was possible to show ticks with values the same as in data array, and values in array were mostly the first days of the month. If you want the values to show end of the month you can use tickPositioner too, you just need to adjust retuned values..
Demo:https://jsfiddle.net/BlackLabel/d6cbuyzo/
API reference: https://api.highcharts.com/highstock/xA ... Positioner

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”