Document Template not showing Rich Text Formula Field Pie Chart

Try this:

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

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

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)) & "%";


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

var text data =
  ToText($A) & "," &
  ToText($B) & "," &
  ToText($C) & "," &
  ToText($D) & "," &
  ToText($E) & "," &
  ToText($F) & "," &
  ToText($G) & "," &
  ToText($H) & "," &
  ToText($I) & "," &
  ToText($J);

var text colors =
  "\"" & $ACOL & "\"," &
  "\"" & $BCOL & "\"," &
  "\"" & $CCOL & "\"," &
  "\"" & $DCOL & "\"," &
  "\"" & $ECOL & "\"," &
  "\"" & $FCOL & "\"," &
  "\"" & $GCOL & "\"," &
  "\"" & $HCOL & "\"," &
  "\"" & $ICOL & "\"," &
  "\"" & $JCOL & "\"";

var text chartConfig =
  URLEncode(
    "{\"type\":\"pie\"," &
    "\"options\":{\"legend\":{\"display\":false}," &
    "\"plugins\":{\"legend\":{\"display\":false},\"datalabels\":{\"display\":false}},\"responsive\":false}," &
    "\"data\":{" &
      "\"labels\":[]," &
      "\"datasets\":[{" &
        "\"data\":[" & $data & "]," &
        "\"backgroundColor\":[" & $colors & "]" &
      "}]" &
    "}" &
  "}"
  );


var text chartURL =
  "https://quickchart.io/chart?width=" & $SZ & "&height=" & $SZ & "&c=" & $chartConfig;


var text pieChartHTML =
  "<div style='display:inline-block; vertical-align:top; margin-right: 30px;'>" &
  "<img src='" & $chartURL & "' width='" & $SZ & "' height='" & $SZ & "' style='border-radius:50%;'/>" &
  "</div>";

var text keyHTML =
  "<div style='display:inline-block; vertical-align:top;'>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $ACOL & ";margin-right:5px;'></span>" & $ALABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $BCOL & ";margin-right:5px;'></span>" & $BLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $CCOL & ";margin-right:5px;'></span>" & $CLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $DCOL & ";margin-right:5px;'></span>" & $DLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $ECOL & ";margin-right:5px;'></span>" & $ELABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $FCOL & ";margin-right:5px;'></span>" & $FLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $GCOL & ";margin-right:5px;'></span>" & $GLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $HCOL & ";margin-right:5px;'></span>" & $HLABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $ICOL & ";margin-right:5px;'></span>" & $ILABEL & "</div>" &
  "<div><span style='display:inline-block;width:10px;height:10px;background-color:" & $JCOL & ";margin-right:5px;'></span>" & $JLABEL & "</div>" &
  "</div>";

$pieChartHTML & $keyHTML

I tested it in my account with static values and it produces a pie, and the pie is displayed in a generated document (PDF).

I think the problem with your formula is this CSS:

> background: conic-gradient(...)

Is not supported by the PDF rendering engine.

What you can do instead is generate an image using some third party tool and instead embed that image in the document. This is what I did in my formula above, I'm using the third-party service Quickcharts to produce an image for the chart.