Disabling scrolling by disabled horzTouchDrag and vertTouchDrag options disables moving crosshair in tracking mode

[samtrout]

The horzTouchDrag and vertTouchDrag properties for mobile right now allow for the user to perform touch and drag movements, but as far as I can tell there is no way to allow movements of only the crosshair on mobile. If I disable scrolling, or set the horzTouchDrag and vertTouchDrag to false, I lose the ability to freely move around the crosshair.

Is there any way on a mobile device to still allow for free movement of the crosshair while disabling scrolling for the chart itself?

[timocov]

but as far as I can tell there is no way to allow movements of only the crosshair on mobile

Can you please elaborate a bit? You long press the chart to see the cross hair and what's going on after that? If you disable both vert and horz touch drag, then we aren't able to handle any scroll on the chart I guess, so you can try to disable the only vertical one.

[samtrout]

I apologize if I wasn't clear enough the first time. I will give you my specific example and hope that it helps makes my issue more clear.

Right now I am representing data on a line chart and I want to show all possible data points for the chart on the graph at the same time. However, the issue that I am facing is that I want to prevent the user from scrolling the chart (because all the data points are already being shown), but still keep the ability for the user to freely move around the crosshair.

I am able to disable the vertical and horizontal scrolling by setting scrolling for the entire chart to false or by setting the horzTouchDrag and vertTouchDrag to false. But if I do either of those two things I lose the ability to move around the crosshair on mobile. I have tried setting just the vertTouchDrag to false, which helps a little bit, but the user is still able to scroll the chart horizontally out of the range of data points.

I'm not sure if I am missing something or if what I am trying to do is just not currently possible on touch devices.

[timocov]

Try to disable pressedMouseMove instead, I guess it might help in your case.

[samtrout]

Disabling pressedMouseMove makes no difference. I have tried every possible combination of the HandleScrollOptions and I am still unable to get it to work.

[dIvYaNshhh]

I am also facing the same issue in the mobile platform, where users can have a provision to scrolling the chart as well as if the user will do a long press then the cross-hair should show, and the user can freely move the scroll and see the bar values on the cross-hair.

I checked this feature is available on the trading view platform in the browser as well as the mobile application but now sure how we can implement it.

I tried to use jQuery for getting the event of touch-hold and touch-end but it is not working smoothly, sometime chart will be stuck.

I really appreciate it if someone will help us to resolve this issue.

[jeonsoeun]

I am also having the same issue on my web page. In my case, there was no problem with version 2.0.0. but when I update to 3.0.1, I can't move cross-hair on mobile.

[florian-kittel]

Have same issues after upgrading from 2.0.0 to 3.1.1 today. Not possible to move the crosshair any more in mobile (iphone). I tried the examples from https://www.tradingview.com/lightweight-charts/ with same device and there I get the crosshair. But this examples are very lightweight. So what was the breaking change for mobile crosshair @timocov ?? Did I need to change my config? :)

I have up to 13 lines in parallel, but I add the data dynamically on user selection. By default close-line is set, but it is also not working. I have HistogramSeries as well in the chart and can optionally switch on candle-stick view. I tried to reduce it to only one line, but it will not work.

When I press longer on the chart the crosshair is visible at the start of the line at the left side, but not possible to move.

chartConfig = {
  width: 600,
  height: 496,
  layout: {
    backgroundColor: 'transparent',
    textColor: '#444',
  },
  priceScale: {
    scaleMargins: {
      top: 0.05,
      bottom: 0.2,
    },
    position: 'right',
    borderVisible: false,
  },
  timeScale: {
    borderVisible: false,
    timeVisible: false,
    fixLeftEdge: true,
  },
  grid: {
    horzLines: {
      color: 'rgba(0, 0, 0, .05)',
      style: 0,
      visible: true,
    },
    vertLines: {
      color: 'rgba(0, 0, 0, .05)',
      style: 0,
      visible: true,
    },
  },
  localization: {
    dateFormat: 'yyyy-MM-dd',
  },
  crosshair: {
    mode: 'Magnet',
    horzLine: {
      visible: true,
      labelVisible: true
    },
    vertLine: {
      visible: true,
      labelVisible: true,
    }
  },
};

[florian-kittel]

I have created a short example to show the issues. The chart works on desktop and ipad, but not on iphone:
https://florian-kittel.github.io/lightweightCharts-mobile-debug/

Setup is as basisc as possible. I used the public version from mentioned production build from the docs.

Repo link if intrested in the code:
https://github.com/florian-kittel/lightweightCharts-mobile-debug/tree/master

When changing the chart version back to 2.0.0 cross-hair on mobile will work in this example.

[timocov]

I have created a short example to show the issues. The chart works on desktop and ipad, but not on iphone:

@florian-kittel I'm not sure whether your issue is related to the original issue.

The original issue: when you disable horzTouchDrag and vertTouchDrag options, even if a user long press on mobile, the crosshair is shown, but it can't move it due disabled options.

I'm going to move your issue in separate thread.

[Rishabh-Streak]

i am using lightweight-charts v3.1.2 and i am still not able to TouchDrag from mobile .. i need to long press and then drag to move crossHair .. but for my use case i want chart scroll to be disabled and i only want to move crosshair

[timocov]

i need to long press and then drag to move crossHair .. but for my use case i want chart scroll to be disabled and i only want to move crosshair

@Rishabh-Streak I think this is by design and we don't have a plan to change it in the future. It's just mobile UX which is better (I think so) than like you've described (we've had exactly the same previously on all our charts and we decided to change it).

[Rishabh-Streak]

i need to long press and then drag to move crossHair .. but for my use case i want chart scroll to be disabled and i only want to move crosshair

@Rishabh-Streak I think this is by design and we don't have a plan to change it in the future. It's just mobile UX which is better (I think so) than like you've described (we've had exactly the same previously on all our charts and we decided to change it).

it would be great if there was an option where developer could decide if handleScroll is disabled then how crosshair should function..
for my use case this was exactly what i wanted and so for my need i modified library code to get this functionality.
i do not recommend anyone to use code in production. This is just for reference
commit

i wanted to understand what problems were faced because of which above decision were made.
As the comment stated in src/gui/pane-widget.ts

// actually we should check what event happened (touch or mouse)
// not check current UA to detect "mobile" device
const trackCrosshairOnlyAfterLongTap = isMobile;

if touch event were handled separately to the mouse click could it be easier to achieve above functionality ?

[timocov]

I think it depends on fixes from #106, so postpone it for now until we'll fix that issue (I guess it will be right after 3.2).