Search code examples
reactjsmobilecanvasjs

How to enable scrolling in CanvasJS charts on mobile?

I am using the ReactJS version of the CanvasJS library.

I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.

When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.

Is there any way to get scrolling working properly when touching these charts on mobile?

Solution

  • Figured it out.

    I had the CanvasJS component wrapped inside a div component.

    This div component had the following CSS attributes applied to it:

      overflow-y:auto;
  overflow:scroll;
  overflow-x:auto;

    Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.