chartjs/chartjs-plugin-zoom

chart.resetZoom on dblclick event results in maximum callstack exceeded

mattgatee opened this issue · 2 comments

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)

Update

added setTimeout:

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

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