diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index 310ddffd1d..146ebdc4f5 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -35,6 +35,29 @@ var _eventPos = [0, 0];
 // Just for compatible with ec2.
 zrUtil.extend(Model.prototype, barItemStyle);
 
+function getClipArea(coord, data) {
+    var coordSysClipArea = coord.getArea && coord.getArea();
+    if (coord.type === 'cartesian2d') {
+        var baseAxis = coord.getBaseAxis();
+        // When boundaryGap is false or using time axis. bar may exceed the grid.
+        // We should not clip this part.
+        // See test/bar2.html
+        if (baseAxis.type !== 'category' || !baseAxis.onBand) {
+            var expandWidth = data.getLayout('bandWidth');
+            if (baseAxis.isHorizontal()) {
+                coordSysClipArea.x -= expandWidth;
+                coordSysClipArea.width += expandWidth * 2;
+            }
+            else {
+                coordSysClipArea.y -= expandWidth;
+                coordSysClipArea.height += expandWidth * 2;
+            }
+        }
+    }
+
+    return coordSysClipArea;
+}
+
 export default echarts.extendChartView({
 
     type: 'bar',
@@ -94,10 +117,8 @@ export default echarts.extendChartView({
 
         var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
 
-        var coordSysClipArea = coord.getArea && coord.getArea();
-
         var needsClip = seriesModel.get('clip', true);
-
+        var coordSysClipArea = getClipArea(coord, data);
         // If there is clipPath created in large mode. Remove it.
         group.removeClipPath();
         // We don't use clipPath in normal mode because we needs a perfect animation
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index 5d211d814c..b5c998b635 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -223,6 +223,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
         var offset = -widthSum / 2;
         zrUtil.each(stacks, function (column, stackId) {
             result[coordSysName][stackId] = result[coordSysName][stackId] || {
+                bandWidth: bandWidth,
                 offset: offset,
                 width: column.width
             };
@@ -280,6 +281,7 @@ export function layout(seriesType, ecModel) {
         lastStackCoordsOrigin[stackId] = lastStackCoordsOrigin[stackId] || []; // Fix #4243
 
         data.setLayout({
+            bandWidth: columnLayoutInfo.bandWidth,
             offset: columnOffset,
             size: columnWidth
         });