diff --git a/src/chart/scatter/ScatterView.ts b/src/chart/scatter/ScatterView.ts
index 849d96a9d2..972c36e4cb 100644
--- a/src/chart/scatter/ScatterView.ts
+++ b/src/chart/scatter/ScatterView.ts
@@ -99,9 +99,12 @@ class ScatterView extends ChartView {
     }
 
     _getClipShape(seriesModel: ScatterSeriesModel) {
+        if (!seriesModel.get('clip', true)) {
+            return;
+        }
         const coordSys = seriesModel.coordinateSystem;
-        const clipArea = coordSys && coordSys.getArea && coordSys.getArea();
-        return seriesModel.get('clip', true) ? clipArea : null;
+        // PENDING make `0.1` configurable, for example, `clipTolerance`?
+        return coordSys && coordSys.getArea && coordSys.getArea(.1);
     }
 
     _updateSymbolDraw(data: SeriesData, seriesModel: ScatterSeriesModel) {
@@ -131,4 +134,4 @@ class ScatterView extends ChartView {
     dispose() {}
 }
 
-export default ScatterView;
\ No newline at end of file
+export default ScatterView;
diff --git a/src/coord/CoordinateSystem.ts b/src/coord/CoordinateSystem.ts
index f89235b77b..8c778ab837 100644
--- a/src/coord/CoordinateSystem.ts
+++ b/src/coord/CoordinateSystem.ts
@@ -149,7 +149,7 @@ export interface CoordinateSystem {
 
     getRoamTransform?: () => MatrixArray;
 
-    getArea?: () => CoordinateSystemClipArea
+    getArea?: (tolerance?: number) => CoordinateSystemClipArea
 
     // Only `coord/View.js` implements `getBoundingRect`.
     // But if other coord sys implement it, should follow this signature.
diff --git a/src/coord/cartesian/Cartesian2D.ts b/src/coord/cartesian/Cartesian2D.ts
index b0ce785552..4072684d14 100644
--- a/src/coord/cartesian/Cartesian2D.ts
+++ b/src/coord/cartesian/Cartesian2D.ts
@@ -178,13 +178,15 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
      * Get rect area of cartesian.
      * Area will have a contain function to determine if a point is in the coordinate system.
      */
-    getArea(): Cartesian2DArea {
+    getArea(tolerance?: number): Cartesian2DArea {
+        tolerance = tolerance || 0;
+
         const xExtent = this.getAxis('x').getGlobalExtent();
         const yExtent = this.getAxis('y').getGlobalExtent();
-        const x = Math.min(xExtent[0], xExtent[1]);
-        const y = Math.min(yExtent[0], yExtent[1]);
-        const width = Math.max(xExtent[0], xExtent[1]) - x;
-        const height = Math.max(yExtent[0], yExtent[1]) - y;
+        const x = Math.min(xExtent[0], xExtent[1]) - tolerance;
+        const y = Math.min(yExtent[0], yExtent[1]) - tolerance;
+        const width = Math.max(xExtent[0], xExtent[1]) - x + tolerance;
+        const height = Math.max(yExtent[0], yExtent[1]) - y + tolerance;
 
         return new BoundingRect(x, y, width, height);
     }
diff --git a/test/clip.html b/test/clip.html
index 165e3f73f3..508375bfac 100644
--- a/test/clip.html
+++ b/test/clip.html
@@ -103,8 +103,6 @@
             })
         </script>
 
-
-
         <div class="chart" id="scatter-clip-polar"></div>
         <script>
             require([
@@ -118,13 +116,13 @@
 
                 data1.push({
                     value: [5, 82],
-                    name: 'This point shouldn\'t be clipped',
+                    name: 'Shrink the page, this poi👆nt shouldn\'t be clipped',
                     itemStyle: {
                         color: 'red'
                     },
                     label: {
                         show: true,
-                        formatter: '👆{b}👆',
+                        formatter: '{b}',
                         position: 'bottom'
                     }
                 });
@@ -150,7 +148,7 @@
                     }]
                 };
                 var chart = testHelper.create(echarts, 'scatter-clip-polar', {
-                    title: ['Scatter Clip on Polar', 'Shrink the page, this red point shouldn\'t be clipped'],
+                    title: 'Scatter Clip on Polar',
                     option: option,
                     height: 400,
                     buttons: makeToggleChartButtons(function (clip) {
diff --git a/test/clip2.html b/test/clip2.html
new file mode 100644
index 0000000000..a7541e3ddd
--- /dev/null
+++ b/test/clip2.html
@@ -0,0 +1,157 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="./lib/simpleRequire.js"></script>
+        <script src="./lib/config.js"></script>
+        <script src="./lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            h1 {
+                line-height: 60px;
+                height: 60px;
+                background: #ddd;
+                text-align: center;
+                font-weight: bold;
+                font-size: 14px;
+            }
+            .chart {
+                height: 500px;
+            }
+        </style>
+
+        <script>
+            function makeToggleChartButtons(toggleClip) {
+                return  [{
+                    text: 'Set Clip',
+                    onclick: function () {
+                        toggleClip(true);
+                    }
+                }, {
+                    text: 'Set Visible',
+                    onclick: function () {
+                        toggleClip(false);
+                    }
+                }];
+            }
+        </script>
+
+        <div class="chart" id="scatter-clip-cartesian-2"></div>
+        <script>
+            require([
+                'echarts'
+            ], function (echarts) {
+                var start = +new Date(2011, 0, 1);
+                var data = new Array(20).fill().map(function (_, i) {
+                    return [new Date(start + i), i];
+                });
+                var option = {
+                    xAxis: {
+                        type: 'time',
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [
+                        {
+                            data: data,
+                            type: 'scatter'
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'scatter-clip-cartesian-2', {
+                    title: [
+                        'Scatter Clip on Cartesian (#18861)',
+                        'Shrink the page, the first and the last point shouldn\'t be clipped'
+                    ],
+                    option: option,
+                    height: 400,
+                    buttons: makeToggleChartButtons(function (clip) {
+                        chart.setOption({
+                            series: [{
+                                clip: clip
+                            }]
+                        })
+                    }).concat([{
+                        text: 'Resize Width (for first point)',
+                        onclick: function () {
+                            chart.resize({
+                                width: 562
+                            });
+                        }
+                    }, {
+                        text: 'Resize Width (for last point)',
+                        onclick: function () {
+                            chart.resize({
+                                width: 726
+                            });
+                        }
+                    }])
+                });
+            })
+        </script>
+
+        <div class="chart" id="scatter-clip-cartesian-3"></div>
+        <script>
+            require([
+                'echarts'
+            ], function (echarts) {
+                var option = {
+                    xAxis: {},
+                    yAxis: {},
+                    grid: {
+                        top: '14%',
+                    },
+                    series: [
+                        {
+                            symbolSize: 20,
+                            data: [
+                                [1, 1],
+                                [1, 0],
+                            ],
+                            type: 'scatter'
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'scatter-clip-cartesian-3', {
+                    title: [
+                        'Scatter Clip on Cartesian (#16661)',
+                        'The point at the right-top corner shouldn\'t be clipped'
+                    ],
+                    option: option,
+                    height: 400,
+                    buttons: makeToggleChartButtons(function (clip) {
+                        chart.setOption({
+                            series: [{
+                                clip: clip
+                            }]
+                        })
+                    })
+                });
+            })
+        </script>
+    </body>
+</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 562693a828..0d67363c0e 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -51,6 +51,7 @@
   "candlestick-large2": 1,
   "candlestickConnect": 4,
   "clip": 12,
+  "clip2": 2,
   "coarse-pointer": 3,
   "color-mix-aqi": 2,
   "connect": 1,
diff --git a/test/runTest/actions/clip2.json b/test/runTest/actions/clip2.json
new file mode 100644
index 0000000000..e563f40376
--- /dev/null
+++ b/test/runTest/actions/clip2.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousedown","time":491,"x":266,"y":91},{"type":"mouseup","time":640,"x":266,"y":91},{"time":641,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":835,"x":265,"y":91},{"type":"mousemove","time":1035,"x":276,"y":97},{"type":"mousemove","time":1235,"x":360,"y":101},{"type":"mousemove","time":1435,"x":386,"y":99},{"type":"mousemove","time":1635,"x":399,"y":97},{"type":"mousemove","time":1839,"x":401,"y":95},{"type":"mousedown","time":1906,"x":401,"y":95},{"type":"mousemove","time":1968,"x":402,"y":95},{"type":"mouseup","time":2094,"x":402,"y":95},{"time":2095,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2173,"x":402,"y":95}],"scrollY":0,"scrollX":0,"timestamp":1688898127640},{"name":"Action 2","ops":[{"type":"screenshot","time":1732}],"scrollY":434.3999938964844,"scrollX":0,"timestamp":1688897861656}]
\ No newline at end of file