diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index eabf8d7b9a..eaac032fcc 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -21,7 +21,7 @@
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <div id='chart_area'></div>
+        <div id$='[[computeChartId(stateObj)]]'></div>
         <ha-attributes state-obj='[[stateObj]]' extra-filters='forecast'></ha-attributes>
       </div>
     </ha-card>
@@ -50,6 +50,10 @@
       return stateObj.attributes.friendly_name;
     },
 
+    computeChartId: function (stateObj) {
+      return 'chart_area_' + stateObj.id;
+    },
+
     getDataArray: function () {
       var dataArray = [];
       var data = this.stateObj.attributes.forecast;
@@ -79,7 +83,8 @@
       }
 
       if (!this.chartEngine) {
-        this.chartEngine = new window.google.visualization.LineChart(document.getElementById('chart_area'));
+        this.chartEngine = new window.google.visualization.LineChart(
+          document.getElementById(this.computeChartId(this.stateObj)));
       }
 
       this.drawChart();