chartjs-plugin-trendline 2.1.9 → 3.0.0

package/.github/copilot-instructions.md

@@ -0,0 +1,40 @@
+# Chart.js Plugin Trendline — Copilot Instructions
+
+This plugin adds trendline support to Chart.js charts. It fits a linear regression model to datasets and draws trendlines over bar or line charts.
+
+## Project Structure
+
+-   Root:
+    -   `package.json`, `webpack.config.js`, `example/*.html`
+-   Source (`src/`):
+    -   `index.js` — Entry point
+    -   `components/` — Rendering logic (`label.js`, `trendline.js`)
+    -   `core/` — Plugin definition (`plugin.js`)
+    -   `utils/` — Math and drawing helpers (`drawing.js`, `lineFitter.js`)
+
+## Coding Guidelines
+
+1. Use modern JavaScript (ES6+)
+2. Indent with 2 spaces
+3. Use JSDoc for public methods (Google style)
+4. Ensure compatibility with Chart.js v4+
+5. Name files/functions descriptively (no abbreviations)
+
+## File Notes
+
+-   `plugin.js`: Main plugin lifecycle integration
+-   `trendline.js`: Handles drawing trendlines
+-   `lineFitter.js`: Performs regression math
+-   `example/*.html`: Demo charts — manually verify after changes
+
+## Workflow Tips
+
+1. Changes to `plugin.js` should align with Chart.js plugin lifecycle (e.g., `afterDatasetsDraw`)
+2. If editing `trendline.js`, test with multiple chart types
+3. Validate rendering via example HTMLs after code updates
+4. Run linter and formatter before commit (see `.eslintrc.js` if present)
+
+## Restrictions
+
+-   Do not modify build config unless changing build behavior
+-   Do not auto-generate example files

package/.github/workflows/release.yml

