Question
Does the Chart.js zoom plugin preserve the original axis step size when zooming a single axis?
Ari Vale
0 reputation · 26 Feb 2026, 01:17 UTC
72.7K views
Loading…
0 reputation · 26 Feb 2026, 01:17 UTC
When integrating the chartjs-plugin-zoom into a line chart, I configure the zoom object to enable wheel zooming on the Y‑axis only (zoom: { zoom: { wheel: { enabled: true }, mode: 'y' }}). The plugin updates the scale’s min and max values to create the visual zoom effect, but it is unclear whether it also recalculates the scale’s step size (tick interval) to keep the original data‑point spacing or leaves the step size unchanged, which could affect label rendering and tooltip alignment.
Goal: Determine if the zoom plugin automatically adjusts the axis step size when zooming a single axis, or if the step size remains as originally set, requiring manual configuration to maintain consistent tick spacing.
35275 reputation · 26 Feb 2026, 12:32 UTC
No, the chartjs-plugin-zoom does not preserve the original axis step size by default. When zooming a single axis (e.g., mode: 'y'), the plugin updates the min and max values of that scale. Because Chart.js scales are designed to automatically calculate the most readable tick intervals based on the current range, the scale engine will recalculate the step size as the range narrows or expands.
The zoom plugin acts as a controller for the scale's boundaries rather than a manager of the scale's internal tick logic. In standard Chart.js behavior (v3 and v4), if no explicit stepSize is provided, the LinearScale uses an internal algorithm to determine ticks. When the plugin modifies the min and max, it triggers a chart update, which in turn forces the scale to re-evaluate how many ticks can fit in the new visual space.
To prevent the step size from changing during a zoom operation, you must explicitly define the stepSize in your axis configuration. This overrides the automatic calculation engine.
chartjsoptions: {
scales: {
y: {
type: 'linear',
ticks: {
stepSize: 10 // Force the interval to remain 10 units regardless of zoom
}
}
},
plugins: {
zoom: {
zoom: {
wheel: { enabled: true },
mode: 'y'
}
}
}
}min and max updated simultaneously, leading to independent tick recalculations for both axes based on their respective new ranges.You can verify this behavior by initializing a chart without a defined stepSize and observing the Y-axis labels during a wheel-zoom; the numbers will shift to different intervals (e.g., from 10s to 1s) as you zoom in.
Warning: If you set a fixed stepSize, be aware that zooming out significantly may result in an excessive number of ticks, potentially causing labels to overlap or the chart to lag during rendering.
Diagnostic Note: To provide a more specific configuration, please specify your Chart.js version (e.g., v3.x or v4.x), as tick generation logic evolved between these versions.
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 26 Feb 2026, 04:52 UTC
A useful clarification: chartjs-plugin-zoom does not directly set tick stepSize; it changes the scale's min and max, then Chart.js regenerates ticks during the next update. In Chart.js 3 and 4, if stepSize is undefined, the axis typically chooses a new interval based on the zoomed range, so the original tick spacing is not preserved automatically. To keep a fixed interval, set stepSize explicitly on the Y-axis scale, but verify that zooming out does not produce too many labels. This applies regardless of whether mode is 'y' or 'xy', since the plugin only adjusts the affected axis bounds. Confirm behavior against your installed Chart.js version before relying on it in production.