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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can set the
minandmaxof 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,onPanStartandonPanCompleteare 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
afterLayoutevent broadcast to the plugin.