chartjs-plugin-trendline 3.0.3 → 3.1.0

package/README.md

@@ -1,6 +1,6 @@
 # chartjs-plugin-trendline
 
-This plugin draws an linear trendline in your Chart.
+This plugin draws linear and exponential trendlines in your Chart.
 It has been tested with Chart.js version 4.4.9.
 
 ## 📊 [View Live Examples](https://makanz.github.io/chartjs-plugin-trendline/)
@@ -35,6 +35,10 @@ ChartJS.plugins.register(chartTrendline);
 
 To configure the trendline plugin you simply add a new config options to your dataset in your chart config.
 
+### Linear Trendlines
+
+For linear trendlines (straight lines), use the `trendlineLinear` configuration:
+
 ```javascript
 {
 	trendlineLinear: {
@@ -51,7 +55,7 @@ To configure the trendline plugin you simply add a new config options to your da
 			color: Color,
 			text: string,
 			display: boolean,
-			displayValue: boolean,
+			displayValue: boolean, // shows slope value
 			offset: number,
 			percentage: boolean,
 			font: {
@@ -72,12 +76,65 @@ To configure the trendline plugin you simply add a new config options to your da
 }
 ```
 
+### Exponential Trendlines
+
+For exponential trendlines (curves of the form y = a × e^(b×x)), use the `trendlineExponential` configuration:
+
+```javascript
+{
+	trendlineExponential: {
+		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, // shows exponential parameters (a, b)
+			offset: number,
+			font: {
+				family: string,
+				size: number,
+			}
+		},
+		// optional
+		legend: {
+			text: string,
+			strokeStyle: Color,
+			fillStyle: Color,
+			lineCap: string,
+			lineDash: number[],
+			lineWidth: number,
+		}
+	}
+}
+```
+
+**Note:** Exponential trendlines work best with positive y-values. The equation fitted is y = a × e^(b×x), where:
+- `a` is the coefficient (scaling factor)
+- `b` is the growth rate (positive for growth, negative for decay)
+
+## Examples
+
+- [Linear Trendline Example](./example/lineChart.html)
+- [Exponential Trendline Example](./example/exponentialChart.html)
+- [Bar Chart with Trendline](./example/barChart.html)
+- [Scatter Chart with Trendline](./example/scatterChart.html)
+
 ## Supported chart types
 
 -   bar
 -   line
 -   scatter
 
+Both linear and exponential trendlines are supported for all chart types.
+
 ## Contributing
 
 Pull requests and issues are always welcome.

package/changelog.md

@@ -1,3 +1,16 @@
+# Changelog 3.1.0
+
+### New Features
+- Added exponential trendline support with `trendlineExponential` configuration
+- Exponential trendlines fit curves of the form y = a × e^(b×x)
+- All existing styling options (colors, width, lineStyle, projection, etc.) work with exponential trendlines
+- Added comprehensive test coverage for exponential functionality
+- Added exponential trendline example (exponentialChart.html)
+
+### Improvements
+- Updated README with exponential trendline documentation
+- Enhanced package description to mention exponential support
+
 # Changelog 3.0.0
 
 ### Breaking Changes

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

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

package/example/exponentialChart.html

