React-chartjs-2: Keep y-axis scaling static when zooming

Question

Is there a way to disable the automatic scaling of the y-axis when I scale 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 scales so that the data takes up all 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 plugin variables are stored in options and I return my chart like this:

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

I found in the documentation that you can set min/max values ​​for the y-axis and you can use that to get a fixed axis, but that doesn't work for me because I don't know in advance what data I'm showing , the component is used to display multiple charts

Answer 1

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

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

This will set the user minimum and maximum values ​​to the current values, and should be called after the chart has been rendered (or at least its layout has been calculated).

You can also "unfreeze" an axis if you want to receive new data or make other types of updates:

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

HereFork of your codesandbox I used these functions before and after each zoom and pan occurred - using onZoomStart, onZoomComplete,onPanStart and onPanComplete are used for user events (pinch or wheel) and before and after any programmatic zoom/pan calls, it does not call the event handler.

This is quite cumbersome, and should consider "freezing" and possibly "unfreezing" the application's logic. For example, this branch achieves the same effect as before, but "freezes" the y-axis once in code, in the afterLayout event broadcast to the plugin.