Merge pull request #67 from igor90/main

Added gradient
Makanz · Aug 22, 2022 · 751f94a · 751f94a
2 parents a73e346 + d9fec4e
commit 751f94a
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,8 @@ Install & import the plugin via npm:
 `npm i chart.js chartjs-plugin-trendline`
 
 ```js
-import ChartJS from "chart.js";
-import chartTrendline from "chartjs-plugin-trendline";
+import ChartJS from 'chart.js';
+import chartTrendline from 'chartjs-plugin-trendline';
 
 ChartJS.plugins.register(chartTrendline);
 ```
@@ -33,7 +33,8 @@ To configure the trendline plugin you simply add a new config options to your da
 ```javascript
 {
 	trendlineLinear: {
-		style: "rgba(255,105,180, .8)",
+		colorMin: "red",
+		colorMax: "green",
 		lineStyle: "dotted|solid",
 		width: 2,
 		projection: true|false (optional)

diff --git a/dist/chartjs-plugin-trendline.min.js b/dist/chartjs-plugin-trendline.min.js
diff --git a/example/barChart.html b/example/barChart.html
@@ -20,7 +20,7 @@
                                         backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                                         data: [2478,5267,734,784,433],
                                         trendlineLinear: {
-                                            style: "rgba(255,105,180, .8)",
+                                            colorMin: "rgba(255,105,180, .8)",
                                             lineStyle: "dotted",
                                             width: 2
                                         }

diff --git a/example/lineChart.html b/example/lineChart.html
@@ -19,7 +19,7 @@
                                 borderColor: "#3e95cd",
                                 fill: false,
                                 trendlineLinear: {
-                                    style: "#3e95cd",
+                                    colorMin: "#3e95cd",
                                     lineStyle: "line",
                                     width: 1
                                 }
@@ -29,7 +29,8 @@
                                 borderColor: "#8e5ea2",
                                 fill: false,
                                 trendlineLinear: {
-                                    style: "#8e5ea2",
+                                    colorMin: "red",
+                                    colorMax: "green",
                                     lineStyle: "line",
                                     width: 1
                                 }

diff --git a/example/lineChartProjection.html b/example/lineChartProjection.html
@@ -18,7 +18,7 @@
                                 borderColor: "#3e95cd",
                                 fill: false,
                                 trendlineLinear: {
-                                    style: "#3e95cd",
+                                    colorMin: "#3e95cd",
                                     lineStyle: "line",
                                     width: 1,
                                     projection: true

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/chartjs-plugin-trendline.js b/src/chartjs-plugin-trendline.js
@@ -42,11 +42,13 @@ var pluginTrendlineLinear = {
 };
 
 function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
-    var style = dataset.trendlineLinear.style || dataset.borderColor;
+    var defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
+    var colorMin = dataset.trendlineLinear.colorMin || defaultColor;
+    var colorMax = dataset.trendlineLinear.colorMax || defaultColor;
     var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
     var lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
+    var fillColor = dataset.trendlineLinear.fillColor;
 
-    style = style !== undefined ? style : 'rgba(169,169,169, .6)';
     lineWidth = lineWidth !== undefined ? lineWidth : 3;
 
     var fitter = new LineFitter();
@@ -126,8 +128,31 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
-    ctx.strokeStyle = style;
+
+    var gradient= ctx.createLinearGradient(x1, y1, x2, y2);
+    if (y2 < y1) {
+        gradient.addColorStop(0, colorMax);
+        gradient.addColorStop(1, colorMin);
+    } else{
+        gradient.addColorStop(0, colorMin);
+        gradient.addColorStop(1, colorMax);
+    }
+
+    ctx.strokeStyle = gradient;
+
     ctx.stroke();
+    ctx.closePath();
+
+    if (!!fillColor) {
+        ctx.fillStyle = fillColor;
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.lineTo(x2, drawBottom);
+        ctx.lineTo(x1, drawBottom);
+        ctx.closePath();
+        ctx.fill();
+    }
 }
 
 function LineFitter() {