Toggling panState Doesn't Enable Panning When Initially Set to false

[rbgreenway3rd]

am encountering an issue with toggling panning in chartjs-plugin-zoom. When the panState is initialized as false, the chart does not enable panning properly when the state is toggled to true. However, when panState is initialized as true, I can toggle it on and off successfully.

Interestingly, I have zoomState set up in the exact same way, and it works as expected — I can toggle zoom on and off without any issues.

Panning should be properly enabled when panState is toggled to true, regardless of its initial state. However, panning only works if the initial panState is true. If initialized as false, toggling it to true does not enable panning.

Here's the relevant portion of my code:

import { useRef, useState } from "react";
import { Line } from "react-chartjs-2";
import { Chart } from "chart.js";
import zoomPlugin from "chartjs-plugin-zoom";
import { LargeGraphOptions } from "./config/LargeGraphOptions"; // config options

Chart.register(zoomPlugin);

export const LargeGraph = ({ rawGraphData, analysisData, extractedIndicatorTimes }) => {
  const chartRef = useRef(null);
  const [zoomState, setZoomState] = useState(false);
  const [zoomMode, setZoomMode] = useState("xy");
  const [panState, setPanState] = useState(false); // Default is false
  const [panMode, setPanMode] = useState("xy");

  const largeGraphConfig = LargeGraphOptions(
    analysisData,
    extractedIndicatorTimes,
    zoomState,
    zoomMode,
    panState,
    panMode
  );

 const togglePanState = () => {
    setPanState((prev) => !prev);
  };

  return (
    <div className="large-graph">
      <Line
        data={rawGraphData}
        options={largeGraphConfig}
        ref={chartRef}
      />
      <button onClick={togglePanState}>Toggle Pan</button>
    </div>
  );
};

And here are the relevant configuration options I am passing:

export const LargeGraphOptions = (
  analysisData = [],
  extractedIndicatorTimes = [],
  zoomState,
  zoomMode,
  panState,
  panMode
) => {
  return {
    plugins: {
      zoom: {
        pan: {
          enabled: panState,  // Bound to panState
          mode: panMode,
          threshold: 50,
        },
        zoom: {
          wheel: {
            enabled: zoomState,
          },
          mode: zoomMode,
        },
      },
    },
    scales: {
      x: { display: false },
      y: { display: false },
    },
  };
};

[gopal-panigrahi]

@rbgreenway3rd Please can you provide minimum reproducible example of the bug (in codesandbox or something similar)

[denis-migdal]

I reproduced this bug. We can't enable pan if it wasn't initially explicitly set to true when initializing chartJS.

Can't provide a minimum reproducible example.

let ctx = this.#canvas.getContext('2d')!;
const config: any = {
          data: {
        datasets: []
    },
    plugins: [],
    options: {
        locale: 'en-IN',
        animation: false,
        responsive: true,
        maintainAspectRatio: false,
              scales: {},
        plugins: {
            datalabels: {
                      display: false,
                  },
            tooltip   : {
                enabled: false
            },
                  zoom: {
                      pan: {
                          /* required for proper pan init */
                          enabled: true
                      }
                  }
        },
    }
};

this.#chartjs = new Chart(ctx, config);

// h4ck for correct pan init.
const zoom = this.#chartjs.config.options!.plugins!.zoom!;
zoom.pan!.enabled! = false;

// do some stuff.

const zoom = this.#chartJS.options.plugins!.zoom!;

zoom.limits = {};
zoom.zoom   = {
    wheel: {
        enabled: false,
        speed: 0.1
    }
}
zoom.pan!.enabled = true;