diff --git a/README.md b/README.md
index 5ea3950..7ec5ebc 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,7 @@ properties of the Entity object detailed in the following table (as per `sensor.
 | unit | string |  | Set a custom unit of measurement, overrides `unit` set in base config.
 | aggregate_func | string |  | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.
 | show_state | boolean |  | Display the current state.
+| show_legend_state | boolean |  | Display the current state with the legend.
 | show_indicator | boolean |  | Display a color indicator next to the state, (only when more than two states are visible).
 | show_graph | boolean |  | Set to false to completely hide the entity in the graph.
 | show_line | boolean |  | Set to false to hide the line.
diff --git a/src/main.js b/src/main.js
index 43f806d..e405987 100644
--- a/src/main.js
+++ b/src/main.js
@@ -338,17 +338,29 @@ class MiniGraphCard extends LitElement {
 
   renderLegend() {
     if (this.visibleLegends.length <= 1 || !this.config.show.legend) return;
+
+
     return html`
       <div class="graph__legend">
-        ${this.visibleLegends.map(entity => html`
-          <div class="graph__legend__item"
-            @click=${e => this.handlePopup(e, this.entity[entity.index])}
-            @mouseenter=${() => this.setTooltip(entity.index, -1, this.getEntityState(entity.index), 'Current')}
-            @mouseleave=${() => (this.tooltip = {})}>
-            ${this.renderIndicator(this.entity[entity.index].state, entity.index)}
-            <span class="ellipsis">${this.computeName(entity.index)}</span>
-          </div>
-        `)}
+        ${this.visibleLegends.map((entity) => {
+    let legend = this.computeName(entity.index);
+    const state = this.getEntityState(entity.index);
+
+    const { show_legend_state } = this.config.entities[entity.index];
+    if (show_legend_state) {
+      legend += ` (${this.computeState(state)}${this.computeUom(entity.index)})`;
+    }
+
+    return html`
+            <div class="graph__legend__item"
+              @click=${e => this.handlePopup(e, this.entity[entity.index])}
+              @mouseenter=${() => this.setTooltip(entity.index, -1, state, 'Current')}
+              @mouseleave=${() => (this.tooltip = {})}>
+              ${this.renderIndicator(this.entity[entity.index].state, entity.index)}
+              <span class="ellipsis">${legend}</span>
+            </div>
+          `;
+  })}
       </div>
     `;
   }