How to prevent the chart from interfering with page scroll touchMove event?

[valk]

Hi all,
When I try to scroll a page on a touch screen device (phone) then if the finger is over the chart - then it's capturing the events and they don't bubble up to the document, making scroll action useless.

I checked and tried different options for the chart, but all of them seem to be useless for this scenario.

Last though was to wrap the chart in a div that would capture touch events and do e.stopPropagation(), like here:

      <div
        onTouchStartCapture={(e) => {
          e.stopPropagation();
        }}
        onTouchMoveCapture={(e) => {
          e.stopPropagation();
        }}
        className='chart-class'
      >
        <Chart
          options={chartOptions}
          areaSeries={itemsData}
          autoWidth
          height={60}
        />
     </div>

However it didn't work. Is there anything else that could help? Thanks!

[timocov]

See vertTouchDrag and horzTouchDrag options.

[valk]

Thanks, but I already tried them. These options are only preventing in inner chart scroll from moving the chart itself. But these have no effect on page scroll.
BTW I'm using v3.2.0 of lightweight-charts. Here's a short video that demonstrates the problem:
https://user-images.githubusercontent.com/58757/102935506-f62bdc80-44ae-11eb-93cc-4ae2110d4803.mp4

[timocov]

Can you provide your demo so we can debug it?