diff --git a/src/components/state-history-chart-line.js b/src/components/state-history-chart-line.js
index ff044f89c3..8c2bb856d5 100644
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -25,6 +25,7 @@ class StateHistoryChartLine extends PolymerElement {
     return {
       chartData: Object,
       data: Object,
+      names: Object,
       unit: String,
       identifier: String,
 
@@ -91,9 +92,10 @@ class StateHistoryChartLine extends PolymerElement {
       endTime = new Date();
     }
 
+    const names = this.names || {};
     deviceStates.forEach((states) => {
       const domain = states.domain;
-      const name = states.name;
+      const name = names[states.entity_id] || states.name;
       // array containing [value1, value2, etc]
       let prevValues;
       const data = [];
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index ae774e09e2..5f6e69cfac 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -34,6 +34,7 @@ class StateHistoryChartTimeline extends PolymerElement {
         type: Object,
         observer: 'dataChanged',
       },
+      names: Object,
       noSingle: Boolean,
       endTime: Date,
       rendered: {
@@ -95,15 +96,15 @@ class StateHistoryChartTimeline extends PolymerElement {
     const labels = [];
     const datasets = [];
     // stateHistory is a list of lists of sorted state objects
+    const names = this.names || {};
     stateHistory.forEach((stateInfo) => {
       let newLastChanged;
       let prevState = null;
       let locState = null;
       let prevLastChanged = startTime;
-      const entityDisplay = stateInfo.name;
+      const entityDisplay = names[stateInfo.entity_id] || stateInfo.name;
+
       const dataRow = [];
-
-
       stateInfo.data.forEach((state) => {
         let newState = state.state;
         const timeStamp = new Date(state.last_changed);
diff --git a/src/components/state-history-charts.js b/src/components/state-history-charts.js
index ec64c77c38..cd5174ce8b 100644
--- a/src/components/state-history-charts.js
+++ b/src/components/state-history-charts.js
@@ -31,12 +31,12 @@ class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
     </template>
 
     <template is="dom-if" if="[[historyData.timeline.length]]">
-      <state-history-chart-timeline data="[[historyData.timeline]]" end-time="[[_computeEndTime(endTime, upToNow, historyData)]]" no-single="[[noSingle]]">
+      <state-history-chart-timeline data="[[historyData.timeline]]" end-time="[[_computeEndTime(endTime, upToNow, historyData)]]" no-single="[[noSingle]]" names="[[names]]">
       </state-history-chart-timeline>
     </template>
 
     <template is="dom-repeat" items="[[historyData.line]]">
-      <state-history-chart-line unit="[[item.unit]]" data="[[item.data]]" identifier="[[item.identifier]]" is-single-device="[[_computeIsSingleLineChart(item.data, noSingle)]]" end-time="[[_computeEndTime(endTime, upToNow, historyData)]]">
+      <state-history-chart-line unit="[[item.unit]]" data="[[item.data]]" identifier="[[item.identifier]]" is-single-device="[[_computeIsSingleLineChart(item.data, noSingle)]]" end-time="[[_computeEndTime(endTime, upToNow, historyData)]]" names="[[names]]">
       </state-history-chart-line>
     </template>
 `;
@@ -49,6 +49,7 @@ class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
         type: Object,
         value: null,
       },
+      names: Object,
 
       isLoadingData: Boolean,
 
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
index d8b3e2c935..b7e3aa6215 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.js
+++ b/src/panels/lovelace/cards/hui-history-graph-card.js
@@ -5,6 +5,9 @@ import '../../../components/ha-card.js';
 import '../../../components/state-history-charts.js';
 import '../../../data/ha-state-history-data.js';
 
+import processConfigEntities from '../common/process-config-entities.js';
+
+
 class HuiHistoryGraphCard extends PolymerElement {
   static get template() {
     return html`
@@ -21,7 +24,7 @@ class HuiHistoryGraphCard extends PolymerElement {
         <ha-state-history-data
           hass="[[hass]]"
           filter-type="recent-entity"
-          entity-id="[[_config.entities]]"
+          entity-id="[[_entities]]"
           data="{{stateHistory}}"
           is-loading="{{stateHistoryLoading}}"
           cache-config="[[_computeCacheConfig(_config)]]"
@@ -30,6 +33,7 @@ class HuiHistoryGraphCard extends PolymerElement {
           hass="[[hass]]"
           history-data="[[stateHistory]]"
           is-loading-data="[[stateHistoryLoading]]"
+          names="[[_names]]"
           up-to-now
           no-single
         ></state-history-charts>
@@ -41,7 +45,11 @@ class HuiHistoryGraphCard extends PolymerElement {
     return {
       hass: Object,
       _config: Object,
-      stateHistory: Object,
+      stateHistory: {
+        type: Object,
+      },
+      _names: Array,
+      _entities: Object,
       stateHistoryLoading: Boolean,
     };
   }
@@ -51,11 +59,20 @@ class HuiHistoryGraphCard extends PolymerElement {
   }
 
   setConfig(config) {
-    if (!config.entities || !Array.isArray(config.entities)) {
-      throw new Error('Error in card configuration.');
-    }
+    const entities = processConfigEntities(config.entities);
 
     this._config = config;
+
+    const _entities = [];
+    const _names = {};
+    for (const entity of entities) {
+      _entities.push(entity.entity);
+      if (entity.name) {
+        _names[entity.entity] = entity.name;
+      }
+    }
+    this._entities = _entities;
+    this._names = _names;
   }
 
   _computeCacheConfig(config) {