I am trying to use the zoom within chartArea, however zooming in causes the zoom to use the whole chartArea rather than within the X and Y axes.

                var arbitraryLine = {    
                    id: 'arbitraryLine',
                    beforeDraw(chart, args, options) {
                        const ctx = chart.canvas.getContext('2d');
                        var { ctr, chartArea: {top, right, bottom, left, width, height}, scales:
                            {x, y} } = chart;
                        ctx.save();
                        
                        ctx.fillStyle = 'yellow';
                        ctx.fillRect(x.getPixelForValue(0), top, width, height);
                        ctx.restore();
                    }
                }

                const plugin = {          // For white background plot
                    id: 'custom_canvas_background_color',
                    beforeDraw: (chart) => {
                        const ctx = chart.canvas.getContext('2d');
                        ctx.save();
                        ctx.globalCompositeOperation = 'destination-over';
                        ctx.fillStyle = 'White';
                        ctx.fillRect(0, 0, chart.width, chart.height);
                        ctx.restore();
                    }
                };
                
                var config = {
                    type: 'line',
                    data: data,                    
                    options: {
                      plugins: {
                        legend: {
                            labels: {
                                // This more specific font property overrides the global property
                                font: {
                                    size: 24,
                                }
                            }
                        },
                        zoom: {
                          zoom: {                        
                            wheel: {
                              enabled: true,
                              mode: 'xy'
                            },
                            pinch: {
                              enabled: true,
                              mode: 'xy'
                            },
                            drag: {
                              enabled: true,
                              mode: 'y'
                            },
                            // mode: "x",
                            speed: 0.10,
                            threshold: 10,
                            sensitivity: 3,                        
                          },
                          pan: {
                            enabled: true,
                            mode: 'xy'
                          },
                          limits: {
                            y: {minRange: 200, min: 0, max: 1000/*, minRange: 100*/},
                            x: {minRange: 50, min: 0, max: xdata.length/*, minRange: 1000*/}
                          }
                        },
                      },
                    maintainAspectRatio: false,                                      
                    scales: {                                 
                        x: {
                            //type: 'linear',
                            title: {
                                display: true,
                                text: 'X',
                                font: {
                                  size: 24,
                                }
                            },
                            grid: {                
                            },
                            ticks: {
                                maxTicksLimit: xdata.length,
                                // For a category axis, the val is the index so the lookup via getLabelForValue is needed
                                callback: function(val, index) {
                                // Hide the label of every 14th dataset
                                rounding = Math.round(this.getLabelForValue(val)*100)/100;
                                if(index == 0)
                                  return (index) % valtest === 0 ? rounding.toFixed(1) : undefined;
                                else
                                  return (index + 1) % valtest === 0 ? rounding.toFixed(1) : undefined;
                                },
                                maxRotation: 90,   // Rotate the tick labels to show horizontally                
                                font: {
                                  size: 24,
                                }
                            },              
                        },                                       
                        y: {
                            title: {
                                display: true,
                                text: 'Y',
                                font: {
                                  size: 24,
                                }
                            },                        
                            max: 1000,
                            min:0,
                            ticks: {
                                callback: function(value) {
                                  // if (Math.floor(value) === value) {
                                  //   return value
                                  // }
                                  return Math.floor(value);
                                },
                                stepSize: 100,
                                font: {
                                  size: 24,
                                }
                            },
                            beginAtZero: true
                        },               
                    },                
                    },
                    plugins: [plugin, arbitraryLine], // Uses both plugins                         
                };

Before Zoom:

After Zoom:

How do I make sure that ctx.fillRect, and even the plot points, does not cross the Y-axis (i.e. towards the left hand side) even after zooming?

FYI: The zoom plugin that I am using is chartjs-plugin-zoom v2.0.0