gantt-canvas-chart 1.0.1 → 1.0.2

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -147,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;
@@ -383,6 +383,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,13 +450,14 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 13px -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 = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
       ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
       ctx.beginPath();
@@ -569,7 +571,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 +590,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -701,7 +705,7 @@ 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);

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.0.2
  * (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/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -145,8 +145,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;
@@ -381,6 +381,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,13 +448,14 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 13px -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 = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
       ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
       ctx.beginPath();
@@ -567,7 +569,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 +588,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -699,7 +703,7 @@ 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);

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -149,8 +149,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;
@@ -385,6 +385,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,13 +452,14 @@
         const unitWidth = this.dateToX(nextDate) - x;
         if (upperText !== lastUpperText) {
           ctx.fillStyle = "#333";
-          ctx.font = "bold 13px sans-serif";
+          ctx.font = 'bold 13px -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 = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
         ctx.textAlign = "center";
         ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
         ctx.beginPath();
@@ -571,7 +573,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 +592,7 @@
       }
     }
     drawGrid(ctx, startDate, endDate) {
-      ctx.strokeStyle = "#f0f0f0";
+      ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
       if (this.config.showRowLines) {
@@ -703,7 +707,7 @@
         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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",
@@ -14,7 +14,7 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.cjs"
     },
-    "./styles": "./dist/index.css"
+    "./style.css": "./dist/index.css"
   },
   "files": [
     "dist"