Adding a button to pan left/right

[effofxprime]

I have my charts displaying how I want, but to add more accessibility, i'd like to add a button to pan left or right on the one chart it's enabled on.

my chart function is:

async function plotCharts(chain) {
  const hourlyChart = new Chart(ctx, {...}
}

I then call this in another function that hides and unhides some elements before showing the graphs.

In the global space, I have query selectors getting the specific class for the button.

My question is:
How do I access hourlyChart outside of that function so I can call hourlyChart.pan(...) ?

Relevant code I tried running:

    panRight.addEventListener('click', () => {
        hourlyChart.pan(
            {
                x: 10,
            },
            undefined,
            'default'
        );
    });

plotCharts.hourlyChart.pan(...) didn't work within the event listener either. I feel like I am overlooking something easy, but I am fairly new with Javascript and almost done with my course.

[stockiNail]

@effofxprime Chart.js has got an object where is storing statically all chart instances created (and still active, no destroyed).

To access to that object, you can use Chart.instances. To retrieve the right chart instance, you can check the canvas element related to the chart that it's interesting you.

Sample of event handler:

document.getElementById("bu").addEventListener('click', function() {
  for (const k of Object.keys(Chart.instances)) {
    const chart = Chart.instances[k];
    if (chart.canvas === document.getElementById("myChart2")){ // <-- get the canvas element by id
      console.log(chart); // <--- chart is found
    }
  }
});

See Codepen: https://codepen.io/stockinail/pen/bGmPjzX

In the log, the second chart is shown.

[effofxprime]

Perfect!! Thank you kindly!