Alice.coop
Posts: 3
Joined: Mon Apr 12, 2021 3:34 pm

Highcharts draggable point problem on mobile and dragging if chart has so big width

i have several problems
1) Highcharts draggable point problem on mobile.
if you transfer my code (jsfiddle) to an existing site and check its work on mobile devices, the coordinates of the points change and do not work correctly. How to fix it?
2)The example (jsfiddle) shows how my chart should look like. It's big enough, so I put it in the parent and gave it the property overflow:hidden. But the user is not comfortable working with my chart. Need to add panning outside data range up to 23 and get rid of the parent with the property overflow:hidden. Рow can I bring this all to the correct form. Sorry for my statement of the question and thanks for the help
https://jsfiddle.net/bkzyeod5/
Alice.coop
Posts: 3
Joined: Mon Apr 12, 2021 3:34 pm

Re: Highcharts draggable point problem on mobile and dragging if chart has so big width

Maybe someone has a tested working code width draggable points in mobile devices?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Highcharts draggable point problem on mobile and dragging if chart has so big width

Hello Alice.coop!

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

I've checked this demo and it seems to work just fine. Could you tell me exactly how the coordinates don't work correctly?
I'm not sure if I understand properly the second issue. You can get rid of the parent element and stylize the chart in the CSS section.

Best regards!
Dominik Chudy
Highcharts Developer
Alice.coop
Posts: 3
Joined: Mon Apr 12, 2021 3:34 pm

Re: Highcharts draggable point problem on mobile and dragging if chart has so big width

dominik.c wrote: Wed Apr 14, 2021 8:43 am Hello Alice.coop!

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

I've checked this demo and it seems to work just fine. Could you tell me exactly how the coordinates don't work correctly?
I'm not sure if I understand properly the second issue. You can get rid of the parent element and stylize the chart in the CSS section.

Best regards!


Thanks for the answer

So about the first problem:
Dragging doesn't seem to work correctly on mobile devices – I've checked all the examples that are available, which have draggable points (e.g. this code doesn't work properly too https://jsfiddle.net/highcharts/sk3m3o7d/ )

Let me explain the steps to reproduce an issue:
1. Open chart in mobile browser
2. Start dragging the point (all good here)
3. Start dragging another point – and here is where things get weird. The wrong point starts moving and this repeats from here on. If I try to drag one point – the other one starts moving and also coordinates are somehow moving in a weird way.

It seems like this kind of charts just doesn't fully work on mobile in general.


And about the second issue:
Our designer made a chart that should have 1500px and a horizontal scroll (as it doesn't fit within mobile screen obviously). You can see this situation in the code sample I've sent above.

But this gets us to an issue with user experience. It would be cool if it worked this way: when user drag the point to the right edge of the screen, scrolling starts working automatically. The way that user be able to drag the point into right-most part of X coordinate. The way it works in mobile UIs, when something is dragged over areas that has horizontal scrolls.

I would appreciate an advice if this is possible at all? Some guidance on where to start digging would be helpful. Thanks!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Highcharts draggable point problem on mobile and dragging if chart has so big width

Hi again!

Thanks for your complex explanation. I appreciate it a lot :)

I think that this kind of issue is a perfect example of a GitHub ticket. Could you repost it on our GitHub so we could discuss it over there? I would be very grateful to you. Here is the link: https://github.com/highcharts/highchart ... new/choose

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”