@@ -0,0 +1,245 @@
+<!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>Exponential Trendline - Chart.js Trendline Plugin</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 40px 20px;
+            background-color: #f8f9fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        h1 {
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 10px;
+            font-size: 2.5rem;
+        }
+        .subtitle {
+            text-align: center;
+            color: #7f8c8d;
+            margin-bottom: 40px;
+            font-size: 1.1rem;
+        }
+        .chart-container {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+        .chart-wrapper {
+            position: relative;
+            height: 400px;
+        }
+        .info-section {
+            background: white;
+            padding: 25px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .info-section h3 {
+            margin-top: 0;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 10px;
+        }
+        .nav-links {
+            text-align: center;
+            margin-top: 30px;
+        }
+        .nav-links a {
+            display: inline-block;
+            margin: 0 10px;
+            padding: 10px 20px;
+            background: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            font-weight: 500;
+            transition: background-color 0.2s;
+        }
+        .nav-links a:hover {
+            background: #2980b9;
+        }
+        code {
+            background: #f8f9fa;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: 'Monaco', 'Menlo', monospace;
+        }
+        pre {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function (event) {
+            new Chart(document.getElementById('exponential-chart'), {
+                type: 'line',
+                data: {
+                    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+                    datasets: [
+                        {
+                            data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
+                            label: 'Exponential Growth (2^x)',
+                            borderColor: '#3e95cd',
+                            backgroundColor: 'rgba(62, 149, 205, 0.1)',
+                            fill: false,
+                            trendlineExponential: {
+                                colorMin: '#ff6b6b',
+                                colorMax: '#ff6b6b',
+                                width: 2,
+                                lineStyle: 'solid',
+                                label: {
+                                    text: 'Exponential Trend',
+                                    display: true,
+                                    displayValue: true,
+                                    color: '#ff6b6b',
+                                    font: {
+                                        size: 12,
+                                        family: 'Arial',
+                                    },
+                                    offset: 10,
+                                },
+                            },
+                        },
+                        {
+                            data: [100, 50, 25, 12.5, 6.25, 3.125, 1.5625, 0.78125, 0.390625, 0.1953125, 0.09765625],
+                            label: 'Exponential Decay (100 * 0.5^x)',
+                            borderColor: '#8e5ea2',
+                            backgroundColor: 'rgba(142, 94, 162, 0.1)',
+                            fill: false,
+                            trendlineExponential: {
+                                colorMin: '#4ecdc4',
+                                colorMax: '#4ecdc4',
+                                width: 2,
+                                lineStyle: 'dashed',
+                                label: {
+                                    text: 'Exponential Decay',
+                                    display: true,
+                                    displayValue: true,
+                                    color: '#4ecdc4',
+                                    font: {
+                                        size: 12,
+                                        family: 'Arial',
+                                    },
+                                    offset: 10,
+                                },
+                            },
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: 'Exponential Trendline Examples',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        legend: {
+                            display: true,
+                        },
+                    },
+                    scales: {
+                        x: {
+                            display: true,
+                            title: {
+                                display: true,
+                                text: 'X Values',
+                            },
+                        },
+                        y: {
+                            display: true,
+                            title: {
+                                display: true,
+                                text: 'Y Values',
+                            },
+                            type: 'logarithmic',
+                        },
+                    },
+                },
+            });
+        });
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Exponential Trendlines</h1>
+        <p class="subtitle">Demonstrates exponential curve fitting with growth and decay examples</p>
+        
+        <div class="chart-container">
+            <div class="chart-wrapper">
+                <canvas id="exponential-chart"></canvas>
+            </div>
+        </div>
+
+        <div class="info-section">
+            <h3>Configuration Features</h3>
+            <p>This example demonstrates exponential trendline fitting using <code>trendlineExponential</code>:</p>
+            <ul>
+                <li><strong>Exponential Growth:</strong> Shows data following 2^x pattern with solid red trendline</li>
+                <li><strong>Exponential Decay:</strong> Shows data following 100 * 0.5^x pattern with dashed teal trendline</li>
+                <li><strong>Logarithmic Scale:</strong> Y-axis uses logarithmic scaling for better visualization</li>
+                <li><strong>Custom Labels:</strong> Both trendlines include custom labels with equation parameters</li>
+            </ul>
+        </div>
+
+        <div class="info-section">
+            <h3>Configuration Example</h3>
+            <p>To use exponential trendlines, configure your dataset with <code>trendlineExponential</code> instead of <code>trendlineLinear</code>:</p>
+            <pre><code>trendlineExponential: {
+    colorMin: '#ff6b6b',
+    colorMax: '#ff6b6b',
+    width: 2,
+    lineStyle: 'solid',
+    label: {
+        text: 'Exponential Trend',
+        display: true,
+        displayValue: true,
+        color: '#ff6b6b',
+        font: {
+            size: 12,
+            family: 'Arial',
+        },
+        offset: 10,
+    },
+}</code></pre>
+        </div>
+
+        <div class="info-section">
+            <h3>Important Notes</h3>
+            <ul>
+                <li>Exponential fitting works best with positive y-values</li>
+                <li>The label shows the exponential parameters: a (coefficient) and b (growth rate)</li>
+                <li>The equation is: y = a * e^(b*x)</li>
+                <li>All styling options that work for linear trendlines also work for exponential</li>
+            </ul>
+        </div>
+
+        <div class="nav-links">
+            <a href="../index.html">← Back to Examples</a>
+        </div>
+    </div>
+</body>
+
+</html>

package/package.json

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

package/src/components/trendline.js

@@ -1,4 +1,5 @@
 import { LineFitter } from '../utils/lineFitter';
+import { ExponentialFitter } from '../utils/exponentialFitter';
 import { drawTrendline, fillBelowTrendline, setLineStyle } from '../utils/drawing';
 import { addTrendlineLabel } from './label';
 
@@ -14,6 +15,10 @@ export const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     const yAxisID = dataset.yAxisID || 'y'; // Default to 'y' if no yAxisID is specified
     const yScaleToUse = datasetMeta.controller.chart.scales[yAxisID] || yScale;
 
+    // Determine if we're using exponential or linear trendline
+    const isExponential = !!dataset.trendlineExponential;
+    const trendlineConfig = dataset.trendlineExponential || dataset.trendlineLinear || {};
+
     const defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
     const {
         colorMin = defaultColor,
@@ -22,22 +27,22 @@ export const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         lineStyle = 'solid',
         fillColor = false,
         // trendoffset is now handled separately
-    } = dataset.trendlineLinear || {};
-    let trendoffset = (dataset.trendlineLinear || {}).trendoffset || 0;
+    } = trendlineConfig;
+    let trendoffset = trendlineConfig.trendoffset || 0;
 
     const {
         color = defaultColor,
-        text = 'Trendline',
+        text = isExponential ? 'Exponential Trendline' : 'Trendline',
         display = true,
         displayValue = true,
         offset = 10,
         percentage = false,
-    } = (dataset.trendlineLinear && dataset.trendlineLinear.label) || {};
+    } = (trendlineConfig && trendlineConfig.label) || {};
 
     const {
         family = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
         size = 12,
-    } = (dataset.trendlineLinear && dataset.trendlineLinear.label && dataset.trendlineLinear.label.font) || {};
+    } = (trendlineConfig && trendlineConfig.label && trendlineConfig.label.font) || {};
 
     const chartOptions = datasetMeta.controller.chart.options;
     const parsingOptions =
