Document Template not showing Rich Text Formula Field Pie Chart

Hello everyone,

I have a rich text formula field that I would like to show on the Document Template - what is interesting is that the "legend" is showing but not the pie chart itself.  I am wondering if the style is conflicting with Word essentially.  I tried already wrapping in a div to see if that would solve the issue but it is persisting.  The Code is here and the image of the Document template is below the code.  Thank you so much!

Code:

var text SZ = "200"; //Adjust this number to make the pie bigger or smaller

//include a space after each color
var text ACOL = "LightSkyBlue "; //Heating All Fuels
var text BCOL = "Gold "; //Cooling All Fuels
var text CCOL = "Hotpink "; //Ventilation All Fuels
var text DCOL = "MediumOrchid "; //Domestic Hot Water
var text ECOL = "CornflowerBlue "; //Lighting
var text FCOL = "Lime "; //Cooking
var text GCOL = "yellow "; //Refrigeration
var text HCOL = "DarkViolet "; //Office Equipment
var text ICOL = "red "; //Computer
var text JCOL = "orange "; //Misc

// Define Labels
var text ALABEL = "Heating " & ToText(Round([Heating Electric Use Percentage]*100,1)) & "%";
var text BLABEL = "Cooling " & ToText(Round([Cooling Electric Use Percentage]*100,1)) & "%";
var text CLABEL = "Ventilation " & ToText(Round([Ventilation Electric Use Percentage]*100,1)) & "%";
var text DLABEL = "Domestic Hot Water " & ToText(Round([Domestic Hot Water Electric Use Percentage]*100,1)) & "%";
var text ELABEL = "Lighting " & ToText(Round([Lighting Electric Use Percentage]*100,1)) & "%";
var text FLABEL = "Cooking " & ToText(Round([Cooking Electric Use Percentage]*100,1)) & "%";
var text GLABEL = "Refrigeration " & ToText(Round([Refrigeration Electric Use Percentage]*100,1)) & "%";
var text HLABEL = "Office Equipment " & ToText(Round([Office Equipment Electric Use Percentage]*100,1)) & "%";
var text ILABEL = "Computer " & ToText(Round([Computer Electric Use Percentage]*100,1))& "%";
var text JLABEL = "Miscellaneous " & ToText(Round([Miscellaneous Electric Use Percentage]*100,1)) & "%";

//Skip first total

var number B = [Cooling kWh]/[Total Electric Use Chart];
var number C = [Ventilation kWh]/[Total Electric Use Chart];
var number D = [Domestic Hot Water kWh]/[Total Electric Use Chart];
var number E = [Lighting kWh]/[Total Electric Use Chart];
var number F = [Cooking kWh]/[Total Electric Use Chart];
var number G = [Refrigeration kWh]/[Total Electric Use Chart];
var number H = [Office Equipment kWh]/[Total Electric Use Chart];
var number I = [Computer kWh]/[Total Electric Use Chart];
var number J = [Miscellaneous kWh]/[Total Electric Use Chart];

//Displays values from top clockwise
var text pieChartHTML =
"<div style='display:inline-block; margin-left: 30px; margin-top: 0px; vertical-align: middle;'>" &
"<span style='display:inline-block;margin-top: 10px; width:200px; height:200px;" &
 "background: conic-gradient(" &
 $JCOL & " 0turn " & $J & "turn, " &
 $ICOL & $J & "turn " & ($J+$I) & "turn, " &
 $HCOL & ($J+$I) & "turn " & ($J+$I+$H) & "turn, " &
 $GCOL & ($J+$I+$H) & "turn " & ($J+$I+$H+$G) & "turn, " &
 $FCOL & ($J+$I+$H+$G) & "turn " & ($J+$I+$H+$G+$F) & "turn, " &
 $ECOL & ($J+$I+$H+$G+$F) & "turn " & ($J+$I+$H+$G+$F+$E) & "turn, " &
 $DCOL & ($J+$I+$H+$G+$F+$E) & "turn " & ($J+$I+$H+$G+$F+$E+$D) & "turn, " &
 $CCOL & ($J+$I+$H+$G+$F+$E+$D) & "turn " & ($J+$I+$H+$G+$F+$E+$D+$C) & "turn, " &
 $BCOL & ($J+$I+$H+$G+$F+$E+$D+$C) & "turn " & ($J+$I+$H+$G+$F+$E+$D+$C+$B) & "turn, " &
 $ACOL & ($J+$I+$H+$G+$F+$E+$D+$C+$B) & "turn 1turn) !Important;" &
 "border-radius: 50%'>" &
"</span>"&
"</div>";
// --- Manual Key Generation ---
var text keyHTML = "<div style='display:inline-block; margin-left: 30px; margin-top: -10px; vertical-align: middle;'>" &
    "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ACOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ALABEL & "</div>" &
    "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $BCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $BLABEL & "</div>" &
    "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $CCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $CLABEL & "</div>" &
    
       "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $DCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $DLABEL & "</div>" & 
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ECOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ELABEL & "</div>" &
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $FCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $FLABEL & "</div>" &
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $GCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $GLABEL & "</div>" &
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $HCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $HLABEL & "</div>" &
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ICOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ILABEL & "</div>" &
        "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $JCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $JLABEL & "</div>" &
    
    
    "</div>";

// Combine the chart and the key
$pieChartHTML & $keyHTML

Here is what it looks like in the Document Template:

Here is what the field shows on the form (The pie is showing):

Thanks so much again!