Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Display only 5 timestamps when in normal mode

I have two questions related to time.

1) Time on the x-axis should display only 5 timestamps when full screen (when in normal mode, without zoom)
2) How do I make time on the x-axis show local time?

Fiddle: https://jsfiddle.net/w9zatdhe/26/

Tried below for showing local time: But dint work. Could be because I use category in x-axis.

time: {
useUTC: false
},
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Display only 5 timestamps when in normal mode

Hello,

Thanks for contacting us with your question!

To set a strict number of ticks per axis, use the tickAmount option for the axis. See: https://api.highcharts.com/highcharts/xAxis.tickAmount

Consider whether you should use time as part of your data rather than a category. What you want to do goes against the idea of using categories. If dates would be defined as x-values of points, useUTC should work fine.

Regards!
Dawid Draguła
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Display only 5 timestamps when in normal mode

Hi,

Thank you for the reply. Can you please correct me if my understanding is wrong.

1)"Consider whether you should use time as part of your data rather than a category" -> does this mean using type: 'datetime' instead of 'category'.
2)"If dates would be defined as x-values of points, useUTC should work fine" -> does this mean if only dates are used on x-axis, useUTC will work (not for time)? or again does this mean using type: 'datetime' instead of 'category' will help set local time using useUTC. Thanks in advance.

Also, as per suggestions I tried setting tickAmount for x-axis. But does not seem to work. Please find the fiddle: https://jsfiddle.net/g7xwrv9p/2/
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Display only 5 timestamps when in normal mode

Hi,
does this mean using type: 'datetime' instead of 'category'?
Unfortunately, tickAmount option only has an effect on linear-type axes, so datetime, logarithmic and category axes are not affected.

Categories are an array of labels on an axis for successive points. If you want to limit their number to 5, you should define exactly 5 categories. However, if you want to use a defined tickAmount value, you might consider entering the time as x-values of points, but without setting the axis type to datetime. Like this: https://jsfiddle.net/BlackLabel/utq0wka6/

In the demo above, however, you can notice a change in the appearance of the chart. This is because the time values are interpreted numerically this time, so if the time was the same in two categories, both points lie on one vertical line.
does this mean using type: 'datetime' instead of 'category' will help set local time using useUTC?
Yes. But only for datetime values formatted by default. You're using a formatter there, so even if you were to drop the category at the expense of proper datetime values, you're overriding that logic.

Unfortunately, it's hard for me to advise you more. If I had known what are you striving for and why maybe I could have offered you any alternatives.

Kind regards!
Dawid Draguła
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Display only 5 timestamps when in normal mode

Thank you for the explanation.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Display only 5 timestamps when in normal mode

You're welcome!

In case of any further questions, feel free to contact us again.
Best regards!
Dawid Draguła
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Display only 5 timestamps when in normal mode

Hi,

Is it possible to modify your demo https://jsfiddle.net/BlackLabel/utq0wka6/ to suit my need?

As I mentioned that I display multiple charts in a single page, and they share a common x-axis.

1) Can you modify to set time as x-values of points in setOptions instead of 'chartEp0'. So that setOptions x-axis values can be used across all charts, instead of setting x-axis for each chart.

2)When hovered over, I want tooltip's x-axis value to be displayed as proper date time e.g., "11/23/2022 14:38:04.
Like in this fiddle: https://jsfiddle.net/s2jox17k/ .
Rite now it is displayed as '1669203484000', which is not useful.

3) Also, when zoomed in I want all values to be displayed on x-axis. TickAmount that was set as 5, should be ignored.

Thank you.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Display only 5 timestamps when in normal mode

Hi,

I could do that if I knew what your data means and how it relates to time. Your points have only the enigmatic y value defined and each chart has a different amount of them, so I don't know what time (x-value) should be specified for which point.
See: https://jsfiddle.net/BlackLabel/gnfhLakx/

If you only want to define y values and x values should be calculated automatically, you can set the start date (pointStart) and time interval (pointInterval) between successive points in Highcharts. Then the constraint is that there is one interval value for all points.
Demo: https://jsfiddle.net/BlackLabel/h69j0xc2/

I'm sorry for such a general answer again, but I still don't have enough information from you to be able to prepare any meaningful demo, and I can't figure out from your demo what the time (x) value of each point should be and this is important if you want to limit some of them and leave them for each of the charts when each of them has a different amount of points.

Regards!
Dawid Draguła
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Display only 5 timestamps when in normal mode

Problem is x values should not be calculated automatically. Sorry for not explaining how my data relates to time.

If x-axis have 14 datapoints, each Y-axis will also have 14 datapoints (if no data, null values will be appended as shown in the below fiddle).
For e.g.: Last but one value in all of the y axis will relate to last but one label '14:38:17' of time.

Please see the fiddle: (you could see 14 datapoints in each)
https://jsfiddle.net/o08x6tw7/11/

Will be helpful if your demo can be modified https://jsfiddle.net/BlackLabel/utq0wka6/ to adapt the three points asked. Thank you.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Display only 5 timestamps when in normal mode

Hi,

Thanks for the clarification.

As I said, each point must have its x value, but in order not to enter them into the series every time, in the demo below I made a simple function that fills the point data with values from the time constant.

I used datetime type, therefore tickAmount is not available. You can use tickInterval instead (https://api.highcharts.com/highcharts/x ... ckInterval), or specify the position of each tick using tickPositions (https://api.highcharts.com/highcharts/x ... kPositions).

In the afterSetExtremes function, I reset the tickPositions so that they are no longer limited by this option.

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

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”