[FIX] Charts: Ensure Chart js extension are loaded on chart creation

When calling the method chartToImage, the chartJs extensions might not
be loaded as we load them conditionally when mounting a chart. Hence,
calling `ChartToImage` when there are no visible charts in the viewport
or if we just instantiate a model without loading a component
`Spreadsheet`, the extensions will be missing.

Right now, the plugins/extensions are not fundamental to convert a chart
to an image but this becomes problematic with the arrival of future
charts (for instance Funnel).

This commit adds a check to ensure that the extensisons are loaded and
unloads them after use as they can cause crashes when using the global
`ChartJs` variable elsewhere (see
#6076).

Task: 5214007

Author: rrahir

src/helpers/figures/charts/chart_ui_common.ts

@@ -1,4 +1,9 @@
 import type { ChartConfiguration, ChartOptions } from "chart.js";
+import {
+  areChartJSExtensionsLoaded,
+  registerChartJSExtensions,
+  unregisterChartJsExtensions,
+} from "../../../components/figures/chart/chartJs/chart_js_extension";
 import { MAX_CHAR_LABEL } from "../../../constants";
 import { Figure } from "../../../types";
 import { GaugeChartRuntime, ScorecardChartRuntime } from "../../../types/chart";
@@ -50,27 +55,33 @@ export function chartToImage(
   canvas.setAttribute("height", figure.height.toString());
   // we have to add the canvas to the DOM otherwise it won't be rendered
   document.body.append(div);
+  let imgContent: string | undefined = undefined;
+  let extensionsLoaded = false;
   if ("chartJsConfig" in runtime) {
+    extensionsLoaded = areChartJSExtensionsLoaded();
+    if (!extensionsLoaded) {
+      registerChartJSExtensions();
+    }
     const config = deepCopy(runtime.chartJsConfig);
     config.plugins = [backgroundColorChartJSPlugin];
     const chart = new window.Chart(canvas, config as ChartConfiguration);
-    const imgContent = chart.toBase64Image() as string;
+    imgContent = chart.toBase64Image() as string;
     chart.destroy();
     div.remove();
-    return imgContent;
   } else if (type === "scorecard") {
     const design = getScorecardConfiguration(figure, runtime as ScorecardChartRuntime);
     drawScoreChart(design, canvas);
-    const imgContent = canvas.toDataURL();
+    imgContent = canvas.toDataURL();
     div.remove();
-    return imgContent;
   } else if (type === "gauge") {
     drawGaugeChart(canvas, runtime as GaugeChartRuntime);
-    const imgContent = canvas.toDataURL();
+    imgContent = canvas.toDataURL();
     div.remove();
-    return imgContent;
   }
-  return undefined;
+  if (!extensionsLoaded) {
+    unregisterChartJsExtensions();
+  }
+  return imgContent;
 }
 
 /**