[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).

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";
@@ -41,6 +46,10 @@ export function chartToImage(
 ): string | undefined {
   // wrap the canvas in a div with a fixed size because chart.js would
   // fill the whole page otherwise
+  const extensionsLoaded = areChartJSExtensionsLoaded();
+  if (!extensionsLoaded) {
+    registerChartJSExtensions();
+  }
   const div = document.createElement("div");
   div.style.width = `${figure.width}px`;
   div.style.height = `${figure.height}px`;
@@ -50,27 +59,28 @@ 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;
   if ("chartJsConfig" in runtime) {
     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;
 }
 
 /**