Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

HighStock -> Navigator to be made floating

Sat May 18, 2019 3:18 pm

Hi Team,

I am trying to plot a chart with highstock with multiple y Axises that are not opposite to each other.

I would like to have each of my Axises of 150px.

So , if i need to see the common X Axis and the navigator i would have to scroll down my page.

Instead i would like to have the Chart X Axis and the Navigator floating over the page.

My example would be something like below

https://jsfiddle.net/en9hrpvw/2/

Can you please help me to get this working or a suitable workaround to get achieve this.

Regards,
Anto

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Mon May 20, 2019 8:07 am

Hey Anto,

Welcome to official Highcharts forum! Thank you for contacting us!

In the example which you have sent container, height is set to 400 px, but chart height is set to 500 px, so there is not enough space in the container to render the whole chart with a navigator. You need to change one of the heights.

For example: https://jsfiddle.net/BlackLabel/rbytanmf/

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Mon May 20, 2019 12:51 pm

@bastss

Thanks for the correction... missed those change in the fiddle i placed.
Hope you did not get my intention.

My concern is not about the container id height.
My idea is instead of scrolling down to the page to see the navigator, is there a possibility of making it float at the bottom.

Please find the updated fiddle and the attached images for better understanding.

https://jsfiddle.net/j2vhs5da/

Suppose below is the look and feel of the highChart in the application
Initial Look.PNG
Initial Look.PNG (38.59 KiB) Viewed 2261 times

Of course , there would be a scroll to the page, since i cannot compromise on the height.
So i need to scroll down to see my navigator like below
Scoll down.PNG
Scoll down.PNG (32.29 KiB) Viewed 2261 times

Is there a workaround in which i could have the portion highlighted in my second image (X-Axis and Navigator ) be floating at the bottom of the page

somewhat like below
Final Output.PNG
Final Output.PNG (39.52 KiB) Viewed 2261 times

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Tue May 21, 2019 1:46 pm

Hey Anto,

Thank you for your explanation.
You can manipulate of navigator position by setting navigator.top to some value. Next, you can update chart to set different top value after every scroll event. Check this guideline demo: https://jsfiddle.net/BlackLabel/60jo2dn1/

API: https://api.highcharts.com/class-refere ... art#update

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Thu May 23, 2019 8:34 am

Hi @bastss,

Thanks for the effort...

I believe the navigator.top is still not exposed in highstock JS API reference

Still facing some trouble getting it right..

1. When zoom is enabled on chart ie, zoomType: 'x', the navigator handle drags are effecting as the chart zoom.

2. Is there a possibility of having the X-Axis top updated , as we do with the navigator in your example.

3. Can we have a common scroll across "highcharts-axis-labels highcharts-yaxis-labels " and "highcharts-plot-background" so that the chart update for navigator.top can be avoided on scroll event

Example: https://jsfiddle.net/2nao6r0b/

Kindly revert back ..

Regards,
Anto

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Mon May 27, 2019 2:29 pm

Hey Anto,

I apologize for the late reply. Please be patient, I still work on your case. Maybe it will be possible to implement scrollablePlotArea into Highstock - just like it is working here: https://api.highcharts.com/highcharts/c ... lePlotArea.

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Tue May 28, 2019 11:04 am

Hi bassts..

Thanks for the support..

I see the scrollablePlotArea implemented for Highcharts Across X axis.

it would be helpful if you could please let me know once the fiddle is updated with the implementation of scrollablePlotArea for HighStocks Across Y axis.

Regards,
Anto

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Thu May 30, 2019 7:31 am

Hi Sebastian,

Is there any update on this? Were you able to figure it out...

Regards,
Anto

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Thu May 30, 2019 5:08 pm

Hey Anto,

I apologize for the late reply.
I spend some time trying to implement scrollablePlotArea for HighStock Across Y axis, but I am afraid that implementing this feature requires much more time that is predicted for regular support. It is more like a custom project.

You can report this idea on our userVoice channel. If this functionality will be enough interesting for core developers they will implement it to the future versions.
https://highcharts.uservoice.com/forums ... script-api

Here you can follow my efforts and ideas, maybe you will be able to figure it out:
- for only one axis everything works great - https://jsfiddle.net/Bastsss/pLfdzg85/
- here implementing absolute position for navigator and range selector will be great - https://jsfiddle.net/Bastsss/c9xLotpq/ - I am going to try it, but as I said, this case requires time,
- consider also rebuilding your chart into something similar to charts from this post - https://github.com/highcharts/highcharts/issues/6453


Kind regards!
Sebastian Wędzel,
Highcharts Developer

KacperMadej
Posts: 4624
Joined: Mon Sep 15, 2014 12:43 pm

Re: HighStock -> Navigator to be made floating

Fri May 31, 2019 10:59 am

Additionally, the vertical scrollable plot area is implemented in master branch and should be available in 7.1.2 that is expected to go live next week. More info: https://github.com/highcharts/highcharts/pull/10786
Kacper Madej
Highcharts Developer

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Tue Jun 04, 2019 8:06 am

@bastss

Can you please confirm if the changes as part of the

https://github.com/highcharts/highcharts/pull/10786

suits our scenario...?

Because i have tried adding

Code: Select all

scrollablePlotArea: { minHeight: 200, scrollPositionY: 0 }
to the below fiddle

https://jsfiddle.net/ynfbcxzo/


It still does not make any difference?

Please confirm on this...

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Tue Jun 04, 2019 3:54 pm

Hey Anto,

Actually, this feature makes a difference, but as TorsteinHonsi mentioned on GitHub:
It doesn't seem to handle panes very well though.
And as you noticed this feature is a product for @Product highcharts gantt.

However, I tried to implement this feature into the Highstock (actually, into your project) and here is my output:
https://jsfiddle.net/BlackLabel/4una5wv1/

I tried to anchor navigator to the scrollable area, but anchored navigator didn't work with the navigator mask, so I decided to not anchored it and hide. Additionally, there wasn't enough space to show all of your 4 charts, so I did a 'blind' series to get more space.

Best regards!
Sebastian Wędzel,
Highcharts Developer

Anto
Posts: 20
Joined: Tue Apr 30, 2019 12:10 pm

Re: HighStock -> Navigator to be made floating

Thu Jun 06, 2019 11:42 am

Thanks for the effort Sebastian.

I Have observed that the scrollablePlot Area works fine with a single Axis.

But for the latest fiddle shared, i see that if highcharts-plot-background is given it gets clipped in middle... i believe it to be the poor handling of the panes.

But As suggested , i have shared this in uservoice channel.

https://highcharts.uservoice.com/forums ... k-across-y

Kindly see to this and please add the additional info you have gathered if required

Also, Please don't forget to add your votes. :)

Regards,
Anto

shanu31
Posts: 1
Joined: Thu Jun 06, 2019 10:25 am
Contact: Website

Re: HighStock -> Navigator to be made floating

Thu Jun 06, 2019 12:18 pm

Excellent thread..!!

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: HighStock -> Navigator to be made floating

Thu Jun 06, 2019 2:15 pm

Hey Anto,

I am glad I could help.

You've got my vote on userVoice! It could be a useful feature.

Best regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Stock”