Pan with Mouse Scroll Wheel

[iantrudell]

I'm trying to configure the chart to pan using the scroll wheel (zoom disabled).

Use case is I have a fixed height chart window of 500px, I want to only show 10 items on the y axis at a time in my stacked bar, and use the scroll wheel to pan on the y axis and thus choose which 10 labels + bars to show at a given time.

Current options object config:

{
{
    indexAxis: 'y',
    maintainAspectRatio: false,
    animation: false,
    plugins: {
        legend: {
            labels: {
                color: '#495057',
            },
        },
        tooltip: {
            enabled: true,
        },
        zoom: {
            pan: {
                enabled: true,
                mode: 'y',
                wheel: {
                    enabled: true,
                },
            },
            zoom: {
                wheel: {
                    enabled: false,
                },
                pinch: {
                    enabled: false,
                },
                drag: {
                    enabled: false,
                },
                mode: 'x',
            },
        },
    },
    interaction: {
        mode: 'index',
        intersect: false,
    },
    scales: {
        x: {
            stacked: true,
            ticks: {
                color: '#495057',
            },
            grid: {
                color: '#ebedef',
            },
        },
        y: {
            stacked: true,
            ticks: {
                color: '#495057',
            },
            grid: {
                color: '#ebedef',
            },
            min: 0,
            max: 10,
        },
    },

Click and drag works to pan, but scrolling with the wheel doesn't pan.

Is this feature not supported, or am I doing something wrong?

[gopal-panigrahi]

Hi @iantrudell ,
wheel is not supported for panning.

Ref :https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html

[iantrudell]

What would it take to add support for this?

[gopal-panigrahi]

But I am not able to visualise how this functionality would work.
Wheel will have only two actions, scroll up and scroll down,
but for panning we want to be able to pan in any direction, isn't it ?

[iantrudell]

Some wheels support pushing the wheel left or right to scroll horizontally, but I was envisioning just using “x” or “y” and not “xy” mode so it’s only panning in one direction using the “scroll” part of the wheel

[gopal-panigrahi]

seems doable, by the way is there any existing library that address this usecase ?

[gopal-panigrahi]

seems like there is an enhancement logged for this, #628.
let me see if i can write a solution for it.