chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
598 stars 327 forks source link

Pan with Mouse Scroll Wheel #839

Closed iantrudell closed 2 weeks ago

iantrudell commented 1 month ago

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 commented 1 month ago

Hi @iantrudell , wheel is not supported for panning.

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