chartjs-plugin-zoom
chartjs-plugin-zoom copied to clipboard
chart.resetZoom on dblclick event results in maximum callstack exceeded
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.
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' ],