How to pan on the click of a button?

Question

I am using react-chartjs2 for displaying a chart which I have made horizontally scrollable by using the chartjs-plugin-zoom. I want to pan on the chart not by dragging the mouse but by the click of the button. I have checked the code of the plugin and I am guessing calling doPan() function on click of a button I would be able to move right/left.

const options = {
    layout: {
      padding: {
        top: 200,
        left: 50,
        right: 50
      }
    },
    plugins: {
      datalabels: {
        display: true,
        anchor: "end",
        align: "top"
      },
      setTextMiddle: false,
      zoom: {
        zoom: {
          enabled: false,
          drag: true,
          mode: "x",
          rangeMin: {
            x: "Jan",
            y: null
          },
          rangeMax: {
            x: "June",
            y: null
          }
        },
        pan: {
          enabled: true,
          mode: "x",
          speed: 2, 
        }
      }
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            max: "Dec",
            min: "July"
          }
        }
      ],
      yAxes: [
        {
          display: false,
          ticks: {
            max: 105,
            min: 60
          }
        }
      ]
    },
    maintainAspectRatio: false,
    responsive: true,
    legend: {
      display: false
    }
  };

The code above is what I am using in react to enable panning of my chart. Any ideas would be greatly appreciated.

In the picture below I am able to drag using a mouse, I want to add a button to the right and left, for panning on the chart.