chartjs-plugin-trendline 2.1.6 → 2.1.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Marcus Alsterfjord
+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

package/README.md

@@ -34,7 +34,7 @@ To configure the trendline plugin you simply add a new config options to your da
 ```javascript
 {
 	trendlineLinear: {
-		colorMin: Color
+		colorMin: Color,
 		colorMax: Color,
 		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"
 		width: number,
@@ -81,3 +81,7 @@ For bugs and feature requests, [please create an issue](https://github.com/Makan
 ## 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/dist/chartjs-plugin-trendline.min.js

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

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

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

package/example/lineChartTypeTime.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chart.js Example</title>
+    <!-- Include Chart.js and the Trendline plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <script src="../src/chartjs-plugin-trendline.js"></script>
+</head>
+<body>
+
+<!-- Canvas element for rendering the chart -->
+<canvas id="chartjs" width="400" height="200"></canvas>
+
+<script type="text/javascript">
+    // Define colors
+    const barColor1 = '#258cda';  // Blue color for incidents
+    const borderColor1 = '#258cda';  // Same as backgroundColor for incidents
+    const barColor2 = '#cccccc';  // Gray color for outage
+    const borderColor2 = '#808080';  // Darker gray for borderColor of outage
+
+    // Get the context of the canvas element we want to select
+    const ctx = document.getElementById("chartjs").getContext('2d');
+
+    const chartDynamics = [
+  {
+    datepost: "2025-03-01T00:00:00",
+    quantity: 75,
+  },
+  {
+    datepost: "2025-03-02T00:00:00",
+    quantity: 64,
+  },
+  {
+    datepost: "2025-03-03T00:00:00",
+    quantity: 52,
+  },
+  {
+    datepost: "2025-03-04T00:00:00",
+    quantity: 23,
+  },
+  {
+    datepost: "2025-03-05T00:00:00",
+    quantity: 44,
+  },
+  {
+    datepost: "2025-03-06T00:00:00",
+    quantity: 38,
+  },
+  {
+    datepost: "2025-03-07T00:00:00",
+    quantity: 44,
+  },
+  {
+    datepost: "2025-03-08T00:00:00",
+    quantity: 41,
+  },
+  {
+    datepost: "2025-03-09T00:00:00",
+    quantity: 78,
+  },
+  {
+    datepost: "2025-03-10T00:00:00",
+    quantity: 31,
+  },
+];
+
+    // Create a new Chart instance
+    const myChart1 = new Chart(ctx, {
+        type: "line",
+        data: {
+            labels: chartDynamics.map((o) => o.datepost),
+            datasets: [
+            {
+                label: "total",
+                data: chartDynamics.map((o) => o.quantity),
+                borderWidth: 1,
+                pointStyle: false,
+                trendlineLinear: { lineStyle: "dotted", width: 2 },
+            },
+            ],
+        },
+        options: {
+            maintainAspectRatio: false,
+            scales: {
+            x: { type: "time", time: { tooltipFormat: "d", minUnit: "day" } },
+            },
+            interaction: { mode: "nearest", intersect: false },
+            plugins: {
+            legend: { display: false },
+            autocolors: { enabled: false },
+            datalabels: { display: false },
+            },
+        },
+    });
+
+</script>
+
+</body>
+</html>

package/package.json

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

package/src/chartjs-plugin-trendline.js

@@ -1,8 +1,8 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.6
+ * Version: 2.1.8
  *
- * Copyright 2024 Marcus Alsterfjord
+ * Copyright 2025 Marcus Alsterfjord
  * Released under the MIT license
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
  *
@@ -107,6 +107,9 @@ const getScales = (chartInstance) => {
  * @param {Scale} yScale - The y-axis scale object.
  */
 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;
+
     const defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
     const {
         colorMin = defaultColor,
@@ -149,6 +152,7 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     let endPos = datasetMeta.data[lastIndex]?.[xAxisKey];
     let xy = typeof dataset.data[firstIndex] === 'object';
 
+    // Collect data points for the fitter
     dataset.data.forEach((data, index) => {
         if (data == null) return;
 
@@ -172,9 +176,11 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         }
     });
 
-    let x1 = xScale.getPixelForValue(fitter.minx);
-    let y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
-
+    // Calculate the pixel coordinates for the trendline
+    let x1 = isFinite(startPos)
+        ? startPos
+        : xScale.getPixelForValue(fitter.minx);
+    let y1 = yScaleToUse.getPixelForValue(fitter.f(fitter.minx));
     let x2, y2;
 
     // Projection logic for trendline
@@ -182,60 +188,60 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         let x2value = fitter.fo();
         if (x2value < fitter.minx) x2value = fitter.maxx;
         x2 = xScale.getPixelForValue(x2value);
-        y2 = yScale.getPixelForValue(fitter.f(x2value));
+        y2 = yScaleToUse.getPixelForValue(fitter.f(x2value));
     } else {
-        x2 = xScale.getPixelForValue(fitter.maxx);
-        y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
-    }
-
-    if (isFinite(startPos) || isFinite(endPos)) {
-        x1 = startPos;
-        x2 = endPos;
+        x2 = isFinite(endPos) ? endPos : xScale.getPixelForValue(fitter.maxx);
+        y2 = yScaleToUse.getPixelForValue(fitter.f(fitter.maxx));
     }
 
     const drawBottom = datasetMeta.controller.chart.chartArea.bottom;
     const chartWidth = datasetMeta.controller.chart.width;
 
-    adjustLineForOverflow({ x1, y1, x2, y2, drawBottom, chartWidth });
+    // Only adjust line for overflow if coordinates are valid
+    if (isFinite(x1) && isFinite(y1) && isFinite(x2) && isFinite(y2)) {
+        adjustLineForOverflow({ x1, y1, x2, y2, drawBottom, chartWidth });
 
-    // Set line width and styles
-    ctx.lineWidth = lineWidth;
-    setLineStyle(ctx, lineStyle);
+        // Set line width and styles
+        ctx.lineWidth = lineWidth;
+        setLineStyle(ctx, lineStyle);
 
-    // Draw the trendline
-    drawTrendline({ ctx, x1, y1, x2, y2, colorMin, colorMax });
+        // Draw the trendline
+        drawTrendline({ ctx, x1, y1, x2, y2, colorMin, colorMax });
 
-    // Optionally fill below the trendline
-    if (fillColor) {
-        fillBelowTrendline(ctx, x1, y1, x2, y2, drawBottom, fillColor);
-    }
+        // Optionally fill below the trendline
+        if (fillColor) {
+            fillBelowTrendline(ctx, x1, y1, x2, y2, drawBottom, fillColor);
+        }
 
-    // Calculate the angle of the trendline
-    const angle = Math.atan2(y2 - y1, x2 - x1);
-
-    // Calculate the slope of the trendline (value of trend)
-    const slope = (y1 - y2) / (x2 - x1);
-
-    // Add the label to the trendline if it's populated and not set to hidden
-    if (dataset.trendlineLinear.label && display !== false) {
-        const trendText = displayValue
-            ? `${text} (Slope: ${
-                  percentage ? (slope * 100).toFixed(2) + '%' : slope.toFixed(2)
-              })`
-            : text;
-        addTrendlineLabel(
-            ctx,
-            trendText,
-            x1,
-            y1,
-            x2,
-            y2,
-            angle,
-            color,
-            family,
-            size,
-            offset
-        );
+        // Calculate the angle of the trendline
+        const angle = Math.atan2(y2 - y1, x2 - x1);
+
+        // Calculate the slope of the trendline (value of trend)
+        const slope = (y1 - y2) / (x2 - x1);
+
+        // Add the label to the trendline if it's populated and not set to hidden
+        if (dataset.trendlineLinear.label && display !== false) {
+            const trendText = displayValue
+                ? `${text} (Slope: ${
+                      percentage
+                          ? (slope * 100).toFixed(2) + '%'
+                          : slope.toFixed(2)
+                  })`
+                : text;
+            addTrendlineLabel(
+                ctx,
+                trendText,
+                x1,
+                y1,
+                x2,
+                y2,
+                angle,
+                color,
+                family,
+                size,
+                offset
+            );
+        }
     }
 };
 
@@ -362,15 +368,30 @@ const setLineStyle = (ctx, lineStyle) => {
  * @param {string} params.colorMax - The ending color of the trendline gradient.
  */
 const drawTrendline = ({ ctx, x1, y1, x2, y2, colorMin, colorMax }) => {
+    // Ensure all values are finite numbers
+    if (!isFinite(x1) || !isFinite(y1) || !isFinite(x2) || !isFinite(y2)) {
+        console.warn(
+            'Cannot draw trendline: coordinates contain non-finite values',
+            { x1, y1, x2, y2 }
+        );
+        return;
+    }
+
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
 
-    let gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-    gradient.addColorStop(0, colorMin);
-    gradient.addColorStop(1, colorMax);
+    try {
+        let gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+        gradient.addColorStop(0, colorMin);
+        gradient.addColorStop(1, colorMax);
+        ctx.strokeStyle = gradient;
+    } catch (e) {
+        // Fallback to solid color if gradient creation fails
+        console.warn('Gradient creation failed, using solid color:', e);
+        ctx.strokeStyle = colorMin;
+    }
 
-    ctx.strokeStyle = gradient;
     ctx.stroke();
     ctx.closePath();
 };
@@ -386,6 +407,21 @@ const drawTrendline = ({ ctx, x1, y1, x2, y2, colorMin, colorMax }) => {
  * @param {string} fillColor - The color to fill below the trendline.
  */
 const fillBelowTrendline = (ctx, x1, y1, x2, y2, drawBottom, fillColor) => {
+    // Ensure all values are finite numbers
+    if (
+        !isFinite(x1) ||
+        !isFinite(y1) ||
+        !isFinite(x2) ||
+        !isFinite(y2) ||
+        !isFinite(drawBottom)
+    ) {
+        console.warn(
+            'Cannot fill below trendline: coordinates contain non-finite values',
+            { x1, y1, x2, y2, drawBottom }
+        );
+        return;
+    }
+
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);