chartjs-plugin-trendline 2.0.5 → 2.1.0

package/README.md

@@ -1,7 +1,7 @@
 # chartjs-plugin-trendline
 
 This plugin draws an linear trendline in your Chart.
-It has been tested with Chart.js version 4.3.0.
+It has been tested with Chart.js version 4.4.0.
 
 ## Installation
 
@@ -10,7 +10,7 @@ It has been tested with Chart.js version 4.3.0.
 Load Chart.js first, then the plugin which will automatically register itself with Chart.js
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
 ```
 
@@ -38,6 +38,8 @@ To configure the trendline plugin you simply add a new config options to your da
 		colorMax: "green",
 		lineStyle: "dotted|solid",
 		width: 2,
+		xAxisKey: "time" (optional),
+		yAxisKey: "usage" (optional),
 		projection: true|false (optional)
 	}
 }

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={460:(t,i)=>{var e={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?e=t.scales[a]:i=t.scales[a],e&&i)break;var r=t.ctx;t.data.datasets.forEach((function(i,a){var n=i.alwaysShowTrendline||t.isDatasetVisible(a);if(i.trendlineLinear&&n&&i.data.length>1){var o=t.getDatasetMeta(a);!function(t,i,e,a,r){var n=e.borderColor||"rgba(169,169,169, .6)",o=e.trendlineLinear.colorMin||n,h=e.trendlineLinear.colorMax||n,l=e.trendlineLinear.width||e.borderWidth,u=e.trendlineLinear.lineStyle||"solid",d=e.trendlineLinear.fillColor;l=void 0!==l?l:3;var m=new s,x=e.data.findIndex((t=>null!=t)),c=e.data.length-1,f=t.data[x].x,X=t.data[c].x,v="object"==typeof e.data[x];e.data.forEach((function(t,i){if(null!=t)if(["time","timeseries"].includes(a.options.type)){var e=null!=t.x?t.x:t.t;void 0!==e?m.add(new Date(e).getTime(),t.y):m.add(i,t)}else v?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||m.add(i,t.y):m.add(i,t.x):m.add(t.x,t.y):m.add(i,t)}));var p,y,g=a.getPixelForValue(m.minx),w=r.getPixelForValue(m.f(m.minx));if(e.trendlineLinear.projection&&m.scale()<0){var Y=m.fo();Y<m.minx&&(Y=m.maxx),p=a.getPixelForValue(Y),y=r.getPixelForValue(m.f(Y))}else p=a.getPixelForValue(m.maxx),y=r.getPixelForValue(m.f(m.maxx));v||(g=f,p=X);var L=t.controller.chart.chartArea.bottom,P=t.controller.chart.width;if(w>L){var C=w-L,b=w-y;w=L,g+=P*(C/b)}else y>L&&(C=y-L,b=y-w,y=L,p=P-(p-(P-P*(C/b))));i.lineWidth=l,"dotted"===u?i.setLineDash([2,3]):i.setLineDash([]),i.beginPath(),i.moveTo(g,w),i.lineTo(p,y);var D=i.createLinearGradient(g,w,p,y);y<w?(D.addColorStop(0,h),D.addColorStop(1,o)):(D.addColorStop(0,o),D.addColorStop(1,h)),i.strokeStyle=D,i.stroke(),i.closePath(),!d||(i.fillStyle=d,i.beginPath(),i.moveTo(g,w),i.lineTo(p,y),i.lineTo(p,L),i.lineTo(g,L),i.closePath(),i.fill())}(o,r,i,e,t.scales[o.yAxisID])}})),r.setLineDash([])}};function s(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}s.prototype={add:function(t,i){t=parseFloat(t),i=parseFloat(i),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*i,this.sumY+=i,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),i>this.maxy&&(this.maxy=i)},f:function(t){t=parseFloat(t);var i=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/i+t*((this.count*this.sumXY-this.sumX*this.sumY)/i)},fo:function(){var 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:function(){var 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(e):window.Chart.plugins.register(e));try{t.exports=e}catch(t){}}},i={};!function e(s){var a=i[s];if(void 0!==a)return a.exports;var r=i[s]={exports:{}};return t[s](r,r.exports,e),r.exports}(460)})();
+(()=>{var t={460:(t,e)=>{const s={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,s;for(let i in t.scales)if("x"==i[0]?s=t.scales[i]:e=t.scales[i],s&&e)break;const a=t.ctx;t.data.datasets.forEach(((e,o)=>{const r=e.alwaysShowTrendline||t.isDatasetVisible(o);if(e.trendlineLinear&&r&&e.data.length>1){const r=t.getDatasetMeta(o);i(r,a,e,s,t.scales[r.yAxisID])}})),a.setLineDash([])}},i=(t,e,s,i,o)=>{let r=s.borderColor||"rgba(169,169,169, .6)",n=s.trendlineLinear.colorMin||r,l=s.trendlineLinear.colorMax||r,h=s.trendlineLinear.width||s.borderWidth,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;const m="object"==typeof t.controller.chart.options.parsing?t.controller.chart.options.parsing:void 0,x=s.trendlineLinear.xAxisKey||m?m.xAxisKey:"x",c=s.trendlineLinear.yAxisKey||m?m.yAxisKey:"y";h=void 0!==h?h:3;let f=new a,X=s.data.findIndex((t=>null!=t)),p=s.data.length-1,y=t.data[X][x],g=t.data[p][x],w="object"==typeof s.data[X];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(i.options.type)){let s=null!=t[x]?t[x]:t.t;void 0!==s?f.add(new Date(s).getTime(),t[c]):f.add(e,t)}else w?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||f.add(e,t.y):f.add(e,t.x):f.add(t.x,t.y):f.add(e,t)}));let Y,L,P=i.getPixelForValue(f.minx),b=o.getPixelForValue(f.f(f.minx));if(s.trendlineLinear.projection&&f.scale()<0){let t=f.fo();t<f.minx&&(t=f.maxx),Y=i.getPixelForValue(t),L=o.getPixelForValue(f.f(t))}else Y=i.getPixelForValue(f.maxx),L=o.getPixelForValue(f.f(f.maxx));w||(P=y,Y=g);let C=t.controller.chart.chartArea.bottom,v=t.controller.chart.width;if(b>C){let t=b-C,e=b-L;b=C,P+=v*(t/e)}else if(L>C){let t=L-C,e=L-b;L=C,Y=v-(Y-(v-v*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(P,b),e.lineTo(Y,L);let D=e.createLinearGradient(P,b,Y,L);L<b?(D.addColorStop(0,l),D.addColorStop(1,n)):(D.addColorStop(0,n),D.addColorStop(1,l)),e.strokeStyle=D,e.stroke(),e.closePath(),u&&(e.fillStyle=u,e.beginPath(),e.moveTo(P,b),e.lineTo(Y,L),e.lineTo(Y,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(s):window.Chart.plugins.register(s));try{t.exports=s}catch(t){}}},e={};!function s(i){var a=e[i];if(void 0!==a)return a.exports;var o=e[i]={exports:{}};return t[i](o,o.exports,s),o.exports}(460)})();

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

@@ -1,8 +1,8 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.5
+ * Version: 2.1.0
  *
- * Copyright 2023 Marcus Alsterfjord
+ * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
  *

package/example/barChart.html

@@ -5,7 +5,7 @@
     <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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/example/barChartWithNullValues.html

@@ -5,7 +5,7 @@
     <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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/example/lineChart.html

@@ -0,0 +1,73 @@
+<!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.0/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",
+                                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: {
+                            title: {
+                            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>
+
+</body>
+</html>

package/example/lineChartProjection.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>XYlineChart Projection Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/package.json

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

package/src/chartjs-plugin-trendline.js

@@ -1,37 +1,36 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.5
+ * Version: 2.1.0
  *
- * Copyright 2023 Marcus Alsterfjord
+ * 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
  */
-var pluginTrendlineLinear = {
+const pluginTrendlineLinear = {
     id: 'chartjs-plugin-trendline',
-    afterDatasetsDraw: function (chartInstance) {
-        var yScale;
-        var xScale;
-        for (var axis in chartInstance.scales) {
+    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;
         }
-        var ctx = chartInstance.ctx;
+        const ctx = chartInstance.ctx;
 
-        chartInstance.data.datasets.forEach(function (dataset, index) {
-            var showTrendline =
+        chartInstance.data.datasets.forEach((dataset, index) => {
+            const showTrendline =
                 dataset.alwaysShowTrendline ||
                 chartInstance.isDatasetVisible(index);
 
-            // TODO: Add support for objects
             if (
                 dataset.trendlineLinear &&
                 showTrendline &&
                 dataset.data.length > 1
             ) {
-                var datasetMeta = chartInstance.getDatasetMeta(index);
+                const datasetMeta = chartInstance.getDatasetMeta(index);
                 addFitter(
                     datasetMeta,
                     ctx,
@@ -46,33 +45,37 @@ var pluginTrendlineLinear = {
     },
 };
 
-function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
-    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;
+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;
+    let lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
+    let fillColor = dataset.trendlineLinear.fillColor;
+
+    const parsing = typeof datasetMeta.controller.chart.options.parsing === "object" ?
+        datasetMeta.controller.chart.options.parsing : undefined;
+    const xAxisKey = dataset.trendlineLinear.xAxisKey || parsing ? parsing.xAxisKey : "x";
+    const yAxisKey = dataset.trendlineLinear.yAxisKey || parsing ? parsing.yAxisKey : "y";
 
     lineWidth = lineWidth !== undefined ? lineWidth : 3;
 
-    var fitter = new LineFitter();
-    var firstIndex = dataset.data.findIndex((d) => {
+    let fitter = new LineFitter();
+    let firstIndex = dataset.data.findIndex((d) => {
         return d !== undefined && d !== null;
     });
-    var lastIndex = dataset.data.length - 1;
-    var startPos = datasetMeta.data[firstIndex].x;
-    var endPos = datasetMeta.data[lastIndex].x;
-    var xy = typeof dataset.data[firstIndex] === 'object';
+    let lastIndex = dataset.data.length - 1;
+    let startPos = datasetMeta.data[firstIndex][xAxisKey];
+    let endPos = datasetMeta.data[lastIndex][xAxisKey];
+    let xy = typeof dataset.data[firstIndex] === 'object';
 
-    dataset.data.forEach(function (data, index) {
-        console.log('forEach');
+    dataset.data.forEach((data, index) => {
         if (data == null) return;
 
         if (['time', 'timeseries'].includes(xScale.options.type)) {
-            var x = data.x != null ? data.x : data.t;
+            let x = data[xAxisKey] != null ? data[xAxisKey] : data.t;
             if (x !== undefined) {
-                fitter.add(new Date(x).getTime(), data.y);
+                fitter.add(new Date(x).getTime(), data[yAxisKey]);
             } else {
                 fitter.add(index, data);
             }
@@ -89,16 +92,16 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         }
     });
 
-    var x1 = xScale.getPixelForValue(fitter.minx);
-    var y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
+    let x1 = xScale.getPixelForValue(fitter.minx);
+    let y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
 
-    var x2;
-    var y2;
+    let x2;
+    let y2;
 
     // Project only on x axes, do not project if trendline will never hit x axes
     if (dataset.trendlineLinear.projection && fitter.scale() < 0) {
         //  X
-        var x2value = fitter.fo();
+        let x2value = fitter.fo();
         if (x2value < fitter.minx) x2value = fitter.maxx;
         x2 = xScale.getPixelForValue(x2value);
 
@@ -114,24 +117,24 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         x2 = endPos;
     }
 
-    var drawBottom = datasetMeta.controller.chart.chartArea.bottom;
-    var chartWidth = datasetMeta.controller.chart.width;
+    let drawBottom = datasetMeta.controller.chart.chartArea.bottom;
+    let chartWidth = datasetMeta.controller.chart.width;
 
     if (y1 > drawBottom) {
         // Left side is below zero
-        var diff = y1 - drawBottom;
-        var lineHeight = y1 - y2;
-        var overlapPercentage = diff / lineHeight;
-        var addition = chartWidth * overlapPercentage;
+        let diff = y1 - drawBottom;
+        let lineHeight = y1 - y2;
+        let overlapPercentage = diff / lineHeight;
+        let addition = chartWidth * overlapPercentage;
 
         y1 = drawBottom;
         x1 = x1 + addition;
     } else if (y2 > drawBottom) {
         // right side is below zero
-        var diff = y2 - drawBottom;
-        var lineHeight = y2 - y1;
-        var overlapPercentage = diff / lineHeight;
-        var subtraction = chartWidth - chartWidth * overlapPercentage;
+        let diff = y2 - drawBottom;
+        let lineHeight = y2 - y1;
+        let overlapPercentage = diff / lineHeight;
+        let subtraction = chartWidth - chartWidth * overlapPercentage;
 
         y2 = drawBottom;
         x2 = chartWidth - (x2 - subtraction);
@@ -149,7 +152,7 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
 
-    var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    let gradient = ctx.createLinearGradient(x1, y1, x2, y2);
     if (y2 < y1) {
         gradient.addColorStop(0, colorMax);
         gradient.addColorStop(1, colorMin);
@@ -173,21 +176,21 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         ctx.closePath();
         ctx.fill();
     }
-}
+};
 
-function LineFitter() {
-    this.count = 0;
-    this.sumX = 0;
-    this.sumX2 = 0;
-    this.sumXY = 0;
-    this.sumY = 0;
-    this.minx = 1e100;
-    this.maxx = -1e100;
-    this.maxy = -1e100;
-}
+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;
+    }
 
-LineFitter.prototype = {
-    add: function (x, y) {
+    add(x, y) {
         x = parseFloat(x);
         y = parseFloat(y);
 
@@ -199,31 +202,34 @@ LineFitter.prototype = {
         if (x < this.minx) this.minx = x;
         if (x > this.maxx) this.maxx = x;
         if (y > this.maxy) this.maxy = y;
-    },
-    f: function (x) {
+    }
+
+    f(x) {
         x = parseFloat(x);
 
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+        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;
-    },
-    fo: function () {
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+    }
+
+    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;
 
-        //  Get x when y = 0
-        var xo = -offset / scale;
+        // Get x when y = 0
+        let xo = -offset / scale;
         return xo;
-    },
-    scale: function () {
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+    }
+
+    scale() {
+        let det = this.count * this.sumX2 - this.sumX * this.sumX;
+        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
 
         return scale;
-    },
-};
+    }
+}
 
 // If we're in the browser and have access to the global Chart obj, register plugin automatically
 if (typeof window !== 'undefined' && window.Chart) {

package/example/lineChart-blood-sugar.html

@@ -1,72 +0,0 @@
-<html>
-
-<head>
-  <title>Time scale chart.js</title>
-</head>
-<style>
-  .chartBox {
-    width: 700px
-  }
-</style>
-
-<body>
-  <div class="chartBox">
-    <canvas id="myChart"></canvas>
-  </div>
-
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-
-  <script src="./../src/chartjs-plugin-trendline.js"></script>
-
-  <script>
-    const data = {
-      "labels": [
-    "2023-08-10 20:00:00",
-    "2023-08-10 21:30:00",
-    "2023-08-10 22:30:30",
-    "2023-08-11 07:00:00",
-    "2023-08-11 07:15:00",
-    "2023-08-11 08:00:00"
-  ],
-  "datasets": [
-    {
-      "type": "line",
-      "label": "Blood Sugar",
-      "data": {
-        "2023-08-10 21:30:00": "6.20",
-        "2023-08-10 22:30:30": "6.60",
-        "2023-08-11 07:00:00": "5.90",
-        "2023-08-11 08:00:00": "4.60",
-        "2023-08-11 11:17:00": "5.10",
-        "2023-08-11 12:15:00": "4.90"
-      },
-      "backgroundColor": "#A9CCE3",
-      "pointStyle": "circle",
-      "pointRadius": 6,
-      "pointHoverRadius": 12,
-      "borderColor": "#5DADE2",
-      "trendlineLinear": {
-        "colorMin": "red",
-        "colorMax": "green",
-        "lineStyle": "dotted",
-        "width": 3,
-        "projection": true
-      }
-    }
-  ],
-    };
-    const config = {
-      type: 'line',
-      data
-    };
-    console.log("Loaded");
-    const myChart = new Chart(
-      document.getElementById('myChart'),
-      config,
-    );
-  </script>
-</body>
-
-</html>

package/example/lineChart-double.html

@@ -1,111 +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>LineChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
-    <script src="./../src/chartjs-plugin-trendline.js"></script>
-    <script>
-let data = {
-    "labels": [
-        202303,
-        202304,
-        202305,
-        202306,
-        202307,
-        202308,
-        202309
-    ],
-    "datasets": [
-    {
-        "label": "Dataset 1",
-        "data": [
-            10,
-            30,
-            50,
-            20,
-            25,
-            44,
-            -10
-        ],
-        "borderColor": "#4dc9f6",
-        "backgroundColor": "#4dc9f6",
-        "trendlineLinear": {
-            "colorMin": "#4dc9f6",
-            "colorMax": "#4dc9f6",
-            "lineStyle": "dotted",
-            "width": 2,
-            "projection": false
-        }
-    },
-    {
-        "label": "Dataset 2",
-        "data": [
-            100,
-            33,
-            22,
-            19,
-            11,
-            49,
-            200
-        ],
-        "borderColor": "#f67019",
-        "backgroundColor": "#f67019",
-        "trendlineLinear": {
-            "colorMin": "#f67019",
-            "colorMax": "#f67019",
-            "lineStyle": "solid",
-            "width": 2,
-            "projection": false
-        }
-    }
-]
-};
-
-var lineOptions = {
-    plugins: {
-        legend: {
-            display: true,
-            labels: {
-                fontSize: 10,
-                fontColor: "#000",
-            },
-        },
-    },
-    scales: {
-        x:
-        {
-            gridLines: {
-                display: true,
-            },
-            display: true,
-            color: "rgba(255, 255, 255, 0.1)",
-        },
-        y:
-        {
-            display: false,
-        },
-    },
-    responsive: true,
-    maintainAspectRatio: true,
-};
-            document.addEventListener("DOMContentLoaded", function(event) {
-                new Chart(document.getElementById("line-chart"), {
-                        type: 'line',
-                        data: data,
-                        options:lineOptions
-                        });
-                });
-        </script>
-</head>
-<body>
-    <h1>Line Chart</h1>
-
-    <div style="width: 800px;">
-        <canvas id="line-chart"></canvas>
-    </div>
-
-</body>
-</html>

package/example/lineChart-time-scale.html

@@ -1,67 +0,0 @@
-<html>
-
-<head>
-  <title>Time scale chart.js</title>
-</head>
-<style>
-  .chartBox {
-    width: 700px
-  }
-</style>
-
-<body>
-  <div class="chartBox">
-    <canvas id="myChart"></canvas>
-  </div>
-
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-
-  <script src="./../src/chartjs-plugin-trendline.js"></script>
-
-  <script>
-    const data = {
-      labels: [
-        "2023-01-01T08:00:00.000Z",
-        "2023-01-02T08:00:00.000Z",
-        "2023-01-03T08:00:00.000Z",
-        "2023-01-04T08:00:00.000Z",
-      ],
-      datasets: [{
-        label: "Default",
-        data: [65, 59, 80, 81],
-        trendlineLinear: {
-          colorMin: "red",
-          colorMax: "green",
-          lineStyle: "dotted",
-          width: 2,
-          projection: false,
-        },
-      }],
-    };
-    const config = {
-      type: 'line',
-      data,
-      options: {
-        scales: {
-          x: {
-            type: 'time',
-            time: {
-              unit: 'day',
-            },
-          },
-          y: {
-            beginAtZero: true
-          }
-        }
-      }
-    };
-    const myChart = new Chart(
-      document.getElementById('myChart'),
-      config,
-    );
-  </script>
-</body>
-
-</html>