diff --git a/src/main.js b/src/main.js
index 43a7bc0..0aa247c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -329,11 +329,11 @@ class MiniGraphCard extends LitElement {
       <div class="graph">
         ${ready ? html`
             <div class="graph__container">
-              ${this.renderLabels()}
-              ${this.renderLabelsSecondary()}
               <div class="graph__container__svg">
                 ${this.renderSvg()}
               </div>
+              ${this.renderLabels()}
+              ${this.renderLabelsSecondary()}
             </div>
             ${this.renderLegend()}
         ` : html`
@@ -539,6 +539,7 @@ class MiniGraphCard extends LitElement {
     const { height } = this.config;
     return svg`
       <svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
+        preserveAspectRatio='none'
         @click=${e => e.stopPropagation()}>
         <g>
           <defs>
diff --git a/src/style.js b/src/style.js
index 0139587..66c76c2 100644
--- a/src/style.js
+++ b/src/style.js
@@ -4,6 +4,7 @@ const style = css`
   :host {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
   ha-card {
     flex-direction: column;
@@ -234,6 +235,7 @@ const style = css`
     right: 0;
   }
   .graph {
+    flex: auto;
     align-self: flex-end;
     box-sizing: border-box;
     display: flex;
@@ -245,10 +247,13 @@ const style = css`
     display: flex;
     flex-direction: row;
     position: relative;
+    height: 100%;
   }
   .graph__container__svg {
     cursor: default;
-    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
   svg {
     overflow: hidden;