@@ -0,0 +1,61 @@
+name: release
+
+on:
+    push:
+        tags:
+            - 'v*' # Ex: v1.2.3 → publish as latest
+            - 'beta/*' # Ex: beta/1.2.3-beta.1 → publish as beta
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  registry-url: 'https://registry.npmjs.org/'
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build
+              run: npm run build
+
+            - name: Verify package.json version matches tag
+              run: |
+                  PKG_VERSION=$(node -p "require('./package.json').version")
+                  TAG_NAME=${GITHUB_REF#refs/tags/}
+
+                  # Hantera både vX.X.X och beta/X.X.X-beta.X
+                  if [[ "$TAG_NAME" == beta/* ]]; then
+                    TAG_VERSION=${TAG_NAME#beta/}
+                  else
+                    TAG_VERSION=${TAG_NAME#v}
+                  fi
+
+                  echo "Package version: $PKG_VERSION"
+                  echo "Tag version:     $TAG_VERSION"
+
+                  if [ "$PKG_VERSION" != "$TAG_VERSION" ]; then
+                    echo "::error ::❌ Version mismatch: package.json=$PKG_VERSION ≠ tag=$TAG_VERSION"
+                    exit 1
+                  else
+                    echo "✅ Version match confirmed"
+                  fi
+
+            - name: Publish to npm (beta)
+              if: startsWith(github.ref, 'refs/tags/beta/')
+              run: npm publish --tag beta
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+            - name: Publish to npm (latest)
+              if: startsWith(github.ref, 'refs/tags/v')
+              run: npm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/tests.yml

@@ -0,0 +1,26 @@
+name: tests
+# This workflow runs tests on the main branch when code is pushed or a pull request is made.
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: ['**'] # Run on all branches for PRs
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '22'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Run tests
+              run: npm test

package/.prettierrc

@@ -1,6 +1,6 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": true,
-    "singleQuote": true
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
 }

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Marcus Alsterfjord
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Marcus Alsterfjord
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,87 +1,88 @@
-# chartjs-plugin-trendline
-
-This plugin draws an linear trendline in your Chart.
-It has been tested with Chart.js version 4.4.4.
-
-## Installation
-
-#### Load directly in the browser
-
-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.4.4/dist/chart.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
-```
-
-#### As a Chart.JS plugin
-
-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';
-
-ChartJS.plugins.register(chartTrendline);
-```
-
-## Configuration
-
-To configure the trendline plugin you simply add a new config options to your dataset in your chart config.
-
-```javascript
-{
-	trendlineLinear: {
-		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,
-			percentage: boolean,
-			font: {
-				family: string,
-				size: number,
-			}
-		},
-		// optional
-		legend: {
-			text: string,
-			strokeStyle: Color,
-			fillStyle: Color,
-			lineCap: string,
-			lineDash: number[],
-			lineWidth: number,
-		}
-	}
-}
-```
-
-## Supported chart types
-
--   bar
--   line
--   scatter
-
-## Contributing
-
-Pull requests and issues are always welcome.
-For bugs and feature requests, [please create an issue](https://github.com/Makanz/chartjs-plugin-trendline/issues).
-
-## License
-
-chartjs-plugin-trendline.js is available under the [MIT license](http://opensource.org/licenses/MIT).
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=Makanz/chartjs-plugin-trendline&type=Date)](https://star-history.com/#Makanz/chartjs-plugin-trendline&Date)
+# chartjs-plugin-trendline
+
+This plugin draws an linear trendline in your Chart.
+It has been tested with Chart.js version 4.4.9.
+
+## Installation
+
+#### Load directly in the browser
+
+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.4.9/dist/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+```
+
+#### As a Chart.JS plugin
+
+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';
+
+ChartJS.plugins.register(chartTrendline);
+```
+
+## Configuration
+
+To configure the trendline plugin you simply add a new config options to your dataset in your chart config.
+
+```javascript
+{
+	trendlineLinear: {
+		colorMin: Color,
+		colorMax: Color,
+		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"
+		width: number,
+		xAxisKey: string, // optional
+		yAxisKey: string, // optional
+		projection: boolean, // optional
+		trendoffset: number, // optional, if > 0 skips first n elements, if < 0 uses last n elements
+		// optional
+		label: {
+			color: Color,
+			text: string,
+			display: boolean,
+			displayValue: boolean,
+			offset: number,
+			percentage: boolean,
+			font: {
+				family: string,
+				size: number,
+			}
+		},
+		// optional
+		legend: {
+			text: string,
+			strokeStyle: Color,
+			fillStyle: Color,
+			lineCap: string,
+			lineDash: number[],
+			lineWidth: number,
+		}
+	}
+}
+```
+
+## Supported chart types
+
+-   bar
+-   line
+-   scatter
+
+## Contributing
+
+Pull requests and issues are always welcome.
+For bugs and feature requests, [please create an issue](https://github.com/Makanz/chartjs-plugin-trendline/issues).
+
+## License
+
+chartjs-plugin-trendline.js is available under the [MIT license](http://opensource.org/licenses/MIT).
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=Makanz/chartjs-plugin-trendline&type=Date)](https://star-history.com/#Makanz/chartjs-plugin-trendline&Date)

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

package/changelog.md

@@ -0,0 +1,27 @@
+# Changelog 3.0.0
+
+### Breaking Changes
+- Updated to version 3.0.0-beta.1 with modular code structure
+
+### New Features
+- Added trendline offset setting (`trendoffset`)
+- Added two new example files (barChartWithNullValues.html, scatterProjection.html)
+
+### Bug Fixes
+- Fixed trendline accuracy and boundary calculations
+- Corrected trendline rendering, projection, and data accuracy
+- Fixed trendline data processing issues
+
+### Testing & CI
+- Added comprehensive unit tests for all components (trendline, label, drawing utils, lineFitter)
+- Added GitHub Actions workflow for automated testing on PRs and main branch
+- Updated Node.js version to 22 in CI
+
+### Code Quality
+- Split code into modular structure with separate components
+- Added Copilot instructions for development
+- Updated Chart.js dependency to version 4.4.9
+
+### Documentation
+- Updated README with new features
+- Added agent instructions for development workflow

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

@@ -1,2 +1 @@
-/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
-(()=>{var e={339:(e,t)=>{const i={id:"chartjs-plugin-trendline",afterDatasetsDraw:e=>{const t=e.ctx,{xScale:i,yScale:s}=n(e);e.data.datasets.map(((e,t)=>({dataset:e,index:t}))).filter((e=>e.dataset.trendlineLinear)).sort(((e,t)=>{const i=e.dataset.order??0,n=t.dataset.order??0;return 0===i&&0!==n?1:0===n&&0!==i?-1:i-n})).forEach((({dataset:n,index:r})=>{if((n.alwaysShowTrendline||e.isDatasetVisible(r))&&n.data.length>1){const o=e.getDatasetMeta(r);a(o,t,n,i,s)}})),t.setLineDash([])},beforeInit:e=>{e.data.datasets.forEach((t=>{if(t.trendlineLinear&&t.trendlineLinear.label){const i=t.trendlineLinear.label,n=e.legend.options.labels.generateLabels;e.legend.options.labels.generateLabels=function(e){const a=n(e),s=t.trendlineLinear.legend;return s&&!1!==s.display&&a.push({text:s.text||i+" (Trendline)",strokeStyle:s.color||t.borderColor||"rgba(169,169,169, .6)",fillStyle:s.fillStyle||"transparent",lineCap:s.lineCap||"butt",lineDash:s.lineDash||[],lineWidth:s.width||1}),a}}}))}},n=e=>{let t,i;for(const n of Object.values(e.scales))if(n.isHorizontal()?t=n:i=n,t&&i)break;return{xScale:t,yScale:i}},a=(e,t,i,n,a)=>{const x=i.yAxisID||"y",h=e.controller.chart.scales[x]||a,u=i.borderColor||"rgba(169,169,169, .6)",{colorMin:y=u,colorMax:f=u,width:m=i.borderWidth||3,lineStyle:p="solid",fillColor:b=!1}=i.trendlineLinear||{},{color:w=u,text:g="Trendline",display:F=!0,displayValue:L=!0,offset:S=10,percentage:v=!1}=i.trendlineLinear.label||{},{family:C="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",size:D=12}=i.trendlineLinear.label?.font||{},T=e.controller.chart.options,N="object"==typeof T.parsing?T.parsing:void 0,P=i.trendlineLinear?.xAxisKey||N?.xAxisKey||"x",A=i.trendlineLinear?.yAxisKey||N?.yAxisKey||"y";let M=new c,V=i.data.findIndex((e=>null!=e)),k=i.data.length-1,j=e.data[V]?.[P],E=e.data[k]?.[P],W="object"==typeof i.data[V];i.data.forEach(((e,t)=>{if(null!=e)if(["time","timeseries"].includes(n.options.type)){let i=null!=e[P]?e[P]:e.t;void 0!==i?M.add(new Date(i).getTime(),e[A]):M.add(t,e)}else W?isNaN(e.x)||isNaN(e.y)?isNaN(e.x)?isNaN(e.y)||M.add(t,e.y):M.add(t,e.x):M.add(e.x,e.y):M.add(t,e)}));let I,K,$=isFinite(j)?j:n.getPixelForValue(M.minx),B=h.getPixelForValue(M.f(M.minx));if(i.trendlineLinear.projection&&M.scale()<0){let e=M.fo();e<M.minx&&(e=M.maxx),I=n.getPixelForValue(e),K=h.getPixelForValue(M.f(e))}else I=isFinite(E)?E:n.getPixelForValue(M.maxx),K=h.getPixelForValue(M.f(M.maxx));const H=e.controller.chart.chartArea.bottom,z=e.controller.chart.width;if(isFinite($)&&isFinite(B)&&isFinite(I)&&isFinite(K)){r({x1:$,y1:B,x2:I,y2:K,drawBottom:H,chartWidth:z}),t.lineWidth=m,o(t,p),l({ctx:t,x1:$,y1:B,x2:I,y2:K,colorMin:y,colorMax:f}),b&&d(t,$,B,I,K,H,b);const e=Math.atan2(K-B,I-$),n=(B-K)/(I-$);if(i.trendlineLinear.label&&!1!==F){const i=L?`${g} (Slope: ${v?(100*n).toFixed(2)+"%":n.toFixed(2)})`:g;s(t,i,$,B,I,K,e,w,C,D,S)}}},s=(e,t,i,n,a,s,r,o,l,d,c)=>{e.font=`${d}px ${l}`,e.fillStyle=o;const x=e.measureText(t).width,h=(i+a)/2,u=(n+s)/2;e.save(),e.translate(h,u),e.rotate(r);const y=-x/2,f=c;e.fillText(t,y,f),e.restore()},r=({x1:e,y1:t,x2:i,y2:n,drawBottom:a,chartWidth:s})=>{if(t>a){t=a}else if(n>a){let e=n-a,r=n-t;n=a,i=s-(i-(s-s*(e/r)))}},o=(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([])}},l=({ctx:e,x1:t,y1:i,x2:n,y2:a,colorMin:s,colorMax:r})=>{if(isFinite(t)&&isFinite(i)&&isFinite(n)&&isFinite(a)){e.beginPath(),e.moveTo(t,i),e.lineTo(n,a);try{let o=e.createLinearGradient(t,i,n,a);o.addColorStop(0,s),o.addColorStop(1,r),e.strokeStyle=o}catch(t){console.warn("Gradient creation failed, using solid color:",t),e.strokeStyle=s}e.stroke(),e.closePath()}else console.warn("Cannot draw trendline: coordinates contain non-finite values",{x1:t,y1:i,x2:n,y2:a})},d=(e,t,i,n,a,s,r)=>{isFinite(t)&&isFinite(i)&&isFinite(n)&&isFinite(a)&&isFinite(s)?(e.beginPath(),e.moveTo(t,i),e.lineTo(n,a),e.lineTo(n,s),e.lineTo(t,s),e.lineTo(t,i),e.closePath(),e.fillStyle=r,e.fill()):console.warn("Cannot fill below trendline: coordinates contain non-finite values",{x1:t,y1:i,x2:n,y2:a,drawBottom:s})};class c{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(n){var a=t[n];if(void 0!==a)return a.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,i),s.exports}(339)})();
+(()=>{"use strict";class e{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()}}const t={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{const i=t.ctx,{xScale:n,yScale:l}=(e=>{let t,i;for(const n of Object.values(e.scales))if(n.isHorizontal()?t=n:i=n,t&&i)break;return{xScale:t,yScale:i}})(t);t.data.datasets.map(((e,t)=>({dataset:e,index:t}))).filter((e=>e.dataset.trendlineLinear)).sort(((e,t)=>{const i=e.dataset.order??0,n=t.dataset.order??0;return 0===i&&0!==n?1:0===n&&0!==i?-1:i-n})).forEach((({dataset:s,index:a})=>{if((s.alwaysShowTrendline||t.isDatasetVisible(a))&&s.data.length>1){((t,i,n,l,s)=>{const a=n.yAxisID||"y",o=t.controller.chart.scales[a]||s,r=n.borderColor||"rgba(169,169,169, .6)",{colorMin:d=r,colorMax:x=r,width:h=n.borderWidth||3,lineStyle:c="solid",fillColor:u=!1}=n.trendlineLinear||{};let f=(n.trendlineLinear||{}).trendoffset||0;const{color:y=r,text:g="Trendline",display:p=!0,displayValue:m=!0,offset:b=10,percentage:F=!1}=n.trendlineLinear.label||{},{family:w="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",size:L=12}=n.trendlineLinear.label?.font||{},P=t.controller.chart.options,V="object"==typeof P.parsing?P.parsing:void 0,M=n.trendlineLinear?.xAxisKey||V?.xAxisKey||"x",N=n.trendlineLinear?.yAxisKey||V?.yAxisKey||"y";let S=new e;Math.abs(f)>=n.data.length&&(f=0);let C=0;if(f>0){const e=n.data.slice(f).findIndex((e=>null!=e));C=-1!==e?f+e:n.data.length}else{const e=n.data.findIndex((e=>null!=e));C=-1!==e?e:n.data.length}let D,T,v,A,k=C<n.data.length&&"object"==typeof n.data[C];if(n.data.forEach(((e,t)=>{if(null!=e&&!(f>0&&t<C||f<0&&t>=n.data.length+f))if(["time","timeseries"].includes(l.options.type)){let t=null!=e[M]?e[M]:e.t;const i=e[N];null==t||void 0===t||null==i||isNaN(i)||S.add(new Date(t).getTime(),i)}else if(k){const t=e[M],i=e[N],n=null!=t&&!isNaN(t),l=null!=i&&!isNaN(i);n&&l&&S.add(t,i)}else null==e||isNaN(e)||S.add(t,e)})),S.count<2)return;const I=t.controller.chart.chartArea;if(n.trendlineLinear.projection){const e=S.slope(),t=S.intercept();let i=[];if(Math.abs(e)>1e-6){const n=o.getValueForPixel(I.top),l=(n-t)/e;i.push({x:l,y:n});const s=o.getValueForPixel(I.bottom),a=(s-t)/e;i.push({x:a,y:s})}else i.push({x:l.getValueForPixel(I.left),y:t}),i.push({x:l.getValueForPixel(I.right),y:t});const n=l.getValueForPixel(I.left),s=S.f(n);i.push({x:n,y:s});const a=l.getValueForPixel(I.right),r=S.f(a);i.push({x:a,y:r});const d=l.getValueForPixel(I.left),x=l.getValueForPixel(I.right),h=[o.getValueForPixel(I.top),o.getValueForPixel(I.bottom)].filter((e=>isFinite(e))),c=h.length>0?Math.min(...h):-1/0,u=h.length>0?Math.max(...h):1/0;let f=i.filter((e=>isFinite(e.x)&&isFinite(e.y)&&e.x>=d&&e.x<=x&&e.y>=c&&e.y<=u));f=f.filter(((e,t,i)=>t===i.findIndex((t=>Math.abs(t.x-e.x)<1e-4&&Math.abs(t.y-e.y)<1e-4)))),f.length>=2?(f.sort(((e,t)=>e.x-t.x||e.y-t.y)),D=l.getPixelForValue(f[0].x),T=o.getPixelForValue(f[0].y),v=l.getPixelForValue(f[f.length-1].x),A=o.getPixelForValue(f[f.length-1].y)):(D=NaN,T=NaN,v=NaN,A=NaN)}else{const e=S.f(S.minx),t=S.f(S.maxx);D=l.getPixelForValue(S.minx),T=o.getPixelForValue(e),v=l.getPixelForValue(S.maxx),A=o.getPixelForValue(t)}let j=null;if(isFinite(D)&&isFinite(T)&&isFinite(v)&&isFinite(A)&&(j=function(e,t,i,n,l){let s=i-e,a=n-t,o=0,r=1;const d=[-s,s,-a,a],x=[e-l.left,l.right-e,t-l.top,l.bottom-t];for(let e=0;e<4;e++)if(0===d[e]){if(x[e]<0)return null}else{const t=x[e]/d[e];if(d[e]<0){if(t>r)return null;o=Math.max(o,t)}else{if(t<o)return null;r=Math.min(r,t)}}return o>r?null:{x1:e+o*s,y1:t+o*a,x2:e+r*s,y2:t+r*a}}(D,T,v,A,I)),j)if(D=j.x1,T=j.y1,v=j.x2,A=j.y2,Math.abs(D-v)<.5&&Math.abs(T-A)<.5);else{i.lineWidth=h,((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([])}})(i,c),(({ctx:e,x1:t,y1:i,x2:n,y2:l,colorMin:s,colorMax:a})=>{if(isFinite(t)&&isFinite(i)&&isFinite(n)&&isFinite(l)){e.beginPath(),e.moveTo(t,i),e.lineTo(n,l);try{let o=e.createLinearGradient(t,i,n,l);o.addColorStop(0,s),o.addColorStop(1,a),e.strokeStyle=o}catch(t){console.warn("Gradient creation failed, using solid color:",t),e.strokeStyle=s}e.stroke(),e.closePath()}else console.warn("Cannot draw trendline: coordinates contain non-finite values",{x1:t,y1:i,x2:n,y2:l})})({ctx:i,x1:D,y1:T,x2:v,y2:A,colorMin:d,colorMax:x}),u&&((e,t,i,n,l,s,a)=>{isFinite(t)&&isFinite(i)&&isFinite(n)&&isFinite(l)&&isFinite(s)?(e.beginPath(),e.moveTo(t,i),e.lineTo(n,l),e.lineTo(n,s),e.lineTo(t,s),e.lineTo(t,i),e.closePath(),e.fillStyle=a,e.fill()):console.warn("Cannot fill below trendline: coordinates contain non-finite values",{x1:t,y1:i,x2:n,y2:l,drawBottom:s})})(i,D,T,v,A,I.bottom,u);const e=Math.atan2(A-T,v-D),t=S.slope();n.trendlineLinear.label&&!1!==p&&((e,t,i,n,l,s,a,o,r,d,x)=>{e.font=`${d}px ${r}`,e.fillStyle=o;const h=e.measureText(t).width,c=(i+l)/2,u=(n+s)/2;e.save(),e.translate(c,u),e.rotate(a);const f=-h/2,y=x;e.fillText(t,f,y),e.restore()})(i,m?`${g} (Slope: ${F?(100*t).toFixed(2)+"%":t.toFixed(2)})`:g,D,T,v,A,e,y,w,L,b)}})(t.getDatasetMeta(a),i,s,n,l)}})),i.setLineDash([])},beforeInit:e=>{e.data.datasets.forEach((t=>{if(t.trendlineLinear&&t.trendlineLinear.label){const i=t.trendlineLinear.label,n=e.legend.options.labels.generateLabels;e.legend.options.labels.generateLabels=function(e){const l=n(e),s=t.trendlineLinear.legend;return s&&!1!==s.display&&l.push({text:s.text||i+" (Trendline)",strokeStyle:s.color||t.borderColor||"rgba(169,169,169, .6)",fillStyle:s.fillStyle||"transparent",lineCap:s.lineCap||"butt",lineDash:s.lineDash||[],lineWidth:s.width||1}),l}}}))}};"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(t):window.Chart.plugins.register(t))})();

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

@@ -1,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.9
+ * Version: 3.0.0
  *
  * Copyright 2025 Marcus Alsterfjord
  * Released under the MIT license

package/example/barChart.html

@@ -1,54 +1,54 @@
-<!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.4/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>
-
+<!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.9/dist/chart.umd.js"></script>
+    <script src="../dist/chartjs-plugin-trendline.min.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/barChartWithNullValues.html

@@ -1,54 +1,54 @@
-<!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.4/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", "Undefined", "null", "North America"],
-                    datasets: [
-                        {
-                            label: "Population (millions)",
-                            backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
-                            data: [2478, 5267, 734, 784, undefined, null, 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>
-
+<!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.9/dist/chart.umd.js"></script>
+    <script src="../dist/chartjs-plugin-trendline.min.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", "Undefined", "null", "North America"],
+                    datasets: [
+                        {
+                            label: "Population (millions)",
+                            backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
+                            data: [2478, 5267, 734, 784, undefined, null, 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>