@@ -45,11 +50,11 @@ export const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
             ? chartOptions.parsing
             : undefined;
     const xAxisKey =
-        dataset.trendlineLinear?.xAxisKey || parsingOptions?.xAxisKey || 'x';
+        trendlineConfig?.xAxisKey || parsingOptions?.xAxisKey || 'x';
     const yAxisKey =
-        dataset.trendlineLinear?.yAxisKey || parsingOptions?.yAxisKey || 'y';
+        trendlineConfig?.yAxisKey || parsingOptions?.yAxisKey || 'y';
 
-    let fitter = new LineFitter();
+    let fitter = isExponential ? new ExponentialFitter() : new LineFitter();
     
     // --- Data Point Collection and Validation for LineFitter ---
 
@@ -156,31 +161,44 @@ export const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     const chartArea = datasetMeta.controller.chart.chartArea; // Defines the drawable area in pixels.
 
     // Determine trendline start/end points based on the 'projection' option.
-    if (dataset.trendlineLinear.projection) {
-        const slope = fitter.slope();
-        const intercept = fitter.intercept();
-        let points = []; 
-
-        if (Math.abs(slope) > 1e-6) { 
-            const val_y_top = yScaleToUse.getValueForPixel(chartArea.top);
-            const x_at_top = (val_y_top - intercept) / slope; 
-            points.push({ x: x_at_top, y: val_y_top });
-
-            const val_y_bottom = yScaleToUse.getValueForPixel(chartArea.bottom);
-            const x_at_bottom = (val_y_bottom - intercept) / slope; 
-            points.push({ x: x_at_bottom, y: val_y_bottom });
-        } else { 
-             points.push({ x: xScale.getValueForPixel(chartArea.left), y: intercept});
-             points.push({ x: xScale.getValueForPixel(chartArea.right), y: intercept});
-        }
+    if (trendlineConfig.projection) {
+        let points = [];
+
+        if (isExponential) {
+            // For exponential curves, we generate points across the x-axis range
+            const val_x_left = xScale.getValueForPixel(chartArea.left);
+            const y_at_left = fitter.f(val_x_left); 
+            points.push({ x: val_x_left, y: y_at_left });
+
+            const val_x_right = xScale.getValueForPixel(chartArea.right);
+            const y_at_right = fitter.f(val_x_right); 
+            points.push({ x: val_x_right, y: y_at_right });
+        } else {
+            // Linear projection logic (existing code)
+            const slope = fitter.slope();
+            const intercept = fitter.intercept();
+
+            if (Math.abs(slope) > 1e-6) { 
+                const val_y_top = yScaleToUse.getValueForPixel(chartArea.top);
+                const x_at_top = (val_y_top - intercept) / slope; 
+                points.push({ x: x_at_top, y: val_y_top });
+
+                const val_y_bottom = yScaleToUse.getValueForPixel(chartArea.bottom);
+                const x_at_bottom = (val_y_bottom - intercept) / slope; 
+                points.push({ x: x_at_bottom, y: val_y_bottom });
+            } else { 
+                 points.push({ x: xScale.getValueForPixel(chartArea.left), y: intercept});
+                 points.push({ x: xScale.getValueForPixel(chartArea.right), y: intercept});
+            }
 
-        const val_x_left = xScale.getValueForPixel(chartArea.left);
-        const y_at_left = fitter.f(val_x_left); 
-        points.push({ x: val_x_left, y: y_at_left });
+            const val_x_left = xScale.getValueForPixel(chartArea.left);
+            const y_at_left = fitter.f(val_x_left); 
+            points.push({ x: val_x_left, y: y_at_left });
 
-        const val_x_right = xScale.getValueForPixel(chartArea.right);
-        const y_at_right = fitter.f(val_x_right); 
-        points.push({ x: val_x_right, y: y_at_right });
+            const val_x_right = xScale.getValueForPixel(chartArea.right);
+            const y_at_right = fitter.f(val_x_right); 
+            points.push({ x: val_x_right, y: y_at_right });
+        }
         
         const chartMinX = xScale.getValueForPixel(chartArea.left); 
         const chartMaxX = xScale.getValueForPixel(chartArea.right); 
@@ -247,16 +265,23 @@ export const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
             }
 
             const angle = Math.atan2(y2_px - y1_px, x2_px - x1_px);
-            const displaySlope = fitter.slope();
-
-            if (dataset.trendlineLinear.label && display !== false) {
-                const trendText = displayValue
-                    ? `${text} (Slope: ${
-                          percentage
-                              ? (displaySlope * 100).toFixed(2) + '%' 
-                              : displaySlope.toFixed(2)
-                      })`
-                    : text;
+            
+            if (trendlineConfig.label && display !== false) {
+                let trendText = text;
+                if (displayValue) {
+                    if (isExponential) {
+                        const coefficient = fitter.coefficient();
+                        const growthRate = fitter.growthRate();
+                        trendText = `${text} (a=${coefficient.toFixed(2)}, b=${growthRate.toFixed(2)})`;
+                    } else {
+                        const displaySlope = fitter.slope();
+                        trendText = `${text} (Slope: ${
+                            percentage
+                                ? (displaySlope * 100).toFixed(2) + '%' 
+                                : displaySlope.toFixed(2)
+                        })`;
+                    }
+                }
                 addTrendlineLabel(
                     ctx,
                     trendText,

package/src/components/trendline.test.js

@@ -2,10 +2,12 @@ import { addFitter } from './trendline';
 import 'jest-canvas-mock'; 
 
 import { LineFitter } from '../utils/lineFitter';
+import { ExponentialFitter } from '../utils/exponentialFitter';
 import * as drawingUtils from '../utils/drawing';
 import * as labelUtils from './label';
 
 jest.mock('../utils/lineFitter'); 
+jest.mock('../utils/exponentialFitter');
 jest.mock('../utils/drawing', () => ({
   drawTrendline: jest.fn(),
   fillBelowTrendline: jest.fn(),
@@ -483,3 +485,305 @@ describe('addFitter', () => {
         expect(labelUtils.addTrendlineLabel).not.toHaveBeenCalled(); // No label should be added
     });
 });
+
+describe('addFitter - Exponential Trendlines', () => {
+    let mockCtx;
+    let mockDatasetMeta;
+    let mockDataset;
+    let mockXScale;
+    let mockYScale;
+    let mockExponentialFitterInstance;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        
+        // Mock ExponentialFitter instance
+        mockExponentialFitterInstance = {
+            add: jest.fn(),
+            f: jest.fn(x => 2 * Math.exp(0.5 * x)), // Example: y = 2 * e^(0.5x)
+            coefficient: jest.fn(() => 2),
+            growthRate: jest.fn(() => 0.5),
+            scale: jest.fn(() => 0.5),
+            minx: undefined,
+            maxx: undefined,
+            count: 0,
+            hasValidData: true
+        };
+        ExponentialFitter.mockImplementation(() => mockExponentialFitterInstance);
+        
+        mockCtx = {
+            save: jest.fn(), translate: jest.fn(), rotate: jest.fn(), fillText: jest.fn(),
+            measureText: jest.fn(() => ({ width: 50 })), font: '', fillStyle: '',
+            strokeStyle: '', lineWidth: 0, beginPath: jest.fn(), moveTo: jest.fn(),
+            lineTo: jest.fn(), stroke: jest.fn(), restore: jest.fn(), setLineDash: jest.fn(),
+        };
+        
+        mockDatasetMeta = {
+            controller: {
+                chart: {
+                    scales: { 'y': { getPixelForValue: jest.fn(val => val * 10), getValueForPixel: jest.fn(pixel => pixel / 10) } },
+                    options: { parsing: { xAxisKey: 'x', yAxisKey: 'y' } },
+                    chartArea: { top: 50, bottom: 450, left: 50, right: 750, width: 700, height: 400 },
+                    data: { labels: [] }
+                }
+            },
+            data: [{x:0, y:0}]
+        };
+        
+        mockXScale = {
+            getPixelForValue: jest.fn(val => val * 10),
+            getValueForPixel: jest.fn(pixel => pixel / 10),
+            options: { type: 'linear' }
+        };
+        
+        mockYScale = { 
+            getPixelForValue: jest.fn(val => val * 10), 
+            getValueForPixel: jest.fn(pixel => pixel / 10) 
+        };
+        
+        mockDataset = {
+            data: [ { x: 0, y: 2 }, { x: 1, y: 3.3 }, { x: 2, y: 5.4 } ], // Exponential-like data
+            yAxisID: 'y',
+            borderColor: 'blue',
+            borderWidth: 2,
+            trendlineExponential: {
+                colorMin: 'red',
+                colorMax: 'red',
+                width: 3,
+                lineStyle: 'solid',
+                fillColor: false,
+                trendoffset: 0,
+                projection: false,
+                xAxisKey: 'x',
+                yAxisKey: 'y',
+                label: {
+                    display: true,
+                    text: 'Exponential Trend',
+                    color: 'black',
+                    offset: 5,
+                    displayValue: true,
+                    font: { family: 'Arial', size: 12 }
+                }
+            }
+        };
+    });
+
+    test('Basic exponential trendline rendering', () => {
+        mockDatasetMeta.data = [{x:0, y:2}];
+        mockExponentialFitterInstance.minx = 0;
+        mockExponentialFitterInstance.maxx = 2;
+        mockExponentialFitterInstance.count = 3;
+        mockExponentialFitterInstance.f = jest.fn(x => {
+            if (x === 0) return 2;
+            if (x === 2) return 5.4;
+            return 2 * Math.exp(0.5 * x);
+        });
+        
+        mockXScale.getPixelForValue = jest.fn(val => {
+            if (val === 0) return 50;
+            if (val === 2) return 250;
+            return val * 100 + 50;
+        });
+        
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => {
+            if (val === 2) return 200;
+            if (val === 5.4) return 340;
+            return val * 100;
+        });
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(ExponentialFitter).toHaveBeenCalledTimes(1);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledTimes(3);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(0, 2);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(1, 3.3);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(2, 5.4);
+        expect(drawingUtils.drawTrendline).toHaveBeenCalledWith(expect.objectContaining({
+            x1: 50, y1: 200, x2: 250, y2: 340
+        }));
+    });
+
+    test('Exponential trendline with label showing coefficient and growth rate', () => {
+        mockDatasetMeta.data = [{x:0, y:2}];
+        mockExponentialFitterInstance.minx = 0;
+        mockExponentialFitterInstance.maxx = 2;
+        mockExponentialFitterInstance.count = 3;
+        mockExponentialFitterInstance.coefficient = jest.fn(() => 2.05);
+        mockExponentialFitterInstance.growthRate = jest.fn(() => 0.48);
+        mockExponentialFitterInstance.f = jest.fn(x => {
+            if (x === 0) return 2;
+            if (x === 2) return 5.4;
+            return 2.05 * Math.exp(0.48 * x);
+        });
+        
+        mockXScale.getPixelForValue = jest.fn(val => val * 100 + 50);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(labelUtils.addTrendlineLabel).toHaveBeenCalledWith(
+            mockCtx,
+            'Exponential Trend (a=2.05, b=0.48)',
+            expect.any(Number),
+            expect.any(Number),
+            expect.any(Number),
+            expect.any(Number),
+            expect.any(Number),
+            'black',
+            'Arial',
+            12,
+            5
+        );
+    });
+
+    test('Exponential trendline checks projection configuration', () => {
+        mockDataset.trendlineExponential.projection = true;
+        mockDatasetMeta.data = [{x:0, y:2}];
+        mockExponentialFitterInstance.minx = 0;
+        mockExponentialFitterInstance.maxx = 2;
+        mockExponentialFitterInstance.count = 3;
+        mockExponentialFitterInstance.f = jest.fn(x => 2 * Math.exp(0.5 * x));
+        
+        mockXScale.getValueForPixel = jest.fn(pixel => pixel / 100);
+        mockXScale.getPixelForValue = jest.fn(val => val * 100);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        mockDatasetMeta.controller.chart.scales.y.getValueForPixel = jest.fn(pixel => pixel / 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        // Just verify that projection mode calls the boundary functions
+        expect(mockXScale.getValueForPixel).toHaveBeenCalledWith(50); // left boundary
+        expect(mockXScale.getValueForPixel).toHaveBeenCalledWith(750); // right boundary
+    });
+
+    test('Exponential trendline with fill color', () => {
+        mockDataset.trendlineExponential.fillColor = 'rgba(255,0,0,0.2)';
+        mockDatasetMeta.data = [{x:0, y:2}];
+        mockExponentialFitterInstance.minx = 0;
+        mockExponentialFitterInstance.maxx = 2;
+        mockExponentialFitterInstance.count = 3;
+        mockExponentialFitterInstance.f = jest.fn(x => {
+            if (x === 0) return 2;
+            if (x === 2) return 5.4;
+            return 2 * Math.exp(0.5 * x);
+        });
+        
+        mockXScale.getPixelForValue = jest.fn(val => val * 100 + 50);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(drawingUtils.fillBelowTrendline).toHaveBeenCalledWith(
+            mockCtx,
+            expect.any(Number), // x1
+            expect.any(Number), // y1
+            expect.any(Number), // x2
+            expect.any(Number), // y2
+            mockDatasetMeta.controller.chart.chartArea.bottom,
+            'rgba(255,0,0,0.2)'
+        );
+    });
+
+    test('Exponential trendline with insufficient data points', () => {
+        mockDataset.data = [{ x: 0, y: 2 }]; // Only one data point
+        mockExponentialFitterInstance.count = 1;
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(drawingUtils.drawTrendline).not.toHaveBeenCalled();
+        expect(labelUtils.addTrendlineLabel).not.toHaveBeenCalled();
+    });
+
+    test('Exponential trendline with trendoffset', () => {
+        mockDataset.trendlineExponential.trendoffset = 1;
+        mockDataset.data = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 4 }];
+        mockDatasetMeta.data = [{x:0, y:1}];
+        mockExponentialFitterInstance.minx = 1;
+        mockExponentialFitterInstance.maxx = 2;
+        mockExponentialFitterInstance.count = 2;
+        mockExponentialFitterInstance.f = jest.fn(x => {
+            if (x === 1) return 2;
+            if (x === 2) return 4;
+            return Math.exp(x);
+        });
+        
+        mockXScale.getPixelForValue = jest.fn(val => val * 100 + 50);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledTimes(2);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(1, 2);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(2, 4);
+        expect(mockExponentialFitterInstance.add).not.toHaveBeenCalledWith(0, 1);
+    });
+
+    test('Exponential trendline with invalid data (hasValidData = false)', () => {
+        mockExponentialFitterInstance.hasValidData = false;
+        mockExponentialFitterInstance.count = 3;
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(drawingUtils.drawTrendline).not.toHaveBeenCalled();
+        expect(labelUtils.addTrendlineLabel).not.toHaveBeenCalled();
+    });
+
+    test('Exponential trendline with time scale', () => {
+        mockXScale.options.type = 'time';
+        const date1 = new Date('2023-01-01T00:00:00.000Z');
+        const date2 = new Date('2023-01-02T00:00:00.000Z');
+        const date3 = new Date('2023-01-03T00:00:00.000Z');
+        
+        mockDataset.data = [
+            { x: date1.toISOString(), y: 2 },
+            { x: date2.toISOString(), y: 4 },
+            { x: date3.toISOString(), y: 8 }
+        ];
+        mockDatasetMeta.data = [{ x: date1.toISOString(), y: 2 }];
+        
+        const date1Ts = date1.getTime();
+        const date3Ts = date3.getTime();
+        
+        mockExponentialFitterInstance.minx = date1Ts;
+        mockExponentialFitterInstance.maxx = date3Ts;
+        mockExponentialFitterInstance.count = 3;
+        mockExponentialFitterInstance.f = jest.fn(x => {
+            if (x === date1Ts) return 2;
+            if (x === date3Ts) return 8;
+            return 2 * Math.exp(0.693 * (x - date1Ts) / (24 * 60 * 60 * 1000));
+        });
+        
+        mockXScale.getPixelForValue = jest.fn(val => val / 1000000);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledTimes(3);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(date1Ts, 2);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(date2.getTime(), 4);
+        expect(mockExponentialFitterInstance.add).toHaveBeenCalledWith(date3Ts, 8);
+    });
+
+    test('Exponential trendline with minimal configuration (no label)', () => {
+        mockDataset.trendlineExponential = {
+            colorMin: 'blue',
+            width: 2,
+            lineStyle: 'dashed'
+        };
+        mockDataset.data = [{ x: 0, y: 1 }, { x: 1, y: 2 }];
+        mockDatasetMeta.data = [{x:0, y:1}];
+        mockExponentialFitterInstance.minx = 0;
+        mockExponentialFitterInstance.maxx = 1;
+        mockExponentialFitterInstance.count = 2;
+        mockExponentialFitterInstance.f = jest.fn(x => Math.exp(x));
+        
+        mockXScale.getPixelForValue = jest.fn(val => val * 100 + 50);
+        mockDatasetMeta.controller.chart.scales.y.getPixelForValue = jest.fn(val => val * 100);
+        
+        addFitter(mockDatasetMeta, mockCtx, mockDataset, mockXScale, mockYScale);
+        
+        expect(drawingUtils.setLineStyle).toHaveBeenCalledWith(mockCtx, 'dashed');
+        expect(drawingUtils.drawTrendline).toHaveBeenCalled();
+        expect(labelUtils.addTrendlineLabel).not.toHaveBeenCalled();
+    });
+});

package/src/core/plugin.js

@@ -10,7 +10,7 @@ export const pluginTrendlineLinear = {
 
         const sortedDatasets = chartInstance.data.datasets
             .map((dataset, index) => ({ dataset, index }))
-            .filter((entry) => entry.dataset.trendlineLinear)
+            .filter((entry) => entry.dataset.trendlineLinear || entry.dataset.trendlineExponential)
             .sort((a, b) => {
                 const orderA = a.dataset.order ?? 0;
                 const orderB = b.dataset.order ?? 0;
@@ -42,8 +42,9 @@ export const pluginTrendlineLinear = {
         const datasets = chartInstance.data.datasets;
 
         datasets.forEach((dataset) => {
-            if (dataset.trendlineLinear && dataset.trendlineLinear.label) {
-                const label = dataset.trendlineLinear.label;
+            const trendlineConfig = dataset.trendlineLinear || dataset.trendlineExponential;
+            if (trendlineConfig && trendlineConfig.label) {
+                const label = trendlineConfig.label;
 
                 // Access chartInstance to update legend labels
                 const originalGenerateLabels =
@@ -54,7 +55,7 @@ export const pluginTrendlineLinear = {
                 ) {
                     const defaultLabels = originalGenerateLabels(chart);
 
-                    const legendConfig = dataset.trendlineLinear.legend;
+                    const legendConfig = trendlineConfig.legend;
 
                     // Display the legend is it's populated and not set to hidden
                     if (legendConfig && legendConfig.display !== false) {

package/src/utils/exponentialFitter.js

@@ -0,0 +1,114 @@
+/**
+ * A class that fits an exponential curve to a series of points using least squares.
+ * Fits y = a * e^(b*x) by transforming to ln(y) = ln(a) + b*x
+ */
+export class ExponentialFitter {
+    constructor() {
+        this.count = 0;
+        this.sumx = 0;
+        this.sumlny = 0;
+        this.sumx2 = 0;
+        this.sumxlny = 0;
+        this.minx = Number.MAX_VALUE;
+        this.maxx = Number.MIN_VALUE;
+        this.hasValidData = true;
+        this.dataPoints = []; // Store data points for correlation calculation
+    }
+
+    /**
+     * Adds a point to the exponential fitter.
+     * @param {number} x - The x-coordinate of the point.
+     * @param {number} y - The y-coordinate of the point.
+     */
+    add(x, y) {
+        if (y <= 0) {
+            this.hasValidData = false;
+            return;
+        }
+
+        const lny = Math.log(y);
+        if (!isFinite(lny)) {
+            this.hasValidData = false;
+            return;
+        }
+
+        this.sumx += x;
+        this.sumlny += lny;
+        this.sumx2 += x * x;
+        this.sumxlny += x * lny;
+        if (x < this.minx) this.minx = x;
+        if (x > this.maxx) this.maxx = x;
+        this.dataPoints.push({x, y, lny}); // Store actual data points
+        this.count++;
+    }
+
+    /**
+     * Calculates the exponential growth rate (b in y = a * e^(b*x)).
+     * @returns {number} - The exponential growth rate.
+     */
+    growthRate() {
+        if (!this.hasValidData || this.count < 2) return 0;
+        const denominator = this.count * this.sumx2 - this.sumx * this.sumx;
+        if (Math.abs(denominator) < 1e-10) return 0;
+        return (this.count * this.sumxlny - this.sumx * this.sumlny) / denominator;
+    }
+
+    /**
+     * Calculates the exponential coefficient (a in y = a * e^(b*x)).
+     * @returns {number} - The exponential coefficient.
+     */
+    coefficient() {
+        if (!this.hasValidData || this.count < 2) return 1;
+        const lnA = (this.sumlny - this.growthRate() * this.sumx) / this.count;
+        return Math.exp(lnA);
+    }
+
+    /**
+     * Returns the fitted exponential value (y) for a given x.
+     * @param {number} x - The x-coordinate.
+     * @returns {number} - The corresponding y-coordinate on the fitted exponential curve.
+     */
+    f(x) {
+        if (!this.hasValidData || this.count < 2) return 0;
+        const a = this.coefficient();
+        const b = this.growthRate();
+        
+        // Check for potential overflow before calculation
+        if (Math.abs(b * x) > 500) return 0; // Safer limit to prevent overflow
+        
+        const result = a * Math.exp(b * x);
+        return isFinite(result) ? result : 0;
+    }
+
+    /**
+     * Calculates the correlation coefficient (R-squared) for the exponential fit.
+     * @returns {number} - The correlation coefficient (0-1).
+     */
+    correlation() {
+        if (!this.hasValidData || this.count < 2) return 0;
+        
+        const meanLnY = this.sumlny / this.count;
+        const lnA = Math.log(this.coefficient());
+        const b = this.growthRate();
+        
+        let ssTotal = 0;
+        let ssRes = 0;
+        
+        for (const point of this.dataPoints) {
+            const predictedLnY = lnA + b * point.x;
+            ssTotal += Math.pow(point.lny - meanLnY, 2);
+            ssRes += Math.pow(point.lny - predictedLnY, 2);
+        }
+        
+        if (ssTotal === 0) return 1;
+        return Math.max(0, 1 - (ssRes / ssTotal));
+    }
+
+    /**
+     * Returns the scale (growth rate) of the fitted exponential curve.
+     * @returns {number} - The growth rate of the exponential curve.
+     */
+    scale() {
+        return this.growthRate();
+    }
+}

package/src/utils/exponentialFitter.test.js

@@ -0,0 +1,251 @@
+import { ExponentialFitter } from './exponentialFitter';
+
+describe('ExponentialFitter', () => {
+  describe('constructor', () => {
+    test('should initialize with default values', () => {
+      const fitter = new ExponentialFitter();
+      expect(fitter.count).toBe(0);
+      expect(fitter.sumx).toBe(0);
+      expect(fitter.sumlny).toBe(0);
+      expect(fitter.sumx2).toBe(0);
+      expect(fitter.sumxlny).toBe(0);
+      expect(fitter.minx).toBe(Number.MAX_VALUE);
+      expect(fitter.maxx).toBe(Number.MIN_VALUE);
+      expect(fitter.hasValidData).toBe(true);
+    });
+  });
+
+  describe('add', () => {
+    test('should add valid positive points correctly', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 2);
+      fitter.add(2, 4);
+      
+      expect(fitter.count).toBe(3);
+      expect(fitter.hasValidData).toBe(true);
+      expect(fitter.minx).toBe(0);
+      expect(fitter.maxx).toBe(2);
+    });
+
+    test('should reject negative y values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, -1);
+      expect(fitter.hasValidData).toBe(false);
+      expect(fitter.count).toBe(0);
+    });
+
+    test('should reject zero y values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 0);
+      expect(fitter.hasValidData).toBe(false);
+      expect(fitter.count).toBe(0);
+    });
+
+    test('should handle infinite logarithm values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, Infinity);
+      expect(fitter.hasValidData).toBe(false);
+      expect(fitter.count).toBe(0);
+    });
+  });
+
+  describe('exponential fitting', () => {
+    test('should fit perfect exponential growth y = 2^x', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);   // 2^0 = 1
+      fitter.add(1, 2);   // 2^1 = 2
+      fitter.add(2, 4);   // 2^2 = 4
+      fitter.add(3, 8);   // 2^3 = 8
+      
+      // For y = 2^x, we have y = e^(ln(2)*x)
+      // So coefficient should be ~1 and growth rate should be ~ln(2) ≈ 0.693
+      expect(fitter.coefficient()).toBeCloseTo(1, 3);
+      expect(fitter.growthRate()).toBeCloseTo(Math.log(2), 3);
+    });
+
+    test('should fit exponential decay y = e^(-x)', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);                    // e^0 = 1
+      fitter.add(1, Math.exp(-1));         // e^(-1) ≈ 0.368
+      fitter.add(2, Math.exp(-2));         // e^(-2) ≈ 0.135
+      fitter.add(3, Math.exp(-3));         // e^(-3) ≈ 0.050
+      
+      expect(fitter.coefficient()).toBeCloseTo(1, 3);
+      expect(fitter.growthRate()).toBeCloseTo(-1, 3);
+    });
+
+    test('should fit exponential with coefficient y = 3*e^(0.5*x)', () => {
+      const fitter = new ExponentialFitter();
+      const a = 3;
+      const b = 0.5;
+      
+      for (let x = 0; x <= 4; x++) {
+        const y = a * Math.exp(b * x);
+        fitter.add(x, y);
+      }
+      
+      expect(fitter.coefficient()).toBeCloseTo(a, 3);
+      expect(fitter.growthRate()).toBeCloseTo(b, 3);
+    });
+  });
+
+  describe('f', () => {
+    test('should return correct fitted values for exponential function', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 2);
+      fitter.add(2, 4);
+      fitter.add(3, 8);
+      
+      expect(fitter.f(0)).toBeCloseTo(1, 2);
+      expect(fitter.f(1)).toBeCloseTo(2, 2);
+      expect(fitter.f(2)).toBeCloseTo(4, 2);
+      expect(fitter.f(3)).toBeCloseTo(8, 2);
+      expect(fitter.f(4)).toBeCloseTo(16, 2);
+    });
+
+    test('should return 0 for invalid data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, -1); // This makes hasValidData false
+      
+      expect(fitter.f(1)).toBe(0);
+    });
+
+    test('should return 0 for insufficient data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1); // Only one point
+      
+      expect(fitter.f(1)).toBe(0);
+    });
+  });
+
+  describe('growthRate and coefficient', () => {
+    test('should return 0 and 1 respectively for invalid data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, -1);
+      
+      expect(fitter.growthRate()).toBe(0);
+      expect(fitter.coefficient()).toBe(1);
+    });
+
+    test('should return 0 and 1 respectively for insufficient data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      
+      expect(fitter.growthRate()).toBe(0);
+      expect(fitter.coefficient()).toBe(1);
+    });
+
+    test('should handle degenerate case with same x values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(1, 2);
+      fitter.add(1, 4);
+      fitter.add(1, 8);
+      
+      expect(fitter.growthRate()).toBe(0);
+    });
+  });
+
+  describe('scale', () => {
+    test('should return the growth rate', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 2);
+      fitter.add(2, 4);
+      
+      expect(fitter.scale()).toBe(fitter.growthRate());
+    });
+  });
+
+  describe('correlation', () => {
+    test('should return 0 for invalid data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, -1);
+      
+      expect(fitter.correlation()).toBe(0);
+    });
+
+    test('should return 0 for insufficient data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      
+      expect(fitter.correlation()).toBe(0);
+    });
+
+    test('should return a value between 0 and 1', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 2);
+      fitter.add(2, 4);
+      fitter.add(3, 8);
+      
+      const correlation = fitter.correlation();
+      expect(correlation).toBeGreaterThanOrEqual(0);
+      expect(correlation).toBeLessThanOrEqual(1);
+    });
+
+    test('should return high correlation for perfect exponential data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);   // 2^0 = 1
+      fitter.add(1, 2);   // 2^1 = 2
+      fitter.add(2, 4);   // 2^2 = 4
+      fitter.add(3, 8);   // 2^3 = 8
+      
+      const correlation = fitter.correlation();
+      expect(correlation).toBeGreaterThan(0.99); // Perfect exponential should have very high R²
+    });
+
+    test('should return lower correlation for noisy exponential data', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1.5);   // More noisy data to ensure lower correlation
+      fitter.add(1, 1.8);
+      fitter.add(2, 5.2);
+      fitter.add(3, 6.1);
+      
+      const correlation = fitter.correlation();
+      expect(correlation).toBeGreaterThan(0.5);  // Still reasonable correlation
+      expect(correlation).toBeLessThan(0.95);    // But not perfect
+    });
+  });
+
+  describe('edge cases', () => {
+    test('should handle very large values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 10);
+      fitter.add(2, 100);
+      
+      expect(fitter.hasValidData).toBe(true);
+      expect(fitter.f(0)).toBeCloseTo(1, 1);
+      expect(fitter.f(1)).toBeCloseTo(10, 1);
+    });
+
+    test('should handle very small positive values', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 0.001);
+      fitter.add(1, 0.01);
+      fitter.add(2, 0.1);
+      
+      expect(fitter.hasValidData).toBe(true);
+      expect(fitter.f(0)).toBeCloseTo(0.001, 3);
+    });
+
+    test('should handle overflow gracefully', () => {
+      const fitter = new ExponentialFitter();
+      fitter.add(0, 1);
+      fitter.add(1, 2);
+      fitter.add(2, 4);
+      
+      // For this data, growth rate is ln(2) ≈ 0.693
+      // So 1000 * 0.693 = 693, which should trigger overflow protection
+      const result = fitter.f(1000);
+      expect(result).toBe(0); // Should return 0 when overflow occurs
+      
+      // Test a smaller but still large value that should work
+      const smallerResult = fitter.f(10);
+      expect(smallerResult).toBeGreaterThan(0);
+      expect(smallerResult).toBeLessThan(Infinity);
+    });
+  });
+});