gantt-canvas-chart 1.3.0 → 1.3.1

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * gantt-canvas-chart v1.3.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -196,6 +196,7 @@ class GanttChart {
     this.handleScroll = this.handleScroll.bind(this);
     this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
     this.verticalScrollTo = this.verticalScrollTo.bind(this);
+    this.handleResize = this.handleResize.bind(this);
     this.init();
   }
   init() {
@@ -218,7 +219,6 @@ class GanttChart {
   }
   setupEvents() {
     this.container.addEventListener("scroll", this.handleScroll);
-    this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
       setTimeout(() => {
@@ -260,6 +260,9 @@ class GanttChart {
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
     this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.data = [];
+    this.taskMap.clear();
+    this.taskPositions.clear();
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -375,13 +378,10 @@ class GanttChart {
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
-        console.log("left-loadMoreData::", this.data);
       } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
         await this.loadMoreData("right");
-        console.log("right-loadMoreData::", this.data);
       } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
         await this.loadMoreData("bottom");
-        console.log("bottom-loadMoreData::", this.data);
       }
     } finally {
       this.lastScrollLeft = scrollLeft;
@@ -510,17 +510,39 @@ class GanttChart {
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
+        let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+        let offset_x_actual_start = null, offset_x_actual_end = null;
+        let x_plan_width = 0;
+        let x_actual_width = 0;
+        const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
+        const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
+        if (x_plan_start && x_plan_end) {
+          x_plan_width = x_plan_end - x_plan_start;
+          offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
+          x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+        }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
         }
+        if (x_actual_start) {
+          x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+        }
         this.taskPositions.set(task.id, {
           x_plan_start,
           x_plan_end,
           x_actual_start,
           x_actual_end,
+          offset_x_plan_start,
+          offset_x_plan_end,
+          offset_x_actual_start,
+          offset_x_actual_end,
+          x_plan_width,
+          x_actual_width,
           y: y + this.config.rowHeight * 0.5,
           row: i
         });
@@ -765,9 +787,9 @@ class GanttChart {
         if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-        const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+        const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -922,42 +944,35 @@ class GanttChart {
   }
   drawTask(ctx, task, y, pos) {
     const offset = 4;
-    const width = pos.x_plan_end - pos.x_plan_start;
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
-    const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
-      pos.x_actual_start += aWidth * offsetX_actual;
-      pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), 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;
-      pos.x_plan_start += width * offsetX;
-      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.x_plan_start + 2, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
-      const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
+      const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
     }
   }
   getTaskStyles(task) {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * gantt-canvas-chart v1.3.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

package/dist/index.d.ts

@@ -187,6 +187,12 @@ export declare interface TaskPosition {
     x_plan_end: number;
     x_actual_start: number | null;
     x_actual_end: number | null;
+    x_plan_width: number;
+    x_actual_width: number;
+    offset_x_plan_start: number;
+    offset_x_plan_end: number;
+    offset_x_actual_start: number | null;
+    offset_x_actual_end: number | null;
     y: number;
     row: number;
 }

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * gantt-canvas-chart v1.3.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -194,6 +194,7 @@ class GanttChart {
     this.handleScroll = this.handleScroll.bind(this);
     this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
     this.verticalScrollTo = this.verticalScrollTo.bind(this);
+    this.handleResize = this.handleResize.bind(this);
     this.init();
   }
   init() {
@@ -216,7 +217,6 @@ class GanttChart {
   }
   setupEvents() {
     this.container.addEventListener("scroll", this.handleScroll);
-    this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
       setTimeout(() => {
@@ -258,6 +258,9 @@ class GanttChart {
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
     this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.data = [];
+    this.taskMap.clear();
+    this.taskPositions.clear();
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -373,13 +376,10 @@ class GanttChart {
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
-        console.log("left-loadMoreData::", this.data);
       } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
         await this.loadMoreData("right");
-        console.log("right-loadMoreData::", this.data);
       } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
         await this.loadMoreData("bottom");
-        console.log("bottom-loadMoreData::", this.data);
       }
     } finally {
       this.lastScrollLeft = scrollLeft;
@@ -508,17 +508,39 @@ class GanttChart {
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
+        let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+        let offset_x_actual_start = null, offset_x_actual_end = null;
+        let x_plan_width = 0;
+        let x_actual_width = 0;
+        const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
+        const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
+        if (x_plan_start && x_plan_end) {
+          x_plan_width = x_plan_end - x_plan_start;
+          offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
+          x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+        }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
         }
+        if (x_actual_start) {
+          x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+        }
         this.taskPositions.set(task.id, {
           x_plan_start,
           x_plan_end,
           x_actual_start,
           x_actual_end,
+          offset_x_plan_start,
+          offset_x_plan_end,
+          offset_x_actual_start,
+          offset_x_actual_end,
+          x_plan_width,
+          x_actual_width,
           y: y + this.config.rowHeight * 0.5,
           row: i
         });
@@ -763,9 +785,9 @@ class GanttChart {
         if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-        const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+        const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -920,42 +942,35 @@ class GanttChart {
   }
   drawTask(ctx, task, y, pos) {
     const offset = 4;
-    const width = pos.x_plan_end - pos.x_plan_start;
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
-    const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
-      pos.x_actual_start += aWidth * offsetX_actual;
-      pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), 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;
-      pos.x_plan_start += width * offsetX;
-      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.x_plan_start + 2, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
-      const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
+      const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
     }
   }
   getTaskStyles(task) {

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * gantt-canvas-chart v1.3.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -198,6 +198,7 @@
       this.handleScroll = this.handleScroll.bind(this);
       this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
       this.verticalScrollTo = this.verticalScrollTo.bind(this);
+      this.handleResize = this.handleResize.bind(this);
       this.init();
     }
     init() {
@@ -220,7 +221,6 @@
     }
     setupEvents() {
       this.container.addEventListener("scroll", this.handleScroll);
-      this.handleResize = this.handleResize.bind(this);
       if (window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(this.handleResize);
         setTimeout(() => {
@@ -262,6 +262,9 @@
       this.container.removeEventListener("scroll", this.handleScroll);
       this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
       this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+      this.data = [];
+      this.taskMap.clear();
+      this.taskPositions.clear();
       this.container.remove();
     }
     calculateFullTimeline() {
@@ -377,13 +380,10 @@
       try {
         if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
           await this.loadMoreData("left");
-          console.log("left-loadMoreData::", this.data);
         } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
           await this.loadMoreData("right");
-          console.log("right-loadMoreData::", this.data);
         } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
           await this.loadMoreData("bottom");
-          console.log("bottom-loadMoreData::", this.data);
         }
       } finally {
         this.lastScrollLeft = scrollLeft;
@@ -512,17 +512,39 @@
           const x_plan_start = this.dateToX(new Date(task.planStart));
           const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
           let x_actual_start = null, x_actual_end = null;
+          let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+          let offset_x_actual_start = null, offset_x_actual_end = null;
+          let x_plan_width = 0;
+          let x_actual_width = 0;
+          const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
+          const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
+          if (x_plan_start && x_plan_end) {
+            x_plan_width = x_plan_end - x_plan_start;
+            offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
+            x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+          }
           if (task.actualStart) {
             x_actual_start = this.dateToX(new Date(task.actualStart));
           }
           if (task.actualEnd) {
             x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
           }
+          if (x_actual_start) {
+            x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+            offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+            x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+          }
           this.taskPositions.set(task.id, {
             x_plan_start,
             x_plan_end,
             x_actual_start,
             x_actual_end,
+            offset_x_plan_start,
+            offset_x_plan_end,
+            offset_x_actual_start,
+            offset_x_actual_end,
+            x_plan_width,
+            x_actual_width,
             y: y + this.config.rowHeight * 0.5,
             row: i
           });
@@ -767,9 +789,9 @@
           if (!fromPos) return;
           const fromRowIndex = this.taskMap.get(depId).row;
           const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-          const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+          const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
           const fromY = fromPos.y;
-          const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+          const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
           const toY = toPos.y;
           ctx.beginPath();
           if (isAdjacent) {
@@ -924,42 +946,35 @@
     }
     drawTask(ctx, task, y, pos) {
       const offset = 4;
-      const width = pos.x_plan_end - pos.x_plan_start;
       const taskY = y + this.config.rowHeight * 0.15 + offset;
       const taskHeight = this.config.rowHeight * 0.7 - offset;
       const textY = y + this.config.rowHeight / 2 + offset;
       const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
-      const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
       if (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
-        pos.x_actual_start += aWidth * offsetX_actual;
-        pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-        ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), 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;
-        pos.x_plan_start += width * offsetX;
-        pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.x_plan_start + 2, taskY);
-        ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+        ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+        ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#000";
       if (this.config.showLeftRemark && task.leftRemark) {
         ctx.textAlign = "right";
-        ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
+        ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
       }
       if (this.config.showRightRemark && task.rightRemark) {
         ctx.textAlign = "left";
-        ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+        ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
       }
       if (this.config.showCenterRemark && task.centerRemark) {
-        const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
+        const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
         ctx.textAlign = "center";
-        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
       }
     }
     getTaskStyles(task) {

package/package.json

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