silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Navigator xAxis - start and end "on tick" do not work

Hi,

is it possible to enable label also on the very left and right side of navigator? That means the very first and last tick. Nothing works for us so far.

We can use this demo for example:
https://jsfiddle.net/gh/get/library/pur ... basic-line

Thanks for help!
David
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi there,

As it says in the API - when navigator is enabled navigator.xAxis.startOnTick (and endOnTick) is always set to false.

But there is workaround that might suit you, please take a look at the Stack Overflow discussion linked below.

Stack Overflow: https://stackoverflow.com/questions/559 ... -highstock
API: https://api.highcharts.com/highstock/na ... tartOnTick

Let me know if that is what you are looking for,
Regards!
Kamil Musiałowski
Highcharts Developer
silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Re: Navigator xAxis - start and end "on tick" do not work

Thanks for reply. I get it, you can define your tickPositions array, but we have chart data of variable length. Sometimes 8000 points, sometime 60 points. Also another problem you can check in the demo is when you change size of the chart as a whole - I mean the browser window for example. It will still try to display same amount of ticks, but since the length of navigator is smaller, there ale overlaps.
We like the "out of the box" default adaptive behavior of positioning ticks. Isn't there really just a way to additionally display first tick on the left and last tick on the right, but otherwise keep the default behavior of ticks positioning?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi,

Thank you for pointing that out, you are absolutely right about larger data arrays.
In the Stack Overflow example, we were defining a fixed amount of ticks (fixed tickPositions array length) so that caused the browser window resize issue.

I have modified the demo, so basically now we take the original tickPositions array and manually insert first and tick from the data. Whenever you resize the browser or change the data length the tickPositons will be automatically calculated by Highcharts

DEMO: https://jsfiddle.net/BlackLabel/8e97yr5n/

Please test this solution with your data, and let me know if that is what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Re: Navigator xAxis - start and end "on tick" do not work

Yeah, that's much better solution I think. Anyway, there are still some overlaps of first and last tick with the adjacent ones in some cases. We will probably remove first and last tick calculated by the Highcharts as we are replacing them by our very first and last tick. With this adjusted solution, there should never be overlap I think. So thanks a lot, I consider this problem as solved!

Best regards,
David
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hello,

That's great to hear that! I'm glad that I could help you with that issue.

Please do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
r6190
Posts: 6
Joined: Wed Jan 31, 2024 4:27 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi! I am new to highcharts and I am also trying tickpositions for navigator. May I know which version of highcharts are you using for the demo "https://jsfiddle.net/BlackLabel/8e97yr5n/" ?

Thank you.
Last edited by r6190 on Wed Jan 31, 2024 4:37 pm, edited 2 times in total.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Navigator xAxis - start and end "on tick" do not work

Hi r6190,

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

This demo opens on the latest version of Highcharts Stock (as of Jan 31, 2024 it is v11.3.0), but I see that it works as far as v7.0.0.

If I may clarify any issues/matters I am available at your convenience.
Best regards!
Dawid Draguła
Highcharts Developer
r6190
Posts: 6
Joined: Wed Jan 31, 2024 4:27 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi David,

Thank you for your reply.

I am using v 11.1 for my project. I took the reference from the demo, but somehow I am not able to achieve it.


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

Re: Navigator xAxis - start and end "on tick" do not work

I am using v 11.1 for my project. I took the reference from the demo, but somehow I am not able to achieve it.
It works for me also in v11.1. Are you sure you want do it for navigator's x-axis, not for the chart's x-axis?
Dawid Draguła
Highcharts Developer
r6190
Posts: 6
Joined: Wed Jan 31, 2024 4:27 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi David,

It worked for me now. I have a question, how do I show date with time on the navigator?
I tried "formatter: function {
return Highcharts.dateFormat('%e. %b %H:%M:%S', this.value);"

But it didn't show the exact time on start and end date. Like suppose if my data is starting from let say "Feb 1 10:15", but it is showing "Feb 1 15:00"

Your help is much appreciated.

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

Re: Navigator xAxis - start and end "on tick" do not work

This happens because of text overlapping. If you e.g. remove all the labels between the two on extremes, you'll have enough place for all the rendered text: https://jsfiddle.net/BlackLabel/4ugnLpmw/
Dawid Draguła
Highcharts Developer
r6190
Posts: 6
Joined: Wed Jan 31, 2024 4:27 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi Dawid,

Thank you for your reply. I am facing an issue right now. The timezone between chart and the navigator is different. What I mean is , in the graph, the timezone is set as CST but in the navigator it is showing UTC time. And I am not able to change the timezone for navigator. Is there any way we can achieve it?

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

Re: Navigator xAxis - start and end "on tick" do not work

Hi! Check the `time` option, especially the `useUTC`: https://api.highcharts.com/highcharts/time.useUTC

By default, this option is enabled and UTC time is used for axis scaling, tickmark placement and time display in `Highcharts.dateFormat`. "Advantages of using UTC is that the time displays equally regardless of the user agent's time zone settings. Local time can be used when the data is loaded in real time or when correct Daylight Saving Time transitions are required."

Let me know if it helped!
Dawid Draguła
Highcharts Developer
r6190
Posts: 6
Joined: Wed Jan 31, 2024 4:27 pm

Re: Navigator xAxis - start and end "on tick" do not work

Hi Dawid,

I tried using
" time: {
useUTC: false
} "
but it didn't work. Not sure why, the graph is showing the local time as it is supposed to but somehow the navigator is showing UTC time. The navigator time is not matching with the graph time.

And when I change my system's time to UTC, then both graph and navigator time matches.

Thank you for your time. I really appreciate your help.

Return to “Highcharts Stock”