chart.resetZoom on dblclick event results in maximum callstack exceeded

[mattgatee]

I'm currently listening for double clicks on the chart with events: ["dblclick"] in my options. Using the following Plugin, I'm getting a Maximum callstack exceeded error.

[...]
    plugins: {
      legend: {
        display: true
      },
      title: {
        display: true,
        text: title
      },
      zoom: {
        zoom: {
          wheel: {
            enabled: true
          },
          mode: "x",
          pinch: {
            enabled: true
          }
        },
        pan: {
          enabled: true,
          mode: "x",
          modifierKey: "shift"
        }
      }
    },
    events: ["dblclick"],
  }

const doubeClick: Plugin<"line"> = {
  id: "doubleClick",
  afterEvent(chart: ChartJS, args: any, _options: AnyObject) {
    if (args.event.type  === "dblclick") chart.resetZoom()
    return
  }
};

return <Line options={lineOptions} data={lineData} plugins={[doubeClick]} />

Logging the event works fine. I also noticed that my tooltips stopped working for some odd reason...?

Here's the error:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at resolveKeysFromAllScopes (webpack-internal:///./node_modules/chart.js/dist/chunks/helpers.segment.cjs:1819:34)
    at getKeysFromAllScopes (webpack-internal:///./node_modules/chart.js/dist/chunks/helpers.segment.cjs:1815:31)
    at Object.ownKeys (webpack-internal:///./node_modules/chart.js/dist/chunks/helpers.segment.cjs:1616:20)
    at Reflect.ownKeys (<anonymous>)
    at Object.ownKeys (webpack-internal:///./node_modules/chart.js/dist/chunks/helpers.segment.cjs:1659:28)
    at Function.keys (<anonymous>)
    at Object.each (webpack-internal:///./node_modules/chart.js/dist/chunks/helpers.segment.cjs:98:23)
    at Chart.ensureScalesHaveIDs (webpack-internal:///./node_modules/chart.js/dist/chart.cjs:5702:25)
    at Chart._updateScales (webpack-internal:///./node_modules/chart.js/dist/chart.cjs:5879:14)
    at Chart.update (webpack-internal:///./node_modules/chart.js/dist/chart.cjs:5836:14)

[mattgatee]

Update

added setTimeout:

setTimeout(() => chart.resetZoom(), 0)

This resolves the callstack issue, but my charts are frozen.

[mikij]

I just did this today and it works for me. Nothing is frozen. But for events I am using
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'dblclick' ],

[kurkle]

Try this:

const doubeClick: Plugin<"line"> = {
  id: "doubleClick",
  afterEvent(chart: ChartJS, args: any, _options: AnyObject) {
    if (args.event.type  === "dblclick" && !args.replay) chart.resetZoom()
  }
};