chartjs-plugin-trendline 2.1.7 → 2.1.9

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={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:L=!0,displayValue:F=!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,"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 k?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 j,E,W=n.getPixelForValue(M.minx),I=h.getPixelForValue(M.f(M.minx));if(i.trendlineLinear.projection&&M.scale()<0){let e=M.fo();e<M.minx&&(e=M.maxx),j=n.getPixelForValue(e),E=h.getPixelForValue(M.f(e))}else j=n.getPixelForValue(M.maxx),E=h.getPixelForValue(M.f(M.maxx));const K=e.controller.chart.chartArea.bottom,$=e.controller.chart.width;if(isFinite(W)&&isFinite(I)&&isFinite(j)&&isFinite(E)){l({x1:W,y1:I,x2:j,y2:E,drawBottom:K,chartWidth:$}),t.lineWidth=m,o(t,p),r({ctx:t,x1:W,y1:I,x2:j,y2:E,colorMin:y,colorMax:f}),b&&d(t,W,I,j,E,K,b);const e=Math.atan2(E-I,j-W),n=(I-E)/(j-W);if(i.trendlineLinear.label&&!1!==L){const i=F?`${g} (Slope: ${v?(100*n).toFixed(2)+"%":n.toFixed(2)})`:g;a(t,i,W,I,j,E,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)})();
+/*! 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)})();

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

@@ -1,11 +1,11 @@
-/*!
- * chartjs-plugin-trendline.js
- * Version: 2.1.7
- *
- * 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,
- */
+/*!
+ * chartjs-plugin-trendline.js
+ * Version: 2.1.9
+ *
+ * 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.7",
+  "version": "2.1.9",
   "description": "Trendline for Chart.js",
   "main": "src/chartjs-plugin-trendline.js",
   "scripts": {

package/src/chartjs-plugin-trendline.js

@@ -1,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.7
+ * Version: 2.1.9
  *
  * Copyright 2025 Marcus Alsterfjord
  * Released under the MIT license
@@ -25,16 +25,27 @@ const pluginTrendlineLinear = {
         const ctx = chartInstance.ctx;
         const { xScale, yScale } = getScales(chartInstance);
 
-        chartInstance.data.datasets.forEach((dataset, index) => {
+        const sortedDatasets = chartInstance.data.datasets
+            .map((dataset, index) => ({ dataset, index }))
+            .filter((entry) => entry.dataset.trendlineLinear)
+            .sort((a, b) => {
+                const orderA = a.dataset.order ?? 0;
+                const orderB = b.dataset.order ?? 0;
+
+                // Push 0-order datasets to the end (they draw last / on top)
+                if (orderA === 0 && orderB !== 0) return 1;
+                if (orderB === 0 && orderA !== 0) return -1;
+
+                // Otherwise, draw lower order first
+                return orderA - orderB;
+            });
+
+        sortedDatasets.forEach(({ dataset, index }) => {
             const showTrendline =
                 dataset.alwaysShowTrendline ||
                 chartInstance.isDatasetVisible(index);
 
-            if (
-                dataset.trendlineLinear &&
-                showTrendline &&
-                dataset.data.length > 1
-            ) {
+            if (showTrendline && dataset.data.length > 1) {
                 const datasetMeta = chartInstance.getDatasetMeta(index);
                 addFitter(datasetMeta, ctx, dataset, xScale, yScale);
             }
@@ -148,6 +159,8 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         (d) => d !== undefined && d !== null
     );
     let lastIndex = dataset.data.length - 1;
+    let startPos = datasetMeta.data[firstIndex]?.[xAxisKey];
+    let endPos = datasetMeta.data[lastIndex]?.[xAxisKey];
     let xy = typeof dataset.data[firstIndex] === 'object';
 
     // Collect data points for the fitter
@@ -175,7 +188,9 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     });
 
     // Calculate the pixel coordinates for the trendline
-    let x1 = xScale.getPixelForValue(fitter.minx);
+    let x1 = isFinite(startPos)
+        ? startPos
+        : xScale.getPixelForValue(fitter.minx);
     let y1 = yScaleToUse.getPixelForValue(fitter.f(fitter.minx));
     let x2, y2;
 
@@ -186,13 +201,10 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
         x2 = xScale.getPixelForValue(x2value);
         y2 = yScaleToUse.getPixelForValue(fitter.f(x2value));
     } else {
-        x2 = xScale.getPixelForValue(fitter.maxx);
+        x2 = isFinite(endPos) ? endPos : xScale.getPixelForValue(fitter.maxx);
         y2 = yScaleToUse.getPixelForValue(fitter.f(fitter.maxx));
     }
 
-    // Do not use startPos and endPos directly, as they may be undefined
-    // This was causing the vertical line issue
-
     const drawBottom = datasetMeta.controller.chart.chartArea.bottom;
     const chartWidth = datasetMeta.controller.chart.width;
 

package/example/issue.html

@@ -1,113 +0,0 @@
-<!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="../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');
-
-    // Create a new Chart instance
-    const myChart1 = new Chart(ctx, {
-        type: 'bar', // Specify chart type (e.g., bar)
-        
-        data: {
-            labels:  ["July 2024","August 2024","September 2024","October 2024","November 2024","December 2024","January 2025","February 2025","March 2025","April 2025","May 2025","June 2025"],  // Example labels for x-axis
-            datasets: [
-                {
-                    label: '# of Incidents',
-                    yAxisID: 'y1',
-                    fill: false,
-                    backgroundColor: barColor1,
-                    borderColor: borderColor1,
-                    borderWidth: 3,
-                    tension: 0.3,
-                    data: [7,6,13,6,4,3,4,4,0,0,0,0],  // Example data for incidents
-                    trendlineLinear: {
-                        lineStyle: 'dotted',
-                        width: 2
-                    },
-                },
-                {
-                    label: 'Total Outage',
-                    yAxisID: 'y2',
-                    fill: true,
-                    backgroundColor: barColor2,
-                    borderColor: borderColor2,
-                    borderWidth: 3,
-                    tension: 0.3,
-                    data: [112,201,316,16,16,13,11,81,20,300,250,200],  // Example data for outage in hours
-                    trendlineLinear: {
-                        lineStyle: 'dotted',
-                        width: 2
-                    },
-                }
-            ],
-        },
-
-        options: {
-            plugins: {
-                legend: {
-                    position: 'bottom', // Position of the legend
-                },
-            },
-            tooltips: {
-                displayColors: true, // Display color in tooltip
-                mode: 'index',       // Tooltip mode
-            },
-            scales: {
-                x: { // X-axis configuration
-                    ticks: {
-                        autoSkip: true,
-                        maxTicksLimit: 12,
-                        maxRotation: 45,
-                        minRotation: 45,
-                    },
-                },
-                y1: { // Left Y-axis for incidents
-                    ticks: {
-                        beginAtZero: true,
-                    },
-                    title: {
-                        display: true,
-                        text: 'Incidents',
-                    },
-                    type: 'linear',
-                    position: 'left',
-                },
-                y2: { // Right Y-axis for outage in hours
-                    ticks: {
-                        beginAtZero: true,
-                    },
-                    title: {
-                        display: true,
-                        text: 'Outage in Hours',
-                    },
-                    type: 'linear',
-                    position: 'right',
-                }
-            },
-            responsive: true,    // Make the chart responsive
-            maintainAspectRatio: true,  // Maintain aspect ratio
-        }
-    });
-</script>
-
-</body>
-</html>