diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 5652e22b81..071d47b2d4 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -443,9 +443,25 @@ export class StateHistoryChartLine extends LitElement {
                   entityState.attributes?.hvac_action
                 ] === "cool"
             : (entityState: LineChartState) => entityState.state === "cool";
+        const isDrying =
+          domain === "climate" && hasHvacAction
+            ? (entityState: LineChartState) =>
+                CLIMATE_HVAC_ACTION_TO_MODE[
+                  entityState.attributes?.hvac_action
+                ] === "dry"
+            : (entityState: LineChartState) => entityState.state === "dry";
+        const isFanOnly =
+          domain === "climate" && hasHvacAction
+            ? (entityState: LineChartState) =>
+                CLIMATE_HVAC_ACTION_TO_MODE[
+                  entityState.attributes?.hvac_action
+                ] === "fan_only"
+            : (entityState: LineChartState) => entityState.state === "fan_only";
 
         const hasHeat = states.states.some(isHeating);
         const hasCool = states.states.some(isCooling);
+        const hasDry = states.states.some(isDrying);
+        const hasFan = states.states.some(isFanOnly);
         // We differentiate between thermostats that have a target temperature
         // range versus ones that have just a target temperature
 
@@ -494,6 +510,34 @@ export class StateHistoryChartLine extends LitElement {
           // The "cooling" series uses steppedArea to shade the area below the current
           // temperature when the thermostat is calling for heat.
         }
+        if (hasDry) {
+          addDataSet(
+            states.entity_id + "-drying",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.drying", { name: name })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.drying"
+                ),
+            computedStyles.getPropertyValue("--state-climate-dry-color"),
+            true
+          );
+          // The "drying" series uses steppedArea to shade the area below the current
+          // temperature when the climate entity is in dry mode.
+        }
+        if (hasFan) {
+          addDataSet(
+            states.entity_id + "-fan",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.fan", { name: name })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.fan"
+                ),
+            computedStyles.getPropertyValue("--state-climate-fan_only-color"),
+            true
+          );
+          // The "fan" series uses steppedArea to shade the area below the current
+          // temperature when the climate entity is in fan_only mode.
+        }
 
         if (hasTargetRange) {
           addDataSet(
@@ -546,6 +590,12 @@ export class StateHistoryChartLine extends LitElement {
           if (hasCool) {
             series.push(isCooling(entityState) ? curTemp : null);
           }
+          if (hasDry) {
+            series.push(isDrying(entityState) ? curTemp : null);
+          }
+          if (hasFan) {
+            series.push(isFanOnly(entityState) ? curTemp : null);
+          }
           if (hasTargetRange) {
             const targetHigh = safeParseFloat(
               entityState.attributes.target_temp_high
diff --git a/src/translations/en.json b/src/translations/en.json
index 1f21b59099..fb9f58e3fe 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -129,6 +129,8 @@
         "current_temperature": "{name} current temperature",
         "heating": "{name} heating",
         "cooling": "{name} cooling",
+        "drying": "{name} drying",
+        "fan": "{name} fan only",
         "high": "high",
         "low": "low",
         "mode": "Mode",