Chartjs Zoom Plugin - Default scroll behaviour not working

Question

In my project, I have implemented a bar chart using Chart.js. The chart allows users to scroll to view the amounts for the previous months over the last two years. To enable panning on the x-axis and achieve this functionality, I incorporated the Chart.js zoom plugin. However, I am encountering an issue where the default scroll on the y-axis is not functioning as expected. The problem arises from the addition of a CSS property, 'touch-action: none,' by the zoom plugin for the canvas. This property prevents the default scroll behavior.

To address this, I experimented with changing the 'touch-action' property to 'auto,' which enables the default scroll behavior. However, this adjustment disrupts the panning functionality on the x-axis in the bar chart.

I am facing a challenge in my project where I need to distinguish between user scrolls on the x-axis and y-axis in a bar chart implemented using Chart.js. Specifically, when the user scrolls along the x-axis, I want to display the data for previous months, leveraging the panning functionality provided by the Chart.js zoom plugin. On the other hand, when the user scrolls along the y-axis, I intend for the default scroll behavior to take effect, allowing them to navigate other content.

I am currently seeking guidance on how to implement a solution that accurately detects whether the user is scrolling along the x-axis or y-axis and subsequently triggers the appropriate actions, such as displaying previous months or enabling the default y-axis scroll behavior. Any insights or suggestions on how to achieve this nuanced functionality would be highly appreciated.

for the canvas for bar chart if applied zoom plugin and enabled the pan. touch-action : none is added automatically it prevents the default scroll behaviour

display: block;
box-sizing: border-box;
height: 300px;
width: 343px;
touch-action: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

In ts file chartjs option

plugins: {
zoom: {
          pan: {
            sensitivity: 6,
            enabled: true,
            mode: 'x',
            speed: 0.2,
            threshold: 8,
          },
        },
}

Answer 1

Seems like I've encountered the same problem as you, and touch-action: pan-y !important applied to canvas solved it. Pan and zoom on x-axis still works as intended, and page also becomes scrollable vertically on mobile devices while touching the chart.