Merge pull request #95 from BryceSimtars/main

Line Styles added / edited : Dotted, Dashed, DashDot, Solid
Makanz · Sep 13, 2024 · 8330c08 · 8330c08
2 parents 0065682 + 702d8b6
commit 8330c08
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ To configure the trendline plugin you simply add a new config options to your da
 	trendlineLinear: {
 		colorMin: "red",
 		colorMax: "green",
-		lineStyle: "dotted|solid",
+		lineStyle: "dotted|solid|dashed|dashdot",
 		width: 2,
 		xAxisKey: "time" (optional),
 		yAxisKey: "usage" (optional),

diff --git a/src/chartjs-plugin-trendline.js b/src/chartjs-plugin-trendline.js
@@ -145,10 +145,21 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
 
     ctx.lineWidth = lineWidth;
 
-    if (lineStyle === 'dotted') {
-        ctx.setLineDash([2, 3]); // Dotted
-    } else {
-        ctx.setLineDash([]); // Solid
+    // line styles
+    switch (lineStyle) {
+        case 'dotted':
+            ctx.setLineDash([2, 2]); // Dotted
+            break;
+        case 'dashed':
+            ctx.setLineDash([8, 3]); // Dashed
+            break;
+        case 'dashdot':
+            ctx.setLineDash([8, 3, 2, 3]); // Dash-dot
+            break;
+        case 'solid':
+        default:
+            ctx.setLineDash([]); // Solid
+            break;
     }
 
     ctx.beginPath();