chartjs-plugin-trendline 2.1.3 → 2.1.5

package/README.md

@@ -34,13 +34,34 @@ To configure the trendline plugin you simply add a new config options to your da
 ```javascript
 {
 	trendlineLinear: {
-		colorMin: "red",
-		colorMax: "green",
-		lineStyle: "dotted|solid",
-		width: 2,
-		xAxisKey: "time" (optional),
-		yAxisKey: "usage" (optional),
-		projection: true|false (optional)
+		colorMin: Color
+		colorMax: Color,
+		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"
+		width: number,
+		xAxisKey: string, // optional
+		yAxisKey: string, // optional
+		projection: boolean, // optional
+		// optional
+		label: {
+			color: Color,
+			text: string,
+			display: boolean,
+			displayValue: boolean,
+			offset: number,
+			font: {
+				family: string,
+				size: number,
+			}
+		},
+		// optional
+		legend: {
+			text: string,
+			strokeStyle: Color,
+			fillStyle: Color,
+			lineCap: string,
+			lineDash: number[],
+			lineWidth: number,
+		}
 	}
 }
 ```
@@ -49,6 +70,7 @@ To configure the trendline plugin you simply add a new config options to your da
 
 -   bar
 -   line
+-   scatter
 
 ## Contributing
 

package/dist/chartjs-plugin-trendline.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
-(()=>{var t={339:(t,e)=>{const i={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,i;for(let s in t.scales)if("x"==s[0]?i=t.scales[s]:e=t.scales[s],i&&e)break;const a=t.ctx;t.data.datasets.forEach(((e,n)=>{const r=e.alwaysShowTrendline||t.isDatasetVisible(n);if(e.trendlineLinear&&r&&e.data.length>1){const r=t.getDatasetMeta(n);s(r,a,e,i,t.scales[r.yAxisID])}})),a.setLineDash([])}},s=(t,e,i,s,n)=>{let r=i.borderColor||"rgba(169,169,169, .6)",o=i.trendlineLinear.colorMin||r,l=i.trendlineLinear.colorMax||r,h=i.trendlineLinear.width??i.borderWidth??3,d=i.trendlineLinear.lineStyle||"solid",u=i.trendlineLinear.fillColor;const m=t.controller.chart.options,x="object"==typeof m.parsing?m.parsing:void 0,c=i.trendlineLinear.xAxisKey||x?.xAxisKey||"x",f=i.trendlineLinear.yAxisKey||x?.yAxisKey||"y";let X=new a,y=i.data.findIndex((t=>null!=t)),p=i.data.length-1,g=t.data[y][c],w=t.data[p][c],Y="object"==typeof i.data[y];i.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(s.options.type)){let i=null!=t[c]?t[c]:t.t;void 0!==i?X.add(new Date(i).getTime(),t[f]):X.add(e,t)}else Y?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||X.add(e,t.y):X.add(e,t.x):X.add(t.x,t.y):X.add(e,t)}));let L,F,P=s.getPixelForValue(X.minx),b=n.getPixelForValue(X.f(X.minx));if(i.trendlineLinear.projection&&X.scale()<0){let t=X.fo();t<X.minx&&(t=X.maxx),L=s.getPixelForValue(t),F=n.getPixelForValue(X.f(t))}else L=s.getPixelForValue(X.maxx),F=n.getPixelForValue(X.f(X.maxx));(isFinite(g)||isFinite(w))&&(P=g,L=w);let C=t.controller.chart.chartArea.bottom,D=t.controller.chart.width;if(b>C){let t=b-C,e=b-F;b=C,P+=D*(t/e)}else if(F>C){let t=F-C,e=F-b;F=C,L=D-(L-(D-D*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(P,b),e.lineTo(L,F);let v=e.createLinearGradient(P,b,L,F);F<b?(v.addColorStop(0,l),v.addColorStop(1,o)):(v.addColorStop(0,o),v.addColorStop(1,l)),e.strokeStyle=v,e.stroke(),e.closePath(),u&&(e.fillStyle=u,e.beginPath(),e.moveTo(P,b),e.lineTo(L,F),e.lineTo(L,C),e.lineTo(P,C),e.closePath(),e.fill())};class a{constructor(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}add(t,e){t=parseFloat(t),e=parseFloat(e),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*e,this.sumY+=e,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),e>this.maxy&&(this.maxy=e)}f(t){t=parseFloat(t);let e=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/e+t*((this.count*this.sumXY-this.sumX*this.sumY)/e)}fo(){let t=this.count*this.sumX2-this.sumX*this.sumX;return-(this.sumX2*this.sumY-this.sumX*this.sumXY)/t/((this.count*this.sumXY-this.sumX*this.sumY)/t)}scale(){let t=this.count*this.sumX2-this.sumX*this.sumX;return(this.count*this.sumXY-this.sumX*this.sumY)/t}}"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(i):window.Chart.plugins.register(i));try{t.exports=i}catch(t){}}},e={};!function i(s){var a=e[s];if(void 0!==a)return a.exports;var n=e[s]={exports:{}};return t[s](n,n.exports,i),n.exports}(339)})();
+(()=>{var e={339:(e,t)=>{const i={id:"chartjs-plugin-trendline",afterDatasetsDraw:e=>{const t=e.ctx,{xScale:i,yScale:n}=a(e);e.data.datasets.forEach(((a,l)=>{const r=a.alwaysShowTrendline||e.isDatasetVisible(l);if(a.trendlineLinear&&r&&a.data.length>1){const r=e.getDatasetMeta(l);s(r,t,a,i,n)}})),t.setLineDash([])},beforeInit:e=>{e.data.datasets.forEach((t=>{if(t.trendlineLinear&&t.trendlineLinear.label){const i=t.trendlineLinear.label,a=e.legend.options.labels.generateLabels;e.legend.options.labels.generateLabels=function(e){const s=a(e),n=t.trendlineLinear.legend;return n&&!1!==n.display&&s.push({text:n.text||i+" (Trendline)",strokeStyle:n.color||t.borderColor||"rgba(169,169,169, .6)",fillStyle:n.fillStyle||"transparent",lineCap:n.lineCap||"butt",lineDash:n.lineDash||[],lineWidth:n.width||1}),s}}}))}},a=e=>{let t,i;for(const a of Object.values(e.scales))if(a.isHorizontal()?t=a:i=a,t&&i)break;return{xScale:t,yScale:i}},s=(e,t,i,a,s)=>{const x=i.borderColor||"rgba(169,169,169, .6)",{colorMin:c=x,colorMax:u=x,width:y=i.borderWidth||3,lineStyle:f="solid",fillColor:m=!1}=i.trendlineLinear||{},{color:p=x,text:b="Trendline",display:g=!0,displayValue:w=!0,offset:L=10}=i.trendlineLinear.label||{},{family:S="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",size:v=12}=i.trendlineLinear.label?.font||{},D=e.controller.chart.options,N="object"==typeof D.parsing?D.parsing:void 0,T=i.trendlineLinear?.xAxisKey||N?.xAxisKey||"x",C=i.trendlineLinear?.yAxisKey||N?.yAxisKey||"y";let P=new h,M=i.data.findIndex((e=>null!=e)),V=i.data.length-1,A=e.data[M]?.[T],F=e.data[V]?.[T],k="object"==typeof i.data[M];i.data.forEach(((e,t)=>{if(null!=e)if(["time","timeseries"].includes(a.options.type)){let i=null!=e[T]?e[T]:e.t;void 0!==i?P.add(new Date(i).getTime(),e[C]):P.add(t,e)}else k?isNaN(e.x)||isNaN(e.y)?isNaN(e.x)?isNaN(e.y)||P.add(t,e.y):P.add(t,e.x):P.add(e.x,e.y):P.add(t,e)}));let j,E,W=a.getPixelForValue(P.minx),K=s.getPixelForValue(P.f(P.minx));if(i.trendlineLinear.projection&&P.scale()<0){let e=P.fo();e<P.minx&&(e=P.maxx),j=a.getPixelForValue(e),E=s.getPixelForValue(P.f(e))}else j=a.getPixelForValue(P.maxx),E=s.getPixelForValue(P.f(P.maxx));(isFinite(A)||isFinite(F))&&(W=A,j=F);const $=e.controller.chart.chartArea.bottom,H=e.controller.chart.width;l({x1:W,y1:K,x2:j,y2:E,drawBottom:$,chartWidth:H}),t.lineWidth=y,r(t,f),o({ctx:t,x1:W,y1:K,x2:j,y2:E,colorMin:c,colorMax:u}),m&&d(t,W,K,j,E,$,m);const I=Math.atan2(E-K,j-W),z=(K-E)/(j-W);if(i.trendlineLinear.label&&!1!==g){const e=w?`${b} (Slope: ${z.toFixed(2)})`:b;n(t,e,W,K,j,E,I,p,S,v,L)}},n=(e,t,i,a,s,n,l,r,o,d,h)=>{e.font=`${d}px ${o}`,e.fillStyle=r;const x=(i+s)/2,c=(a+n)/2;e.save(),e.translate(x,c),e.rotate(l),e.fillText(t,0,-h),e.restore()},l=({x1:e,y1:t,x2:i,y2:a,drawBottom:s,chartWidth:n})=>{if(t>s){t=s}else if(a>s){let e=a-s,l=a-t;a=s,i=n-(i-(n-n*(e/l)))}},r=(e,t)=>{switch(t){case"dotted":e.setLineDash([2,2]);break;case"dashed":e.setLineDash([8,3]);break;case"dashdot":e.setLineDash([8,3,2,3]);break;default:e.setLineDash([])}},o=({ctx:e,x1:t,y1:i,x2:a,y2:s,colorMin:n,colorMax:l})=>{e.beginPath(),e.moveTo(t,i),e.lineTo(a,s);let r=e.createLinearGradient(t,i,a,s);r.addColorStop(0,n),r.addColorStop(1,l),e.strokeStyle=r,e.stroke(),e.closePath()},d=(e,t,i,a,s,n,l)=>{e.beginPath(),e.moveTo(t,i),e.lineTo(a,s),e.lineTo(a,n),e.lineTo(t,n),e.lineTo(t,i),e.closePath(),e.fillStyle=l,e.fill()};class h{constructor(){this.count=0,this.sumx=0,this.sumy=0,this.sumx2=0,this.sumxy=0,this.minx=Number.MAX_VALUE,this.maxx=Number.MIN_VALUE}add(e,t){this.sumx+=e,this.sumy+=t,this.sumx2+=e*e,this.sumxy+=e*t,e<this.minx&&(this.minx=e),e>this.maxx&&(this.maxx=e),this.count++}slope(){const e=this.count*this.sumx2-this.sumx*this.sumx;return(this.count*this.sumxy-this.sumx*this.sumy)/e}intercept(){return(this.sumy-this.slope()*this.sumx)/this.count}f(e){return this.slope()*e+this.intercept()}fo(){return-this.intercept()/this.slope()}scale(){return this.slope()}}"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(i):window.Chart.plugins.register(i));try{e.exports=i}catch(e){}}},t={};!function i(a){var s=t[a];if(void 0!==s)return s.exports;var n=t[a]={exports:{}};return e[a](n,n.exports,i),n.exports}(339)})();

package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt

@@ -1,10 +1,11 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.3
+ * Version: 2.1.5
  *
  * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
  *
- * Mod by: vesal: accept also xy-data so works with scatter
+ * Modified by @vesal: accept xy-data from scatter,
+ * Modified by @Megaemce: add label and basic legend to trendline, add JSDoc,
  */

package/example/barChart.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>BarChart Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
+    <script>
+            document.addEventListener("DOMContentLoaded", function(event) {
+                // Bar chart
+                new Chart(document.getElementById("bar-chart"), {
+                            type: 'bar',
+                            data: {
+                                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+                                datasets: [
+                                    {
+                                        label: "Population (millions)",
+                                        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+                                        data: [2478,5267,734,784,433],
+                                        trendlineLinear: {
+                                            colorMin: "rgba(255,105,180, .8)",
+                                            lineStyle: "dotted",
+                                            width: 2
+                                        }
+                                    },
+                                ]
+                            },
+                                options: {
+                                legend: { display: false },
+                                title: {
+                                    display: true,
+                                    text: 'Predicted world population (millions) in 2050'
+                                }
+                            }
+                        });
+                });
+        </script>
+</head>
+<body>
+    <h1>Bar Chart</h1>
+
+    <div style="width: 800px;">
+        <canvas id="bar-chart"></canvas>
+    </div>
+
+    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
+</body>
+</html>

package/example/lineChart.html

@@ -1,73 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>LineChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../src/chartjs-plugin-trendline.js"></script>
-    <script>
-            document.addEventListener("DOMContentLoaded", function(event) {
-                new Chart(document.getElementById("line-chart"), {
-                        type: 'line',
-                        data: {
-                            labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
-                            datasets: [{ 
-                                data: [86,114,106,106,107,111,133,221,783,2478],
-                                label: "Africa",
-                                borderColor: "#3e95cd",
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>LineChart Example with Labeled Trendlines</title>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
+        <script src="./../src/chartjs-plugin-trendline.js"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', function (event) {
+                new Chart(document.getElementById('line-chart'), {
+                    type: 'line',
+                    data: {
+                        labels: [
+                            1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950,
+                            1999, 2050,
+                        ],
+                        datasets: [
+                            {
+                                data: [
+                                    86, 114, 106, 106, 107, 111, 133, 221, 783,
+                                    2478,
+                                ],
+                                label: 'Africa',
+                                borderColor: '#3e95cd',
                                 fill: false,
                                 trendlineLinear: {
-                                    colorMin: "#3e95cd",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, { 
-                                data: [282,350,411,502,635,809,947,1402,3700,5267],
-                                label: "Asia",
-                                borderColor: "#8e5ea2",
+                                    colorMin: '#3e95cd',
+                                    width: 1,
+                                    lineStyle: 'solid',
+                                },
+                            },
+                            {
+                                data: [
+                                    282, 350, 411, 502, 635, 809, 947, 1402,
+                                    3700, 5267,
+                                ],
+                                label: 'Asia',
+                                borderColor: '#8e5ea2',
                                 fill: false,
                                 trendlineLinear: {
-                                    colorMin: "red",
-                                    colorMax: "green",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, { 
-                                data: [168,170,178,190,203,276,408,547,675,734],
-                                label: "Europe",
-                                borderColor: "#3cba9f",
-                                fill: false
-                            }, { 
-                                data: [40,20,10,16,24,38,74,167,508,784],
-                                label: "Latin America",
-                                borderColor: "#e8c3b9",
-                                fill: false
-                            }, { 
-                                data: [6,3,2,2,7,26,82,172,312,433],
-                                label: "North America",
-                                borderColor: "#c45850",
-                                fill: false
-                            }
-                            ]
-                        },
-                        options: {
+                                    colorMin: 'red',
+                                    colorMax: 'green',
+                                    lineStyle: 'dashed',
+                                    width: 1,
+                                    label: {
+                                        font: {
+                                            size: 12,
+                                        },
+                                        color: 'red',
+                                        text: 'Asia',
+                                        displayValue: false,
+                                        offset: 10,
+                                    },
+                                    legend: {
+                                        color: 'red',
+                                        text: 'Asian trendline',
+                                        display: true,
+                                        lineDash: [8, 3],
+                                    },
+                                },
+                            },
+                            {
+                                data: [
+                                    168, 170, 178, 190, 203, 276, 408, 547, 675,
+                                    734,
+                                ],
+                                label: 'Europe',
+                                borderColor: '#3cba9f',
+                                fill: false,
+                            },
+                            {
+                                data: [
+                                    40, 20, 10, 16, 24, 38, 74, 167, 508, 784,
+                                ],
+                                label: 'Latin America',
+                                borderColor: '#e8c3b9',
+                                fill: false,
+                            },
+                            {
+                                data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
+                                label: 'North America',
+                                borderColor: '#c45850',
+                                fill: false,
+                            },
+                        ],
+                    },
+                    options: {
+                        plugins: {
                             title: {
-                            display: true,
-                            text: 'World population per region (in millions)'
-                            }
-                        }
-                        });
+                                display: true,
+                                text: 'World population per region (in millions)',
+                            },
+                        },
+                    },
                 });
+            });
         </script>
-</head>
-<body>
-    <h1>Line Chart</h1>
-
-    <div style="width: 800px;">
-        <canvas id="line-chart"></canvas>
-    </div>
+    </head>
+    <body>
+        <h1>Line Chart with Labeled Trendlines</h1>
 
-</body>
-</html>
+        <div style="width: 800px">
+            <canvas id="line-chart"></canvas>
+        </div>
+    </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-trendline",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "Trendline for Chart.js",
   "main": "src/chartjs-plugin-trendline.js",
   "scripts": {

package/src/chartjs-plugin-trendline.js

@@ -1,24 +1,29 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.3
+ * Version: 2.1.5
  *
  * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
  *
- * Mod by: vesal: accept also xy-data so works with scatter
+ * Modified by @vesal: accept xy-data from scatter,
+ * Modified by @Megaemce: add label and basic legend to trendline, add JSDoc,
+ */
+
+/**
+ * Chart.js plugin to draw linear trendlines on datasets.
  */
 const pluginTrendlineLinear = {
     id: 'chartjs-plugin-trendline',
+
+    /**
+     * Hook that is called after datasets are drawn.
+     * Adds trendlines to the datasets that have `trendlineLinear` configured.
+     * @param {Chart} chartInstance - The chart instance where datasets are drawn.
+     */
     afterDatasetsDraw: (chartInstance) => {
-        let yScale;
-        let xScale;
-        for (let axis in chartInstance.scales) {
-            if (axis[0] == 'x') xScale = chartInstance.scales[axis];
-            else yScale = chartInstance.scales[axis];
-            if (xScale && yScale) break;
-        }
         const ctx = chartInstance.ctx;
+        const { xScale, yScale } = getScales(chartInstance);
 
         chartInstance.data.datasets.forEach((dataset, index) => {
             const showTrendline =
@@ -31,27 +36,98 @@ const pluginTrendlineLinear = {
                 dataset.data.length > 1
             ) {
                 const datasetMeta = chartInstance.getDatasetMeta(index);
-                addFitter(
-                    datasetMeta,
-                    ctx,
-                    dataset,
-                    xScale,
-                    chartInstance.scales[datasetMeta.yAxisID]
-                );
+                addFitter(datasetMeta, ctx, dataset, xScale, yScale);
             }
         });
 
+        // Reset to solid line after drawing trendline
         ctx.setLineDash([]);
     },
+
+    beforeInit: (chartInstance) => {
+        const datasets = chartInstance.data.datasets;
+
+        datasets.forEach((dataset) => {
+            if (dataset.trendlineLinear && dataset.trendlineLinear.label) {
+                const label = dataset.trendlineLinear.label;
+
+                // Access chartInstance to update legend labels
+                const originalGenerateLabels =
+                    chartInstance.legend.options.labels.generateLabels;
+
+                chartInstance.legend.options.labels.generateLabels = function (
+                    chart
+                ) {
+                    const defaultLabels = originalGenerateLabels(chart);
+
+                    const legendConfig = dataset.trendlineLinear.legend;
+
+                    // Display the legend is it's populated and not set to hidden
+                    if (legendConfig && legendConfig.display !== false) {
+                        defaultLabels.push({
+                            text: legendConfig.text || label + ' (Trendline)',
+                            strokeStyle:
+                                legendConfig.color ||
+                                dataset.borderColor ||
+                                'rgba(169,169,169, .6)',
+                            fillStyle: legendConfig.fillStyle || 'transparent',
+                            lineCap: legendConfig.lineCap || 'butt',
+                            lineDash: legendConfig.lineDash || [],
+                            lineWidth: legendConfig.width || 1,
+                        });
+                    }
+                    return defaultLabels;
+                };
+            }
+        });
+    },
 };
 
+/**
+ * Retrieves the x and y scales from the chart instance.
+ * @param {Chart} chartInstance - The chart instance.
+ * @returns {Object} - The xScale and yScale of the chart.
+ */
+const getScales = (chartInstance) => {
+    let xScale, yScale;
+    for (const scale of Object.values(chartInstance.scales)) {
+        if (scale.isHorizontal()) xScale = scale;
+        else yScale = scale;
+        if (xScale && yScale) break;
+    }
+    return { xScale, yScale };
+};
+
+/**
+ * Adds a trendline (fitter) to the dataset on the chart and optionally labels it with trend value.
+ * @param {Object} datasetMeta - Metadata about the dataset.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
+ * @param {Object} dataset - The dataset configuration from the chart.
+ * @param {Scale} xScale - The x-axis scale object.
+ * @param {Scale} yScale - The y-axis scale object.
+ */
 const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
-    let defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
-    let colorMin = dataset.trendlineLinear.colorMin || defaultColor;
-    let colorMax = dataset.trendlineLinear.colorMax || defaultColor;
-    let lineWidth = dataset.trendlineLinear.width ?? dataset.borderWidth ?? 3;
-    let lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
-    let fillColor = dataset.trendlineLinear.fillColor;
+    const defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
+    const {
+        colorMin = defaultColor,
+        colorMax = defaultColor,
+        width: lineWidth = dataset.borderWidth || 3,
+        lineStyle = 'solid',
+        fillColor = false,
+    } = dataset.trendlineLinear || {};
+
+    const {
+        color = defaultColor,
+        text = 'Trendline',
+        display = true,
+        displayValue = true,
+        offset = 10,
+    } = dataset.trendlineLinear.label || {};
+
+    const {
+        family = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+        size = 12,
+    } = dataset.trendlineLinear.label?.font || {};
 
     const chartOptions = datasetMeta.controller.chart.options;
     const parsingOptions =
@@ -59,17 +135,17 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
             ? chartOptions.parsing
             : undefined;
     const xAxisKey =
-        dataset.trendlineLinear.xAxisKey || parsingOptions?.xAxisKey || 'x';
+        dataset.trendlineLinear?.xAxisKey || parsingOptions?.xAxisKey || 'x';
     const yAxisKey =
-        dataset.trendlineLinear.yAxisKey || parsingOptions?.yAxisKey || 'y';
+        dataset.trendlineLinear?.yAxisKey || parsingOptions?.yAxisKey || 'y';
 
     let fitter = new LineFitter();
-    let firstIndex = dataset.data.findIndex((d) => {
-        return d !== undefined && d !== null;
-    });
+    let firstIndex = dataset.data.findIndex(
+        (d) => d !== undefined && d !== null
+    );
     let lastIndex = dataset.data.length - 1;
-    let startPos = datasetMeta.data[firstIndex][xAxisKey];
-    let endPos = datasetMeta.data[lastIndex][xAxisKey];
+    let startPos = datasetMeta.data[firstIndex]?.[xAxisKey];
+    let endPos = datasetMeta.data[lastIndex]?.[xAxisKey];
     let xy = typeof dataset.data[firstIndex] === 'object';
 
     dataset.data.forEach((data, index) => {
@@ -98,33 +174,131 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     let x1 = xScale.getPixelForValue(fitter.minx);
     let y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
 
-    let x2;
-    let y2;
+    let x2, y2;
 
-    // Project only on x axes, do not project if trendline will never hit x axes
+    // Projection logic for trendline
     if (dataset.trendlineLinear.projection && fitter.scale() < 0) {
-        //  X
         let x2value = fitter.fo();
         if (x2value < fitter.minx) x2value = fitter.maxx;
         x2 = xScale.getPixelForValue(x2value);
-
-        //  Y
         y2 = yScale.getPixelForValue(fitter.f(x2value));
     } else {
         x2 = xScale.getPixelForValue(fitter.maxx);
         y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
     }
 
-    if(isFinite(startPos) || isFinite(endPos)) {
+    if (isFinite(startPos) || isFinite(endPos)) {
         x1 = startPos;
         x2 = endPos;
     }
 
-    let drawBottom = datasetMeta.controller.chart.chartArea.bottom;
-    let chartWidth = datasetMeta.controller.chart.width;
+    const drawBottom = datasetMeta.controller.chart.chartArea.bottom;
+    const chartWidth = datasetMeta.controller.chart.width;
 
+    adjustLineForOverflow({ x1, y1, x2, y2, drawBottom, chartWidth });
+
+    // Set line width and styles
+    ctx.lineWidth = lineWidth;
+    setLineStyle(ctx, lineStyle);
+
+    // Draw the trendline
+    drawTrendline({ ctx, x1, y1, x2, y2, colorMin, colorMax });
+
+    // Optionally fill below the trendline
+    if (fillColor) {
+        fillBelowTrendline(ctx, x1, y1, x2, y2, drawBottom, fillColor);
+    }
+
+    // Calculate the angle of the trendline
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+
+    // Calculate the slope of the trendline (value of trend)
+    const slope = (y1 - y2) / (x2 - x1);
+
+    // Add the label to the trendline if it's populated and not set to hidden
+    if (dataset.trendlineLinear.label && display !== false) {
+        const trendText = displayValue
+            ? `${text} (Slope: ${slope.toFixed(2)})`
+            : text;
+        addTrendlineLabel(
+            ctx,
+            trendText,
+            x1,
+            y1,
+            x2,
+            y2,
+            angle,
+            color,
+            family,
+            size,
+            offset
+        );
+    }
+};
+
+/**
+ * Adds a label to the trendline at the calculated angle.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
+ * @param {string} label - The label text to add.
+ * @param {number} x1 - The starting x-coordinate of the trendline.
+ * @param {number} y1 - The starting y-coordinate of the trendline.
+ * @param {number} x2 - The ending x-coordinate of the trendline.
+ * @param {number} y2 - The ending y-coordinate of the trendline.
+ * @param {number} angle - The angle (in radians) of the trendline.
+ * @param {string} labelColor - The color of the label text.
+ * @param {string} family - The font family for the label text.
+ * @param {number} size - The font size for the label text.
+ * @param {number} offset - The offset of the label from the trendline
+ */
+const addTrendlineLabel = (
+    ctx,
+    label,
+    x1,
+    y1,
+    x2,
+    y2,
+    angle,
+    labelColor,
+    family,
+    size,
+    offset
+) => {
+    // Set the label font and color
+    ctx.font = `${size}px ${family}`;
+    ctx.fillStyle = labelColor;
+
+    // Calculate label position (middle of the trendline)
+    const labelX = (x1 + x2) / 2;
+    const labelY = (y1 + y2) / 2;
+
+    // Save the current state of the canvas
+    ctx.save();
+
+    // Translate to the label position
+    ctx.translate(labelX, labelY);
+
+    // Rotate the context to align with the trendline
+    ctx.rotate(angle);
+
+    // Draw the label
+    ctx.fillText(label, 0, -offset);
+
+    // Restore the canvas state
+    ctx.restore();
+};
+
+/**
+ * Adjusts the line if it overflows below the chart bottom.
+ * @param {Object} params - The line parameters.
+ * @param {number} params.x1 - Starting x-coordinate of the trendline.
+ * @param {number} params.y1 - Starting y-coordinate of the trendline.
+ * @param {number} params.x2 - Ending x-coordinate of the trendline.
+ * @param {number} params.y2 - Ending y-coordinate of the trendline.
+ * @param {number} params.drawBottom - Bottom boundary of the chart.
+ * @param {number} params.chartWidth - Width of the chart.
+ */
+const adjustLineForOverflow = ({ x1, y1, x2, y2, drawBottom, chartWidth }) => {
     if (y1 > drawBottom) {
-        // Left side is below zero
         let diff = y1 - drawBottom;
         let lineHeight = y1 - y2;
         let overlapPercentage = diff / lineHeight;
@@ -133,7 +307,6 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         y1 = drawBottom;
         x1 = x1 + addition;
     } else if (y2 > drawBottom) {
-        // right side is below zero
         let diff = y2 - drawBottom;
         let lineHeight = y2 - y1;
         let overlapPercentage = diff / lineHeight;
@@ -142,95 +315,148 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         y2 = drawBottom;
         x2 = chartWidth - (x2 - subtraction);
     }
+};
 
-    ctx.lineWidth = lineWidth;
-
-    if (lineStyle === 'dotted') {
-        ctx.setLineDash([2, 3]); // Dotted
-    } else {
-        ctx.setLineDash([]); // Solid
+/**
+ * Sets the line style (dashed, dotted, solid) for the canvas context.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
+ * @param {string} lineStyle - The style of the line ('dotted', 'dashed', 'solid', etc.).
+ */
+const setLineStyle = (ctx, lineStyle) => {
+    switch (lineStyle) {
+        case 'dotted':
+            ctx.setLineDash([2, 2]);
+            break;
+        case 'dashed':
+            ctx.setLineDash([8, 3]);
+            break;
+        case 'dashdot':
+            ctx.setLineDash([8, 3, 2, 3]);
+            break;
+        case 'solid':
+        default:
+            ctx.setLineDash([]);
+            break;
     }
+};
 
+/**
+ * Draws the trendline on the canvas context.
+ * @param {Object} params - The trendline parameters.
+ * @param {CanvasRenderingContext2D} params.ctx - The canvas rendering context.
+ * @param {number} params.x1 - Starting x-coordinate of the trendline.
+ * @param {number} params.y1 - Starting y-coordinate of the trendline.
+ * @param {number} params.x2 - Ending x-coordinate of the trendline.
+ * @param {number} params.y2 - Ending y-coordinate of the trendline.
+ * @param {string} params.colorMin - The starting color of the trendline gradient.
+ * @param {string} params.colorMax - The ending color of the trendline gradient.
+ */
+const drawTrendline = ({ ctx, x1, y1, x2, y2, colorMin, colorMax }) => {
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
 
     let 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);
-    }
+    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();
-    }
+/**
+ * Fills the area below the trendline with the specified color.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
+ * @param {number} x1 - Starting x-coordinate of the trendline.
+ * @param {number} y1 - Starting y-coordinate of the trendline.
+ * @param {number} x2 - Ending x-coordinate of the trendline.
+ * @param {number} y2 - Ending y-coordinate of the trendline.
+ * @param {number} drawBottom - The bottom boundary of the chart.
+ * @param {string} fillColor - The color to fill below the trendline.
+ */
+const fillBelowTrendline = (ctx, x1, y1, x2, y2, drawBottom, fillColor) => {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(x2, drawBottom);
+    ctx.lineTo(x1, drawBottom);
+    ctx.lineTo(x1, y1);
+    ctx.closePath();
+
+    ctx.fillStyle = fillColor;
+    ctx.fill();
 };
 
+/**
+ * A class that fits a line to a series of points using least squares.
+ */
 class LineFitter {
     constructor() {
         this.count = 0;
-        this.sumX = 0;
-        this.sumX2 = 0;
-        this.sumXY = 0;
-        this.sumY = 0;
-        this.minx = 1e100;
-        this.maxx = -1e100;
-        this.maxy = -1e100;
+        this.sumx = 0;
+        this.sumy = 0;
+        this.sumx2 = 0;
+        this.sumxy = 0;
+        this.minx = Number.MAX_VALUE;
+        this.maxx = Number.MIN_VALUE;
     }
 
+    /**
+     * Adds a point to the line fitter.
+     * @param {number} x - The x-coordinate of the point.
+     * @param {number} y - The y-coordinate of the point.
+     */
     add(x, y) {
-        x = parseFloat(x);
-        y = parseFloat(y);
-
-        this.count++;
-        this.sumX += x;
-        this.sumX2 += x * x;
-        this.sumXY += x * y;
-        this.sumY += y;
+        this.sumx += x;
+        this.sumy += y;
+        this.sumx2 += x * x;
+        this.sumxy += x * y;
         if (x < this.minx) this.minx = x;
         if (x > this.maxx) this.maxx = x;
-        if (y > this.maxy) this.maxy = y;
+        this.count++;
     }
 
-    f(x) {
-        x = parseFloat(x);
+    /**
+     * Calculates the slope of the fitted line.
+     * @returns {number} - The slope of the line.
+     */
+    slope() {
+        const denominator = this.count * this.sumx2 - this.sumx * this.sumx;
+        return (this.count * this.sumxy - this.sumx * this.sumy) / denominator;
+    }
 
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
-        return offset + x * scale;
+    /**
+     * Calculates the y-intercept of the fitted line.
+     * @returns {number} - The y-intercept of the line.
+     */
+    intercept() {
+        return (this.sumy - this.slope() * this.sumx) / this.count;
     }
 
-    fo() {
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+    /**
+     * Returns the fitted value (y) for a given x.
+     * @param {number} x - The x-coordinate.
+     * @returns {number} - The corresponding y-coordinate on the fitted line.
+     */
+    f(x) {
+        return this.slope() * x + this.intercept();
+    }
 
-        // Get x when y = 0
-        let xo = -offset / scale;
-        return xo;
+    /**
+     * Calculates the projection of the line for the future value.
+     * @returns {number} - The future value based on the fitted line.
+     */
+    fo() {
+        return -this.intercept() / this.slope();
     }
 
+    /**
+     * Returns the scale (variance) of the fitted line.
+     * @returns {number} - The scale of the fitted line.
+     */
     scale() {
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
-
-        return scale;
+        return this.slope();
     }
 }
 

package/example/barChart_not_working.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>BarChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../src/chartjs-plugin-trendline.js"></script>
-    <script>
-            
-    const datasets = [{
-	data: [
-            { x: '202309', y: 144214.8 },
-            { x: '202310', y: 144514.8 },
-            { x: '202311', y: 150626 },
-            { x: '202312', y: 204523 },
-            { x: '202401', y: 125402 },
-            { x: '202402', y: 225232 },
-            { x: '202403', y: 2786435 },
-            { x: '202404', y: 584833 },
-        ],
-	label: 'Usage Not Working!',
-	yAxisID: 'y',
-	lineTension: 0,
-	borderWidth: 2,
-	trendlineLinear: {
-		colorMin: '#ff0000',
-		colorMax: '#00ff00',
-		lineStyle: 'dotted',
-		width: 2,
-		yAxisKey: 'y',
-		xAxisKey: 'x',
-		projection: true,
-	},
-}, ]
-    const chartConfig = {
-        type: 'line',
-        data: {
-            datasets: datasets
-        },
-        options: {
-            scales: {
-                x: {
-                    ticks: {
-                        padding: 8
-                    },
-                },
-                y: {
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    title: {
-                        display: true,
-                        text: 'Usage',
-                        padding: 8,
-                    },
-                },
-            },
-        },
-        plugins: [pluginTrendlineLinear],
-    };
-
-            document.addEventListener("DOMContentLoaded", function(event) {
-                 // Bar chart
-                    new Chart(document.getElementById("bar-chart"), chartConfig);
-                });
-        </script>
-</head>
-<body>
-    <h1>Bar Chart</h1>
-
-    <div style="width: 800px;">
-        <canvas id="bar-chart"></canvas>
-    </div>
-
-    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
-</body>
-</html>

package/example/barChart_working.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>BarChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../src/chartjs-plugin-trendline.js"></script>
-    <script>
-
-    const datasets = [{
-        data: [144214.8, 144514.8, 150626, 204523, 125402, 225232, 2786435, 584833],
-        label: 'Usage',
-        yAxisID: 'y',
-        lineTension: 0,
-        borderWidth: 2,
-        trendlineLinear: {
-            colorMin: '#ff0000',
-            colorMax: '#00ff00',
-            lineStyle: 'dotted',
-            width: 2,
-            yAxisKey: 'y',
-            xAxisKey: 'x',
-            projection: true,
-        },
-    }, ]
-
-    const chartConfig = {
-        type: 'line',
-        data: {
-            datasets: datasets,
-            labels: ['202309', '202310', '202311', '202401', '202402', '202403', '202404', '20240'],
-        },
-        options: {
-            scales: {
-                x: {
-                    ticks: {
-                        padding: 8
-                    },
-                },
-                y: {
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    title: {
-                        display: true,
-                        text: 'Usage',
-                        padding: 8,
-                    },
-                },
-            },
-        },
-        plugins: [pluginTrendlineLinear],
-    };
-
-            document.addEventListener("DOMContentLoaded", function(event) {
-                 // Bar chart
-                    new Chart(document.getElementById("bar-chart"), chartConfig);
-                });
-        </script>
-</head>
-<body>
-    <h1>Bar Chart</h1>
-
-    <div style="width: 800px;">
-        <canvas id="bar-chart"></canvas>
-    </div>
-
-    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
-</body>
-</html>