diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts
index e7f7bbb088..329ad6447b 100644
--- a/src/coord/axisTickLabelBuilder.ts
+++ b/src/coord/axisTickLabelBuilder.ts
@@ -84,8 +84,11 @@ export function createAxisLabels(axis: Axis): {
     const custom = axis.getLabelModel().get('customValues');
     if (custom) {
         const labelFormatter = makeLabelFormatter(axis);
+        const extent = axis.scale.getExtent();
+        const tickNumbers = tickValuesToNumbers(axis, custom);
+        const ticks = zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1]);
         return {
-            labels: tickValuesToNumbers(axis, custom).map(numval => {
+            labels: zrUtil.map(ticks, numval => {
                 const tick = {value: numval};
                 return {
                     formattedLabel: labelFormatter(tick),
@@ -115,8 +118,10 @@ export function createAxisTicks(axis: Axis, tickModel: AxisBaseModel): {
 } {
     const custom = axis.getTickModel().get('customValues');
     if (custom) {
+        const extent = axis.scale.getExtent();
+        const tickNumbers = tickValuesToNumbers(axis, custom);
         return {
-            ticks: tickValuesToNumbers(axis, custom)
+            ticks: zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1])
         };
     }
     // Only ordinal scale support tick interval
diff --git a/test/axis-customTicks.html b/test/axis-customTicks.html
index 24f9c7dc97..7f79f099d8 100644
--- a/test/axis-customTicks.html
+++ b/test/axis-customTicks.html
@@ -38,6 +38,8 @@
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
+        <div id="main4"></div>
+        <div id="main5"></div>
 
         <script>
         require(['echarts'], function (echarts) {
@@ -198,5 +200,189 @@
         </script>
 
 
+        <script>
+            require(['echarts'], function (echarts) {
+                var option = {
+                    grid: {
+                        left: 300
+                    },
+                    dataZoom: [
+                        {
+                            show: true,
+                            realtime: true,
+                            start: 20,
+                            end: 100
+                        },
+                        {
+                            type: 'inside',
+                            realtime: true,
+                            start: 20,
+                            end: 100
+                        }
+                    ],
+                    xAxis: {
+                        axisTick: {
+                        alignWithLabel: false,
+                        customValues: ['a', 'c', 'd']
+                        },
+                        axisLabel: {
+                        customValues: ['a', 'c', 'd']
+                        },
+                        type: 'category',
+                        data: ['a', 'b', 'c', 'd']
+                    },
+                    yAxis: {},
+                    series: [
+                        {
+                        symbolSize: 8,
+                        data: [
+                            ['a', 34],
+                            ['b', 20],
+                            ['c', 23]
+                        ],
+                        type: 'scatter'
+                        }
+                    ]
+                };
+
+
+                var chart = testHelper.create(echarts, 'main4', {
+                title: [
+                    'customValues should not overflow the grid (category axis)',
+                    '`a` in the axis label should not be displayed'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var laData = [[1, 3.47], [2, 7.84], [3, 2.01], [4, 4.20], [5, 3.87], [6, 1.50], [7, 2.56], [8, 6.40], [9, 1.74], [10, 2.96]];
+
+            var option = {
+                grid: {},
+                dataZoom: [
+                    {
+                        show: true,
+                        realtime: true,
+                        start: 10,
+                        end: 100
+                    },
+                    {
+                        type: 'inside',
+                        realtime: true,
+                        start: 10,
+                        end: 100
+                    }
+                ],
+                xAxis: {
+                    // inverse: true,
+                    min: 0.8232487,
+                    max: 15.913814,
+                    axisTick: {
+                        alignWithLabel: false,
+                        customValues: [
+                            0.8232487, 1.0162385, 1.1550374, 1.2683247, 1.3663184, 1.4539799,
+                            1.5341381, 1.6085765, 1.678501, 1.7447696, 2.0390995, 2.2967868,
+                            2.5353202, 2.763711, 2.9876446, 3.2113228, 3.4383155, 3.6720607,
+                            3.9162545, 4.1752627, 4.4546794, 4.7622291, 5.1094275, 5.5150457,
+                            6.0135369, 6.6807831, 6.8487278, 7.0341985, 7.2417842, 7.4781695,
+                            7.7536565, 8.0853878, 8.5052466, 8.7672731, 9.0841154, 9.4869366,
+                            10.0451175, 10.1885089, 10.3480597, 10.5280286, 10.7346329, 10.9774775,
+                            11.2725888, 11.6498673, 11.8872372, 12.1760407, 12.5457607, 13.0622408,
+                            13.1956236, 13.3443503, 13.5124879, 13.7059808, 13.9340232, 14.2119776,
+                            14.5685523, 14.7935524, 15.0679412, 15.4201567, 15.913814
+                        ]
+                    },
+                    axisLabel: {
+                        customValues: [
+                            0.8232487, 1.7447696, 2.5353202, 3.6720607, 5.1094275, 6.6807831,
+                            7.7536565, 10.0451175, 10.9774775, 13.0622408, 13.9340232, 15.913814
+                        ],
+                        formatter: function (value, index, revers = true) {
+                            switch (value) {
+                            case 0.8232487:
+                                return revers ? '1 %' : '99%';
+                            case 1.7447696:
+                                return revers ? '10 %' : '90%';
+                            case 2.5353202:
+                                return revers ? '25 %' : '75%';
+                            case 3.6720607:
+                                return revers ? '50 %' : '50%';
+                            case 5.1094275:
+                                return revers ? '75 %' : '25%';
+                            case 6.6807831:
+                                return revers ? '90 %' : '10%';
+                            case 7.7536565:
+                                return revers ? '95 %' : '5%';
+                            case 10.0451175:
+                                return revers ? '99 %' : '1%';
+                            case 10.9774775:
+                                return revers ? '99,5 %' : '0,5%';
+                            case 13.0622408:
+                                return revers ? '99,9 %' : '0,1%';
+                            case 13.9340232:
+                                return revers ? '99,9 %' : '0,05%';
+                            case 15.913814:
+                                return revers ? '99,9 %' : '0,01%';
+                            default:
+                                return '- %';
+                            }
+                        }
+                    }
+                },
+                yAxis: {},
+                series: [
+                    {
+                        symbolSize: 8,
+                        data: [
+                            [5.890028, 627],
+                            [2.264864, 191],
+                            [3.908172, 364],
+                            [8.400104, 1040],
+                            [3.298611, 301],
+                            [1.921706, 164],
+                            [3.445732, 318],
+                            [4.426555, 440],
+                            [1.490985, 145],
+                            [1.72375, 160],
+                            [5.050093, 498],
+                            [2.099646, 176],
+                            [4.245153, 422],
+                            [7.3673, 686],
+                            [3.15342, 254],
+                            [1.182348, 118],
+                            [2.720003, 244],
+                            [3.595705, 320],
+                            [2.421612, 199],
+                            [3.009242, 251],
+                            [3.749499, 325],
+                            [4.072923, 393],
+                            [4.619232, 484],
+                            [5.573134, 573],
+                            [4.825884, 494],
+                            [2.86512, 246],
+                            [6.26557, 652],
+                            [5.296798, 530],
+                            [2.572668, 241],
+                            [6.733265, 659]
+                        ],
+                        type: 'scatter'
+                    }
+                ]
+            };
+
+
+            var chart = testHelper.create(echarts, 'main5', {
+                title: [
+                    'customValues should not overflow the grid (time axis)'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
     </body>
 </html>