diff --git a/htdocs/index.html b/htdocs/index.html
index f5fec45..c540401 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -26,12 +26,21 @@
               <a href="./samples/chart_area.html">
                 Area chart with ordinary data
               </a>
-              <a class="btn btn-danger" href="./samples/chart_area_spline.html">
+              <a href="./samples/chart_area_spline.html">
                 Area-spline chart with ordinary data
               </a>
-              <a class="btn btn-danger" href="./samples/chart_area_step.html">
+              <a href="./samples/chart_area_step.html">
                 Area-step chart with ordinary data
               </a>
+              <a href="./samples/chart_area_stacked.html">
+                Stacked Area chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_spline_stacked.html">
+                Stacked Area-spline chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_step_stacked.html">
+                Stacked Area-step chart with ordinary data
+              </a>
             </div>
             <div class="col-md-4">
               <h3>Bar Chart</h3>
diff --git a/htdocs/samples/chart_area.html b/htdocs/samples/chart_area.html
index e74a28d..6e06c01 100644
--- a/htdocs/samples/chart_area.html
+++ b/htdocs/samples/chart_area.html
@@ -5,6 +5,7 @@
   <body>
     <div id="chart1"></div>
     <div id="chart2"></div>
+    <div id="chart3"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
@@ -17,10 +18,7 @@
             ['data1', 300, 350, 300, 0, 0, 0],
             ['data2', 130, 100, 140, 200, 150, 50]
           ],
-          types: {
-            data1: 'area',
-            data2: 'area-spline'
-          }
+          type: 'area'
         }
       });
 
@@ -31,10 +29,18 @@
             ['data1', -300, -350, -300, 0, 0, 0],
             ['data2', -130, -100, -140, -200, -150, -50]
           ],
-          types: {
-            data1: 'area',
-            data2: 'area-spline'
-          }
+          type: 'area'
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area'
         }
       });
 
diff --git a/htdocs/samples/chart_area_spline.html b/htdocs/samples/chart_area_spline.html
new file mode 100644
index 0000000..836474a
--- /dev/null
+++ b/htdocs/samples/chart_area_spline.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/htdocs/samples/chart_area_spline_stacked.html b/htdocs/samples/chart_area_spline_stacked.html
new file mode 100644
index 0000000..e01b0bd
--- /dev/null
+++ b/htdocs/samples/chart_area_spline_stacked.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/htdocs/samples/chart_area_stacked.html b/htdocs/samples/chart_area_stacked.html
new file mode 100644
index 0000000..3545e53
--- /dev/null
+++ b/htdocs/samples/chart_area_stacked.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/htdocs/samples/chart_area_step.html b/htdocs/samples/chart_area_step.html
new file mode 100644
index 0000000..2ba7a27
--- /dev/null
+++ b/htdocs/samples/chart_area_step.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/htdocs/samples/chart_area_step_stacked.html b/htdocs/samples/chart_area_step_stacked.html
new file mode 100644
index 0000000..ce470e4
--- /dev/null
+++ b/htdocs/samples/chart_area_step_stacked.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>
