Upgrade Chartjs to the latest 3.8.0. Fixes #7469

web/pgadmin/dashboard/static/js/Graphs.jsx

@@ -40,7 +40,7 @@ export function transformData(labels, refreshRate) {
 }
 
 /* Custom ChartJS legend callback */
-export function legendCallback(chart) {
+export function generateLegend(chart) {
   var text = [];
   text.push('<div class="' + chart.id + '-legend d-flex">');
   for (let chart_val of chart.data.datasets) {
@@ -262,70 +262,41 @@ export function GraphsWrapper(props) {
   const bioStatsLegendRef = useRef();
   const options = useMemo(()=>({
     normalized: true,
-    legendCallback: legendCallback,
-    animation: {
-      duration: 0,
-    },
-    hover: {
-      animationDuration: 0,
-    },
-    responsiveAnimationDuration: 0,
-    legend: {
-      display: false,
-    },
     elements: {
       point: {
         radius: props.showDataPoints ? POINT_SIZE : 0,
       },
     },
-    tooltips: {
-      enabled: props.showTooltip,
-      callbacks: {
-        title: function(tooltipItem, data) {
-          let title = '';
-          try {
-            title = parseInt(tooltipItem[0].xLabel)*data.refreshRate + gettext(' seconds ago');
-          } catch (error) {
-            title = '';
-          }
-          return title;
-        },
+    plugins: {
+      legend: {
+        display: false,
       },
+      tooltip: {
+        enabled: props.showTooltip,
+        callbacks: {
+          title: function(tooltipItem) {
+            let title = '';
+            try {
+              title = parseInt(tooltipItem[0].label) * tooltipItem[0].chart?.data.refreshRate + gettext(' seconds ago');
+            } catch (error) {
+              title = '';
+            }
+            return title;
+          },
+        },
+      }
     },
     scales: {
-      yAxes: [{
-        ticks: {
-          min: 0,
-          userCallback: function(label) {
-            if (Math.floor(label) === label) {
-              return label;
-            }
-          },
-          fontColor: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
-        },
-        gridLines: {
-          drawBorder: false,
-          zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
-          color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
-        },
-      }],
-      xAxes: [{
-        display: false,
-        gridLines: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          reverse: true,
-        },
-      }],
+      x: {
+        reverse: true,
+      },
     },
   }), [props.showTooltip, props.showDataPoints]);
   const updateOptions = useMemo(()=>({duration: 0}), []);
 
   const onInitCallback = useCallback(
     (legendRef)=>(chart)=>{
-      legendRef.current.innerHTML = chart.generateLegend();
+      legendRef.current.innerHTML = generateLegend(chart);
     }
   );
 

web/pgadmin/static/js/chartjs/index.jsx

@@ -7,12 +7,22 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect } from 'react';
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 const defaultOptions = {
   responsive: true,
   maintainAspectRatio: false,
+  animation: {
+    duration: 0,
+    active: {
+      duration: 0,
+    },
+    resize: {
+      duration: 0,
+    },
+  },
   elements: {
     line: {
       tension: 0,
@@ -23,17 +33,42 @@ const defaultOptions = {
   layout: {
     padding: 8,
   },
-  hover: {
-    animationDuration:0,
-  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false,
+      },
+      ticks: {
+        display: false,
+      },
+    },
+    y: {
+      min: 0,
+      ticks: {
+        callback: function(label) {
+          if (Math.floor(label) === label) {
+            return label;
+          }
+        },
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
+      },
+      grid: {
+        drawBorder: false,
+        zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
+        color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
+      },
+    },
+  }
 };
 
 export default function BaseChart({type='line', id, options, data, redraw=false, ...props}) {
   const chartRef = React.useRef();
   const chartObj = React.useRef();
-  let optionsMerged = Chart.helpers.configMerge(defaultOptions, options);
+  let optionsMerged = _.merge(defaultOptions, options);
 
   const initChart = function() {
+    Chart.register(...registerables);
     let chartContext = chartRef.current.getContext('2d');
     chartObj.current = new Chart(chartContext, {
       type: type,