diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index 1229bcd22b..9abcc60021 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -189,7 +189,7 @@ export const addDirective = (directive: MermaidConfig) => {
   sanitizeDirective(directive);
 
   // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables
-  if (directive.fontFamily && !directive.themeVariables?.fontFamily) {
+  if (directive.fontFamily && !directive.themeVariables.fontFamily) {
     directive.themeVariables = { fontFamily: directive.fontFamily };
   }
 
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
index 8f3b9cc5b3..b82cb83fb2 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -76,21 +76,21 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);
 
   const myGeneratedColors = [
-    themeVariables.pie1,
-    themeVariables.pie2,
-    themeVariables.pie3,
-    themeVariables.pie4,
-    themeVariables.pie5,
-    themeVariables.pie6,
-    themeVariables.pie7,
-    themeVariables.pie8,
-    themeVariables.pie9,
-    themeVariables.pie10,
-    themeVariables.pie11,
-    themeVariables.pie12,
+    themeVariables.pie1 || null,
+    themeVariables.pie2 || null,
+    themeVariables.pie3 || null,
+    themeVariables.pie4 || null,
+    themeVariables.pie5 || null,
+    themeVariables.pie6 || null,
+    themeVariables.pie7 || null,
+    themeVariables.pie8 || null,
+    themeVariables.pie9 || null,
+    themeVariables.pie10 || null,
+    themeVariables.pie11 || null,
+    themeVariables.pie12 || null,
   ];
   // Set the color scale
-  const color: d3.ScaleOrdinal<string, 12, never> = scaleOrdinal(myGeneratedColors);
+  const color: d3.ScaleOrdinal<string, string | null, never> = scaleOrdinal(myGeneratedColors);
 
   // Build the pie chart: each part of the pie is a path that we build using the arc function.
   group
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index eb9007f9cd..286c5dde7e 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -188,7 +188,7 @@ const runThrowsErrors = async function (
 
 /**
  * Used to set configurations for mermaid.
- * This function should be called before the run function.
+* This function should be called before the run function.
  * @param config - Configuration object for mermaid.
  */
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 7bca4d995e..da19a3f1ef 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -471,9 +471,9 @@ const render = async function (
 /**
  * @param  options - Initial Mermaid options
  */
-function initialize(options: MermaidConfig = {}) {
+function initialize(options: MermaidConfig = { themeVariables: {} }) {
   // Handle legacy location of font-family configuration
-  if (options?.fontFamily && !options.themeVariables?.fontFamily) {
+  if (options?.fontFamily && !options.themeVariables.fontFamily) {
     if (!options.themeVariables) {
       options.themeVariables = {};
     }