troycarz
Posts: 8
Joined: Fri May 28, 2021 12:03 pm

Duplicating xAxis crosshair label from bottom to top

Wed Oct 13, 2021 11:16 am

Hi, I've been stuck on this issue for a while now. My aim is to copy the bottom crosshair and show it on top as well.

Please check out this fiddle
https://jsfiddle.net/kq80caeo/26/

Some workarounds i found.
- Make a new hidden series and link the x Axis to it. [Problem with this is it's adding bloat and slowing down the chart]
- Make snap to false on the top axis. [This works but looks very weird as the top and bottom need to snap since we strip out weekend data https://jsfiddle.net/kq80caeo/27/]

If you need anything else let me know!
Thanks
Troy

magdalena
Posts: 231
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

Thu Oct 14, 2021 1:52 pm

Hi

Thanks for contacting us with your question!

You need to set snap to false for both crosshairs and remove the bottom tooltip by setting headerFormat to an empty string.

Demo:
https://jsfiddle.net/BlackLabel/9r0t1cfs/

Feel free to ask any further questions!
Regards!

troycarz
Posts: 8
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

Thu Oct 14, 2021 9:06 pm

Hi @magdalena
Thank you for your reply,

I am aware that is can be achieved, however I need snap to be on with both XAxis, if not it start's causing problems where we can see blank data when we change the frequency from Daily to Weekly/Monthly. If you have another solution please let me know. Thanks!

Edit: I should also specify we aren't using Highcharts grouping, as our database handles the grouping instead!

magdalena
Posts: 231
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

Mon Oct 18, 2021 1:12 pm

Hi,

You can also add the same series on the second axis, and set opacity: 0.

Demo:
https://jsfiddle.net/BlackLabel/5z2akex3/

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

troycarz
Posts: 8
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

Tue Oct 19, 2021 12:19 am

Hi magdalena,

Thank you for your reply, as I've mentioned in my first post, I am aware that could be a workaround, however that still adds bloat and makes the chart I'm working on inefficient since I'm using a massive timescale [2003 - 2021]

I will also be using this chart for mobile platforms so I am trying to keep it as efficient as possible.

Isn't there any other solution?

Thanks
T

magdalena
Posts: 231
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

Thu Oct 21, 2021 12:57 pm

Hi,

It's absolutely understandable. I've prepared for you a solution, which should be the most effective.

Please, find the demo attached.
https://jsfiddle.net/BlackLabel/6cb4dq19/

​If you have further inquiries, you may reach out to me at any time,
Best regards!

troycarz
Posts: 8
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

Tue Nov 16, 2021 6:22 am

I just got around to seeing this today,
Thank you for this solution, it works perfectly!

I appreciate the time you took to put this together.

Regards
Troy

magdalena
Posts: 231
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

Wed Nov 17, 2021 10:28 am

That's great to hear! I'm glad I could help!

Feel free to ask any further questions,
Regards!

Return to “Highcharts Stock”