Disable y-axis scaling when zooming with react-chartjs-2

Question

Is there a way to disable the auto scaling of y-axis when I'm zooming on a time series chart ?

You can observe the behavior here : https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh When you zoom the y-axis will scale so the data occupies all the y-axis space.

My zoom plugin looks like this :

plugins = Object.assign({
        "title": {
            display: true,
            text: title,
            align: "start"
        },
        "legend": {
            position: "bottom",
        },
        "zoom": {
            zoom: {
                wheel: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            },
            pan: {
                enabled: true,
                mode: 'x',

            }
        }, ect ...
          )}
             

Then my plugins variable is stored inside options and I return my chart like that :

return (
        <div>
            <Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
        </div>
    )

I found in the documentation that you can set a min/max value to your y-axis and that you could play with that to have a fixed axis but that's not applicable for me I think because I don't know in advance what is the data I display and the component is used to display multiple charts

Answer 1

You can set the min and max of the y axis without knowing a priori the actual values:

function freezeAxis(scale) {
  scale.options.min = scale.min;
  scale.options.max = scale.max;
}

This sets the user min and max to the current value and should be called after the chart was rendered (or at least has computed its layout).

You can also "unfreeze" the axis if new data is to be received or other types of update are in order:

function unfreezeAxis(scale) {
  scale.options.min = null;
  scale.options.max = null;
}

In this fork of your codesandbox I used these functions before and after each zoom and pan occurrence - using onZoomStart, onZoomComplete, onPanStart and onPanComplete for user events (pinch or wheel) and also before and after any programmatic zoom/pan calls, which don't call the event handlers.

This is rather cumbersome, and one should consider "freezing" and possibly "unfreezing" on the logic of one's application. For instance, this fork achieves the same as the previous, by "freezing" y axis only once in the code, in the afterLayout event broadcasted to plugins.