diff --git a/src/coord/Axis.ts b/src/coord/Axis.ts
index 6226e96b26..3a27d895ab 100644
--- a/src/coord/Axis.ts
+++ b/src/coord/Axis.ts
@@ -17,8 +17,8 @@
 * under the License.
 */
 
-import {each, map} from 'zrender/src/core/util';
-import {linearMap, getPixelPrecision, round} from '../util/number';
+import { each, map, isFunction } from 'zrender/src/core/util';
+import { linearMap, getPixelPrecision, round } from '../util/number';
 import {
     createAxisTicks,
     createAxisLabels,
@@ -28,6 +28,7 @@ import {
     createAxisLabelsComputingContext,
 } from './axisTickLabelBuilder';
 import Scale, { ScaleGetTicksOpt } from '../scale/Scale';
+import { getOptionCategoryInterval } from './axisHelper';
 import { DimensionName, ScaleDataValue, ScaleTick } from '../util/types';
 import OrdinalScale from '../scale/Ordinal';
 import Model from '../model/Model';
@@ -207,9 +208,10 @@ class Axis {
         }, this);
 
         const alignWithLabel = tickModel.get('alignWithLabel');
+        const isCustomIntervalTick = isFunction(getOptionCategoryInterval(tickModel as AxisBaseModel));
 
         fixOnBandTicksCoords(
-            this, ticksCoords, alignWithLabel, opt.clamp
+            this, ticksCoords, alignWithLabel, isCustomIntervalTick, opt.clamp
         );
 
         return ticksCoords;
@@ -315,6 +317,7 @@ function fixOnBandTicksCoords(
     axis: Axis,
     ticksCoords: AxisTickCoord[],
     alignWithLabel: boolean,
+    isCustomIntervalTick: boolean,
     clamp: boolean
 ) {
     const ticksLen = ticksCoords.length;
@@ -326,7 +329,22 @@ function fixOnBandTicksCoords(
     const axisExtent = axis.getExtent();
     let last;
     let diffSize;
-    if (ticksLen === 1) {
+    if (isCustomIntervalTick) {
+        const dataExtent = axis.scale.getExtent();
+        const shift = (axisExtent[1] - axisExtent[0]) / (dataExtent[1] - dataExtent[0] + 1);
+        each(ticksCoords, function (ticksItem: AxisTickCoord) {
+            ticksItem.coord -= shift / 2;
+        });
+        last = {
+            coord: axisExtent[1],
+            tickValue: dataExtent[1] + 1
+        };
+        // if have tick add last tick
+        if (ticksCoords.length) {
+            ticksCoords.push(last);
+        }
+    }
+    else if (ticksLen === 1) {
         ticksCoords[0].coord = axisExtent[0];
         ticksCoords[0].onBand = true;
         last = ticksCoords[1] = {coord: axisExtent[1], tickValue: ticksCoords[0].tickValue, onBand: true};
@@ -335,7 +353,7 @@ function fixOnBandTicksCoords(
         const crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
         const shift = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;
 
-        each(ticksCoords, function (ticksItem) {
+        each(ticksCoords, function (ticksItem: AxisTickCoord) {
             ticksItem.coord -= shift / 2;
             ticksItem.onBand = true;
         });
diff --git a/test/axis-interval.html b/test/axis-interval.html
index b84c3c8ba7..a0b0b5c665 100644
--- a/test/axis-interval.html
+++ b/test/axis-interval.html
@@ -56,7 +56,7 @@
     <h1>[ Test time axis interval ]&nbsp;&nbsp;&nbsp; should not overlap when data zoom.</h1>
     <div class="chart" id="main2"></div>
 
-    <h1>Test xAxis.axisTick.interval</h1>
+    <h1>Test xAxis.axisTick.interval with boundaryGap **true**</h1>
     <div class="chart" id="main30"></div>
     <div class="chart" id="main31"></div>
     <div class="chart" id="main32"></div>
@@ -64,6 +64,14 @@ <h1>Test xAxis.axisTick.interval</h1>
     <div class="chart" id="main34"></div>
     <div class="chart" id="main35"></div>
 
+    <h1>Test xAxis.axisTick.interval with boundaryGap **false**</h1>
+    <div class="chart" id="main60"></div>
+    <div class="chart" id="main61"></div>
+    <div class="chart" id="main62"></div>
+    <div class="chart" id="main63"></div>
+    <div class="chart" id="main64"></div>
+    <div class="chart" id="main65"></div>
+
     <div style="height: 600px;">
         <div class="chart" id="main4"></div>
     </div>
@@ -362,6 +370,9 @@ <h1>Test xAxis.axisTick.interval</h1>
         ], function (echarts) {
 
             var testArr = [
+                [true, true, true, true],
+                [false, false, false, false],
+                [true, false, false, false],
                 [true, false, true, true],
                 [true, false, true, false],
                 [false, true, true, false],
@@ -389,6 +400,7 @@ <h1>Test xAxis.axisTick.interval</h1>
                         bottom: 30
                     },
                     xAxis: {
+                        boundaryGap: true,
                         type: 'category',
                         data: ['Mon', 'Tue', 'Wed', 'Thu'],
                         axisTick: {
@@ -427,7 +439,76 @@ <h1>Test xAxis.axisTick.interval</h1>
     </script>
 
 
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+
+            var testArr = [
+                [true, true, true, true],
+                [false, false, false, false],
+                [true, true, false, false],
+                [true, false, false, false],
+                [false, true, false, false],
+                [false, false, false, true],
+            ];
+
+            function print(index) {
+                return `intervalList:\n[${testArr[index].toString()}] \n\n currentIndex: ${index}`
+            }
+
+            function makeOption(dataIndex) {
+                var option = {
+                    title: {
+                        text: print(dataIndex),
+                        textStyle: {
+                            fontSize: 12
+                        }
+                    },
+                    grid: {
+                        top: 10,
+                        right: 50,
+                        left: 160,
+                        bottom: 30
+                    },
+                    xAxis: {
+                        boundaryGap: false,
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu'],
+                        axisTick: {
+                            show: true,
+                            interval: function (index) {
+                                // return index && !!x2Data[index]
+                                return testArr[dataIndex][index]
+                            },
+                            length: 30,
+                            alignWithLabel: false
+                        },
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [{
+                        data: [820, 932, 901, 934],
+                        type: 'line'
+                    }]
+                };
+
+                return option;
+            }
+
+            for (var i = 0; i < testArr.length; i++) {
+                var dom = document.getElementById('main6' + i);
+                if (dom) {
+                    dom.style.height = '90px';
+                    var chart = echarts.init(dom);
+                    chart.setOption(makeOption(i));
+                }
+            }
 
+        });
+
+    </script>
     <script>
 
         require([
@@ -538,4 +619,4 @@ <h1>Test xAxis.axisTick.interval</h1>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>