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

Duplicating xAxis crosshair label from bottom to top

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

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!
Magdalena Gut
Developer and Highcharts Support Engineer
troycarz
Posts: 17
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

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!
Magdalena Gut
Developer and Highcharts Support Engineer
troycarz
Posts: 17
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

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!
Magdalena Gut
Developer and Highcharts Support Engineer
troycarz
Posts: 17
Joined: Fri May 28, 2021 12:03 pm

Re: Duplicating xAxis crosshair label from bottom to top

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Duplicating xAxis crosshair label from bottom to top

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

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Stock”