gantt-canvas-chart 1.0.1 → 1.1.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -95,6 +95,8 @@ class GanttChart {
   mainCtx;
   timelineStart;
   timelineEnd;
+  minDate;
+  // private maxDate: Date | null;
   pixelsPerDay;
   scrollLeft;
   scrollTop;
@@ -147,8 +149,8 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-      planBorderColor: "#caeed2",
-      actualBgColor: "#78c78f",
+      planBorderColor: "#C1EFCF",
+      actualBgColor: "#5AC989",
       ...config
     };
     this.headerCanvas = headerCanvas;
@@ -163,6 +165,7 @@ class GanttChart {
     this.mainCtx = this.mainCanvas.getContext("2d");
     this.timelineStart = /* @__PURE__ */ new Date();
     this.timelineEnd = /* @__PURE__ */ new Date();
+    this.minDate = null;
     this.pixelsPerDay = 40;
     this.scrollLeft = 0;
     this.scrollTop = 0;
@@ -178,6 +181,7 @@ class GanttChart {
     this.boundHandleMouseMove = this.handleMouseMove.bind(this);
     this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
+    this.scrollToStartDate = this.scrollToStartDate.bind(this);
     this.init();
   }
   init() {
@@ -218,12 +222,16 @@ class GanttChart {
     this.updateDimensions();
     this.render();
   }
-  setData(newData) {
+  setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
-    this.calculateFullTimeline();
-    this.updateDimensions();
-    this.render();
+    if (newConfig) {
+      this.updateConfig(newConfig);
+    } else {
+      this.calculateFullTimeline();
+      this.updateDimensions();
+      this.render();
+    }
   }
   destroy() {
     if (this.resizeObserver) {
@@ -254,6 +262,7 @@ class GanttChart {
         }
       });
     }
+    this.minDate = minDate;
     minDate = DateUtils.addDays(minDate, -7);
     maxDate = DateUtils.addDays(maxDate, 14);
     switch (this.config.viewMode) {
@@ -289,8 +298,8 @@ class GanttChart {
     this.viewportWidth = this.container.clientWidth;
     this.viewportHeight = this.container.clientHeight;
     this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-    this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-    this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+    this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+    this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
     this.updateDimensions();
     this.render();
   }
@@ -328,6 +337,7 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    return ctx;
   }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
@@ -383,6 +393,7 @@ class GanttChart {
     ctx.fillStyle = "#f9f9f9";
     ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
+    ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
     currentDate = this.getIterationStartDate(currentDate);
     let lastUpperText = "";
@@ -449,15 +460,16 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.textRendering = "optimizeLegibility";
         ctx.textAlign = "left";
         ctx.fillText(upperText, x + 5, h * 0.35);
         lastUpperText = upperText;
       }
-      ctx.fillStyle = "#666";
-      ctx.font = "12px sans-serif";
+      ctx.fillStyle = "#000412";
+      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
-      ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+      ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
       ctx.moveTo(x, h * 0.5);
       ctx.lineTo(x, h);
@@ -569,7 +581,9 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = "12px Arial";
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.textRendering = "optimizeSpeed";
+    ctx.imageSmoothingEnabled = false;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
@@ -586,7 +600,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -689,7 +703,7 @@ class GanttChart {
       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(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * 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;
@@ -701,19 +715,19 @@ class GanttChart {
       ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
-    ctx.fillStyle = "#333";
+    ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
+      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));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+      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));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
     }
   }
   getTaskStyles(task) {
@@ -807,6 +821,18 @@ class GanttChart {
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
     return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
   }
+  /**
+   * scroll to specified date position, default to minDate
+   *
+   * @param date
+   */
+  scrollToStartDate(date) {
+    const startDate = date ? date : this.minDate;
+    if (startDate) {
+      const xPosition = this.dateToX(startDate);
+      this.container.scrollTo({ left: xPosition - 80 });
+    }
+  }
 }
 exports.DateUtils = DateUtils;
 exports.GanttChart = GanttChart;

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -10,6 +10,7 @@
   overflow: hidden;
   position: relative;
   background: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .__gantt-chart-container {
@@ -18,6 +19,7 @@
   position: relative;
   background: #ffffff;
   height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .__gantt-scroll-dummy {
@@ -37,6 +39,7 @@
   z-index: 10;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
+  text-rendering: optimizeSpeed;
 }
 
 .__gantt-main-canvas {
@@ -44,6 +47,26 @@
   top: 56px; /* Corresponds to header height */
   left: 0;
   z-index: 1;
+  text-rendering: optimizeSpeed;
+}
+
+/* Add to your CSS file or create a stylesheet */
+.__gantt-chart-container {
+  transform: translateZ(0); /* Force hardware acceleration */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.__gantt-header-canvas,
+.__gantt-main-canvas {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  shape-rendering: crispEdges;
+  /* Add font rendering optimizations */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
 }
 
 /* Tooltip */

package/dist/{main.d.ts → index.d.ts}

@@ -33,6 +33,7 @@ export declare class GanttChart {
     private mainCtx;
     private timelineStart;
     private timelineEnd;
+    private minDate;
     private pixelsPerDay;
     private scrollLeft;
     private scrollTop;
@@ -54,7 +55,7 @@ export declare class GanttChart {
     private buildTaskMap;
     private setupEvents;
     updateConfig(newConfig: GanttConfig): void;
-    setData(newData: GanttData): void;
+    setData(newData: GanttData, newConfig?: GanttConfig): void;
     destroy(): void;
     private calculateFullTimeline;
     private updatePixelsPerDay;
@@ -88,6 +89,12 @@ export declare class GanttChart {
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
+    /**
+     * scroll to specified date position, default to minDate
+     *
+     * @param date
+     */
+    scrollToStartDate(date?: Date): void;
 }
 
 declare interface GanttConfig {

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -93,6 +93,8 @@ class GanttChart {
   mainCtx;
   timelineStart;
   timelineEnd;
+  minDate;
+  // private maxDate: Date | null;
   pixelsPerDay;
   scrollLeft;
   scrollTop;
@@ -145,8 +147,8 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-      planBorderColor: "#caeed2",
-      actualBgColor: "#78c78f",
+      planBorderColor: "#C1EFCF",
+      actualBgColor: "#5AC989",
       ...config
     };
     this.headerCanvas = headerCanvas;
@@ -161,6 +163,7 @@ class GanttChart {
     this.mainCtx = this.mainCanvas.getContext("2d");
     this.timelineStart = /* @__PURE__ */ new Date();
     this.timelineEnd = /* @__PURE__ */ new Date();
+    this.minDate = null;
     this.pixelsPerDay = 40;
     this.scrollLeft = 0;
     this.scrollTop = 0;
@@ -176,6 +179,7 @@ class GanttChart {
     this.boundHandleMouseMove = this.handleMouseMove.bind(this);
     this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
+    this.scrollToStartDate = this.scrollToStartDate.bind(this);
     this.init();
   }
   init() {
@@ -216,12 +220,16 @@ class GanttChart {
     this.updateDimensions();
     this.render();
   }
-  setData(newData) {
+  setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
-    this.calculateFullTimeline();
-    this.updateDimensions();
-    this.render();
+    if (newConfig) {
+      this.updateConfig(newConfig);
+    } else {
+      this.calculateFullTimeline();
+      this.updateDimensions();
+      this.render();
+    }
   }
   destroy() {
     if (this.resizeObserver) {
@@ -252,6 +260,7 @@ class GanttChart {
         }
       });
     }
+    this.minDate = minDate;
     minDate = DateUtils.addDays(minDate, -7);
     maxDate = DateUtils.addDays(maxDate, 14);
     switch (this.config.viewMode) {
@@ -287,8 +296,8 @@ class GanttChart {
     this.viewportWidth = this.container.clientWidth;
     this.viewportHeight = this.container.clientHeight;
     this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-    this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-    this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+    this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+    this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
     this.updateDimensions();
     this.render();
   }
@@ -326,6 +335,7 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    return ctx;
   }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
@@ -381,6 +391,7 @@ class GanttChart {
     ctx.fillStyle = "#f9f9f9";
     ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
+    ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
     currentDate = this.getIterationStartDate(currentDate);
     let lastUpperText = "";
@@ -447,15 +458,16 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.textRendering = "optimizeLegibility";
         ctx.textAlign = "left";
         ctx.fillText(upperText, x + 5, h * 0.35);
         lastUpperText = upperText;
       }
-      ctx.fillStyle = "#666";
-      ctx.font = "12px sans-serif";
+      ctx.fillStyle = "#000412";
+      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
-      ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+      ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
       ctx.moveTo(x, h * 0.5);
       ctx.lineTo(x, h);
@@ -567,7 +579,9 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = "12px Arial";
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.textRendering = "optimizeSpeed";
+    ctx.imageSmoothingEnabled = false;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
@@ -584,7 +598,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -687,7 +701,7 @@ class GanttChart {
       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(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * 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;
@@ -699,19 +713,19 @@ class GanttChart {
       ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
-    ctx.fillStyle = "#333";
+    ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
+      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));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+      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));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
     }
   }
   getTaskStyles(task) {
@@ -805,6 +819,18 @@ class GanttChart {
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
     return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
   }
+  /**
+   * scroll to specified date position, default to minDate
+   *
+   * @param date
+   */
+  scrollToStartDate(date) {
+    const startDate = date ? date : this.minDate;
+    if (startDate) {
+      const xPosition = this.dateToX(startDate);
+      this.container.scrollTo({ left: xPosition - 80 });
+    }
+  }
 }
 export {
   DateUtils,

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -97,6 +97,8 @@
     mainCtx;
     timelineStart;
     timelineEnd;
+    minDate;
+    // private maxDate: Date | null;
     pixelsPerDay;
     scrollLeft;
     scrollTop;
@@ -149,8 +151,8 @@
         offsetTop: 0,
         offsetLeft: 0,
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-        planBorderColor: "#caeed2",
-        actualBgColor: "#78c78f",
+        planBorderColor: "#C1EFCF",
+        actualBgColor: "#5AC989",
         ...config
       };
       this.headerCanvas = headerCanvas;
@@ -165,6 +167,7 @@
       this.mainCtx = this.mainCanvas.getContext("2d");
       this.timelineStart = /* @__PURE__ */ new Date();
       this.timelineEnd = /* @__PURE__ */ new Date();
+      this.minDate = null;
       this.pixelsPerDay = 40;
       this.scrollLeft = 0;
       this.scrollTop = 0;
@@ -180,6 +183,7 @@
       this.boundHandleMouseMove = this.handleMouseMove.bind(this);
       this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
       this.boundHandleScroll = this.handleScroll.bind(this);
+      this.scrollToStartDate = this.scrollToStartDate.bind(this);
       this.init();
     }
     init() {
@@ -220,12 +224,16 @@
       this.updateDimensions();
       this.render();
     }
-    setData(newData) {
+    setData(newData, newConfig) {
       this.data = newData;
       this.buildTaskMap();
-      this.calculateFullTimeline();
-      this.updateDimensions();
-      this.render();
+      if (newConfig) {
+        this.updateConfig(newConfig);
+      } else {
+        this.calculateFullTimeline();
+        this.updateDimensions();
+        this.render();
+      }
     }
     destroy() {
       if (this.resizeObserver) {
@@ -256,6 +264,7 @@
           }
         });
       }
+      this.minDate = minDate;
       minDate = DateUtils.addDays(minDate, -7);
       maxDate = DateUtils.addDays(maxDate, 14);
       switch (this.config.viewMode) {
@@ -291,8 +300,8 @@
       this.viewportWidth = this.container.clientWidth;
       this.viewportHeight = this.container.clientHeight;
       this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-      this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-      this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+      this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+      this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
       this.updateDimensions();
       this.render();
     }
@@ -330,6 +339,7 @@
       canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      return ctx;
     }
     calculateAllTaskPositions() {
       this.taskPositions.clear();
@@ -385,6 +395,7 @@
       ctx.fillStyle = "#f9f9f9";
       ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
       ctx.textBaseline = "middle";
+      ctx.textRendering = "optimizeLegibility";
       let currentDate = new Date(this.visibleDateRange.start);
       currentDate = this.getIterationStartDate(currentDate);
       let lastUpperText = "";
@@ -451,15 +462,16 @@
         const unitWidth = this.dateToX(nextDate) - x;
         if (upperText !== lastUpperText) {
           ctx.fillStyle = "#333";
-          ctx.font = "bold 13px sans-serif";
+          ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+          ctx.textRendering = "optimizeLegibility";
           ctx.textAlign = "left";
           ctx.fillText(upperText, x + 5, h * 0.35);
           lastUpperText = upperText;
         }
-        ctx.fillStyle = "#666";
-        ctx.font = "12px sans-serif";
+        ctx.fillStyle = "#000412";
+        ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
         ctx.textAlign = "center";
-        ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+        ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
         ctx.moveTo(x, h * 0.5);
         ctx.lineTo(x, h);
@@ -571,7 +583,9 @@
     }
     drawAllTasks(ctx) {
       ctx.textBaseline = "middle";
-      ctx.font = "12px Arial";
+      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.textRendering = "optimizeSpeed";
+      ctx.imageSmoothingEnabled = false;
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
         const y = i * this.config.rowHeight;
@@ -588,7 +602,7 @@
       }
     }
     drawGrid(ctx, startDate, endDate) {
-      ctx.strokeStyle = "#f0f0f0";
+      ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
       if (this.config.showRowLines) {
@@ -691,7 +705,7 @@
         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(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+        ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * 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;
@@ -703,19 +717,19 @@
         ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
         ctx.stroke();
       }
-      ctx.fillStyle = "#333";
+      ctx.fillStyle = "#000";
       if (this.config.showLeftRemark && task.leftRemark) {
         ctx.textAlign = "right";
-        ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
+        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));
       }
       if (this.config.showRightRemark && task.rightRemark) {
         ctx.textAlign = "left";
-        ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+        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));
       }
       if (this.config.showCenterRemark && task.centerRemark) {
         const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
         ctx.textAlign = "center";
-        ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
       }
     }
     getTaskStyles(task) {
@@ -809,6 +823,18 @@
     static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
       return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
     }
+    /**
+     * scroll to specified date position, default to minDate
+     *
+     * @param date
+     */
+    scrollToStartDate(date) {
+      const startDate = date ? date : this.minDate;
+      if (startDate) {
+        const xPosition = this.dateToX(startDate);
+        this.container.scrollTo({ left: xPosition - 80 });
+      }
+    }
   }
   exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;

package/package.json

@@ -1,20 +1,27 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
-  "types": "dist/main.d.ts",
+  "types": "dist/index.d.ts",
   "unpkg": "dist/index.umd.js",
   "jsdelivr": "dist/index.umd.js",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/types/main.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.cjs"
     },
-    "./styles": "./dist/index.css"
+    "./style.css": "./dist/index.css"
   },
   "files": [
     "dist"