Use styles for chart sizing

Author: philipwalton

google-analytics-chart.html

@@ -24,6 +24,24 @@
 -->
 
 <dom-module is="google-analytics-chart">
+  <style>
+    :host {
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      width: 400px;
+      height: 300px;
+    }
+    google-chart {
+      -webkit-flex: 1 0 0%;
+      -ms-flex: 1 0 0%;
+      flex: 1 0 0%;
+      width: auto;
+    }
+  </style>
   <template>
     <google-analytics-loader all-ready="{{setupReady}}"></google-analytics-loader>
     <google-analytics-query id="query"
@@ -47,8 +65,6 @@
     <content select="header,h1,h2,h3,h4,h5,h6"></content>
     <google-chart id="chart"
       type="{{type}}"
-      width="{{width}}"
-      height="{{height}}"
       data="{{data.dataTable}}">
     </google-chart>
     <content select="footer"></content>
@@ -82,30 +98,6 @@
           value: 'area'
         },
 
-        /**
-         * Sets the width of the chart on the page.
-         *
-         * @attribute width
-         * @default 480
-         * @type number of string
-         */
-        width: {
-          type: Number,
-          value: 480
-        },
-
-        /**
-         * Sets the height of the chart on the page.
-         *
-         * @attribute height
-         * @default 320
-         * @type number or string
-         */
-        height: {
-          type: Number,
-          value:  320,
-        },
-
         /**
          * Sets the options for the chart.
          *