diff --git a/example/index.html b/example/index.html
index 16994ce..4907307 100644
--- a/example/index.html
+++ b/example/index.html
@@ -8,7 +8,7 @@
         font-family: sans-serif;
       }
 
-      #chart { width: 100%; }
+      #chart_wrapper { overflow: scroll; overflow-y: hidden; }
 
       ul { list-style: none; }
 
@@ -29,9 +29,12 @@
       }
     </style>
   </head>
+
   <body>
     <h2>Chart</h2>
-    <div id="chart"></div>
+    <div id="chart_wrapper">
+      <div id="chart"></div>
+    </div>
     <div id="selection-info"></div>
 
     <a href="#" id="clearBrush">Clear brush</a>
diff --git a/main.js b/main.js
index 22b5da8..53dc840 100644
--- a/main.js
+++ b/main.js
@@ -17,7 +17,7 @@ function TimelineChart (element, data, opts) {
     opts.barRoundSize = opts.barRoundSize || 10;
     opts.xAxisHeight  = opts.xAxisHeight || 60;
     opts.margin       = { top: 200, right: 40, bottom: 200, left: 40 };
-    opts.width        = element.clientWidth - opts.margin.left - opts.margin.right;
+    opts.width        = (element.clientWidth - opts.margin.left - opts.margin.right) * 3.2;
     opts.onBarClicked = opts.onBarClicked || noop;
     opts.onBarChanged = opts.onBarChanged || noop;
     opts.onBarCreated = opts.onBarCreated || noop;
