diff --git a/bar-history/index.html b/bar-history/index.html
index c260927..ba15c66 100644
--- a/bar-history/index.html
+++ b/bar-history/index.html
@@ -18,6 +18,8 @@
       }
       main {
         display: flex;
+        width: 100vw;
+        height: 98vh;
         align-items: center;
         justify-content: center;
         flex-direction: column;
@@ -26,18 +28,17 @@
         font-size: 6vmin;
         margin: 0px;
         padding: 0px;
-        margin-top: -10vh;
         width: 80vw;
         text-align: center;
       }
       cbase-polar {
-        height: 72vh;
-        width: 72vh;
-        margin-left: 80px;
+        height: 72vmin;
+        width: 72vmin;
       }
       @media (orientation: portrait) {
         p {
           width: 95vw;
+          font-size: 5vmin;
         }
       }
     </style>
@@ -45,7 +46,7 @@
   <body>
     <main>
       <h1>bar historical data</h1>
-      <cbase-polar timeseries="bar.open" days="90" percentage></cbase-polar>
+      <cbase-polar timeseries="bar.open" days="90" size="72" percentage></cbase-polar>
       <p>
         Likelihood of bar being open at a given hour. Based on last 90 days.
       </p>
diff --git a/elements/polar.js b/elements/polar.js
index 2e7f5b6..f875239 100644
--- a/elements/polar.js
+++ b/elements/polar.js
@@ -1,5 +1,7 @@
 import { withComponent, props } from 'skatejs';
 import { Timeseries } from '../lib/timeseries';
+import { colors } from '../lib/colors';
+import injectCss from '../lib/plotly-shadowdom';
 
 const Component = withComponent();
 
@@ -11,6 +13,7 @@ class Polar extends Component {
     accumulate: props.boolean,
     percentage: props.boolean,
     data: props.array,
+    size: props.number,
   };
 
   connected() {
@@ -31,16 +34,21 @@ class Polar extends Component {
 
   renderer(renderRoot, render) {
     const root = renderRoot;
-    root.innerHtml = '';
+    while (root.firstChild) {
+      root.removeChild(root.firstChild);
+    }
     root.appendChild(render());
+    injectCss(root);
   }
 
-  render({ percentage, data, ts }) {
+  render({ percentage, data, ts, size }) {
     const el = document.createElement('div');
     if (!data || !data.length || !ts) {
       // No data yet
       return el;
     }
+    const vmin = Math.min(window.innerWidth, window.innerHeight);
+    const graphSize = Math.floor((vmin / 100) * (size || 40));
     const layout = {
       orientation: 270,
       direction: 'clockwise',
@@ -60,7 +68,9 @@ class Polar extends Component {
       },
       showlegend: false,
       paper_bgcolor: 'transparent',
-      autosize: true,
+      autosize: false,
+      width: graphSize,
+      height: graphSize,
       margin: {
         l: 0,
         r: 0,
@@ -77,7 +87,7 @@ class Polar extends Component {
         name: dayLabels[dayIdx],
         type: 'area',
         marker: {
-          color: '#f57900',
+          color: colors[2],
         },
         opacity: 0.8,
         showlegend: false,
diff --git a/theme/c-base.css b/theme/c-base.css
index 84f8960..48ade55 100644
--- a/theme/c-base.css
+++ b/theme/c-base.css
@@ -22,6 +22,7 @@ body {
   background-color: rgba(0, 0, 0, 0.98);
   color: #a0a0a0;
   padding: 0px;
+  margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
 }
