gantt-canvas-chart 1.5.3 → 1.5.4

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -197,6 +197,7 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -553,8 +554,17 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
     let visibleRowIndex = 0;
@@ -640,9 +650,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -720,20 +730,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -768,7 +778,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -782,11 +792,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -809,7 +814,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -898,7 +903,7 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
     let visibleRowIndex = 0;
@@ -938,8 +943,9 @@ class GanttChart {
       for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -980,7 +986,7 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
         switch (this.config.viewMode) {
@@ -1029,14 +1035,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -10,7 +10,8 @@
   overflow: hidden;
   position: relative;
   background: white;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-chart-container {
@@ -19,7 +20,8 @@
   position: relative;
   background: #ffffff;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-scroll-dummy {

package/dist/index.d.ts

@@ -118,6 +118,11 @@ export declare class GanttChart {
     private updateVirtualRanges;
     private updateDimensions;
     private setupCanvas;
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val: number): number;
     private calculateAllTaskPositions;
     private getIterationStartDate;
     render(scrolling?: boolean): void;
@@ -178,6 +183,7 @@ export declare interface GanttConfig {
     offsetTop?: number;
     offsetLeft?: number;
     scrollEdgeThresholds?: number;
+    xGap?: number;
     enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
     viewFactors?: {
         Day: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -195,6 +195,7 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -551,8 +552,17 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
     let visibleRowIndex = 0;
@@ -638,9 +648,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -718,20 +728,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -766,7 +776,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -780,11 +790,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -807,7 +812,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -896,7 +901,7 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
     let visibleRowIndex = 0;
@@ -936,8 +941,9 @@ class GanttChart {
       for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -978,7 +984,7 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
         switch (this.config.viewMode) {
@@ -1027,14 +1033,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -199,6 +199,7 @@
         offsetTop: 0,
         offsetLeft: 0,
         scrollEdgeThresholds: 10,
+        xGap: 0,
         enabledLoadMore: [],
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#C1EFCF",
@@ -555,8 +556,17 @@
       canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      ctx.textBaseline = "middle";
+      ctx.imageSmoothingEnabled = false;
       return ctx;
     }
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val) {
+      return Math.floor(val) + 0.5;
+    }
     calculateAllTaskPositions() {
       this.taskPositions.clear();
       let visibleRowIndex = 0;
@@ -642,9 +652,9 @@
       const h = this.config.headerHeight;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, 0);
+      ctx.translate(-Math.round(this.scrollLeft), 0);
       ctx.fillStyle = this.config.headerBgColor;
-      ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+      ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
       ctx.textBaseline = "middle";
       ctx.textRendering = "optimizeLegibility";
       let currentDate = new Date(this.visibleDateRange.start);
@@ -722,20 +732,20 @@
       }
       const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
       ctx.fillStyle = "#333";
-      ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "left";
       groupedBlocks.forEach((group) => {
         const visibleStart = Math.max(group.startX, this.scrollLeft);
         const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
         if (visibleEnd > visibleStart) {
           ctx.fillStyle = this.config.headerBgColor;
-          ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+          ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
           ctx.fillStyle = "#333";
-          ctx.fillText(group.text, visibleStart + 5, group.yPos);
+          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
         }
       });
       while (currentDateForLower <= this.visibleDateRange.end) {
-        const x = this.dateToX(currentDateForLower);
+        const x = this.snap(this.dateToX(currentDateForLower));
         let lowerText = "";
         let nextDate;
         switch (this.config.viewMode) {
@@ -770,7 +780,7 @@
         }
         const unitWidth = this.dateToX(nextDate) - x;
         ctx.fillStyle = "#000412";
-        ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
         ctx.textAlign = "center";
         ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
@@ -784,11 +794,6 @@
           currentDateForLower = nextDate;
         }
       }
-      ctx.beginPath();
-      ctx.moveTo(this.scrollLeft, h - 0.5);
-      ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-      ctx.strokeStyle = "#e0e0e0";
-      ctx.stroke();
       ctx.restore();
     }
     // Helper method to group consecutive blocks with same text
@@ -811,7 +816,7 @@
       const ctx = this.mainCtx;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, -this.scrollTop);
+      ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
       const { start: startDate, end: endDate } = this.visibleDateRange;
       this.drawGrid(ctx, startDate, endDate);
       this.drawToday(ctx);
@@ -900,7 +905,7 @@
     }
     drawAllTasks(ctx) {
       ctx.textBaseline = "middle";
-      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textRendering = "optimizeSpeed";
       ctx.imageSmoothingEnabled = false;
       let visibleRowIndex = 0;
@@ -940,8 +945,9 @@
         for (let i = 0; i <= visibleRowCount; i++) {
           const y = i * this.config.rowHeight;
           if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-          ctx.moveTo(this.scrollLeft, y);
-          ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+          const sharpY = this.snap(y);
+          ctx.moveTo(this.scrollLeft, sharpY);
+          ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
         }
       }
       if (this.config.showColLines) {
@@ -982,7 +988,7 @@
           currentDate = nextDate;
         }
         while (currentDate <= endDate) {
-          const x = this.dateToX(currentDate);
+          const x = this.snap(this.dateToX(currentDate));
           ctx.moveTo(x, this.scrollTop);
           ctx.lineTo(x, this.scrollTop + this.viewportHeight);
           switch (this.config.viewMode) {
@@ -1031,14 +1037,14 @@
       const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
       if (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
       }
       if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
         ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-        ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+        ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+        ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#000";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",