diff --git a/sample.html b/sample.html
new file mode 100644
index 0000000..40c848c
--- /dev/null
+++ b/sample.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
+    "http://www.w3.org/TR/html4/strict.dtd">
+<head>
+
+    <style>
+    </style>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
+    <script type="text/javascript" src="dist/jquery.sparkline.js"></script>
+
+    <script type="text/javascript">
+    $(function() {
+        /** This code runs when everything has been loaded on the page */
+        /* Inline sparklines take their values from the contents of the tag */
+        $('.inlinesparkline').sparkline(); 
+
+        /* Sparklines can also take their values from the first argument 
+        passed to the sparkline() function */
+        var myvalues = [[100,80,50,70,40,40,10], [90,40,20,60,80,20,19]];
+        $('.dynamicsparkline').sparkline(myvalues);
+
+        /* The second argument gives options such as chart type */
+        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
+
+        /* Use 'html' instead of an array of values to pass options 
+        to a sparkline with data in the tag */
+        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
+
+
+
+        var types = ['line', 'bar', 'tristate', 'bullet', 'discrete', 'pie', 'box'];
+        var datavalues = [null, null, 1, 100,80,50,70,40,40,10, null, 100, null, 1000, -20, null, 90,40,20,60,80,20,19];
+        for (var i = 0; i < types.length; i++) {
+            var type = types[i];
+
+            $('.test-basic-' + type).sparkline(datavalues, {
+                type: type, 
+                barColor: 'red'
+            });
+
+            var $el = $('.fixed-dimensions-' + type);
+            console.log("w/h: ", $el.width(), $el.height());
+            $el.sparkline(datavalues, {
+                type: type, 
+                barColor: 'red',
+                width: $el.innerWidth(),
+                height: $el.innerHeight()
+            });
+        }
+    });
+
+    </script>
+</head>
+<body>
+
+<p>
+Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
+</p>
+<p>
+Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
+</p>
+<p>
+Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
+</p>
+<p>
+Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
+</p>
+
+<hr />
+<h1>Default sparklines</h1>
+<p>
+Line chart: <span class="test-basic-line">Loading..</span>
+</p>
+<p>
+Bar chart: <span class="test-basic-bar">Loading..</span>
+</p>
+<p>
+Tristate chart: <span class="test-basic-tristate">Loading..</span>
+</p>
+<p>
+Bullet chart: <span class="test-basic-bullet">Loading..</span>
+</p>
+<p>
+Discrete chart: <span class="test-basic-discrete">Loading..</span>
+</p>
+<p>
+Pie chart: <span class="test-basic-pie">Loading..</span>
+</p>
+<p>
+Box chart: <span class="test-basic-box">Loading..</span>
+</p>
+
+<hr />
+<h1>Fixed-dimension sparklines</h1>
+<style>
+.fixed-dimensions
+{
+    display: inline-block;
+    padding: 1px;
+    border: 1px solid grey;
+
+    width: 40px;
+    height: 20px;
+}
+.wrapper
+{
+    display: inline-block;
+
+    padding: 1px;
+    border: 1px dotted black;
+}
+</style>
+<p>
+Line chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-line">Loading..</span></span>
+</p>
+<p>
+Bar chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-bar">Loading..</span></span>
+</p>
+<p>
+Tristate chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-tristate">Loading..</span></span>
+</p>
+<p>
+Bullet chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-bullet">Loading..</span></span>
+</p>
+<p>
+Discrete chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-discrete">Loading..</span></span>
+</p>
+<p>
+Pie chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-pie">Loading..</span></span>
+</p>
+<p>
+Box chart: <span class="wrapper"><span class="fixed-dimensions fixed-dimensions-box">Loading..</span></span>
+</p>
+</body>
+</html>
diff --git a/src/chart-bar.js b/src/chart-bar.js
index de0e376..72de525 100644
--- a/src/chart-bar.js
+++ b/src/chart-bar.js
@@ -43,7 +43,9 @@
             this.barWidth = barWidth;
             this.barSpacing = barSpacing;
             this.totalBarWidth = barWidth + barSpacing;
-            this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing);
+            var rawWidth = (values.length * barWidth) + ((values.length - 1) * barSpacing);
+            this.xScale = Math.min(1, rawWidth ? width / rawWidth : 1);
+            this.width = rawWidth * this.xScale; 
 
             this.initTarget();
 
@@ -103,7 +105,7 @@
             this.zeroAxis = zeroAxis = options.get('zeroAxis', true);
             if (min <= 0 && max >= 0 && zeroAxis) {
                 xaxisOffset = 0;
-            } else if (zeroAxis == false) {
+            } else if (zeroAxis === false) {
                 xaxisOffset = min;
             } else if (min > 0) {
                 xaxisOffset = min;
@@ -145,6 +147,7 @@
         },
 
         getRegion: function (el, x, y) {
+            x /= this.xScale; 
             var result = Math.floor(x / this.totalBarWidth);
             return (result < 0 || result >= this.values.length) ? undefined : result;
         },
@@ -245,7 +248,7 @@
                 if (highlight) {
                     color = this.calcHighlightColor(color, options);
                 }
-                result.push(target.drawRect(x, y, this.barWidth - 1, height - 1, color, color));
+                result.push(target.drawRect(x * this.xScale, y, (this.barWidth - 1) * this.xScale, height - 1, color, color));
             }
             if (result.length === 1) {
                 return result[0];
diff --git a/src/chart-line.js b/src/chart-line.js
index bb1c7ef..e144208 100644
--- a/src/chart-line.js
+++ b/src/chart-line.js
@@ -121,7 +121,6 @@
             this.xvalues = xvalues;
             this.yvalues = yvalues;
             this.yminmax = yminmax;
-
         },
 
         processRangeOptions: function () {
diff --git a/src/chart-tristate.js b/src/chart-tristate.js
index 6b2771b..6a1f66b 100644
--- a/src/chart-tristate.js
+++ b/src/chart-tristate.js
@@ -14,7 +14,9 @@
             this.barSpacing = barSpacing;
             this.totalBarWidth = barWidth + barSpacing;
             this.values = $.map(values, Number);
-            this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing);
+            var rawWidth = (values.length * barWidth) + ((values.length - 1) * barSpacing);
+            this.xScale = Math.min(1, rawWidth ? width / rawWidth : 1);
+            this.width = rawWidth * this.xScale; 
 
             if ($.isArray(options.get('colorMap'))) {
                 this.colorMapByIndex = options.get('colorMap');
@@ -92,7 +94,7 @@
             if (highlight) {
                 color = this.calcHighlightColor(color, options);
             }
-            return target.drawRect(x, y, this.barWidth - 1, height - 1, color, color);
+            return target.drawRect(x * this.xScale, y, (this.barWidth - 1) * this.xScale, height - 1, color, color);
         }
     });
 
