diff --git a/.gitignore b/.gitignore
index 0a59db4..b75f35c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,11 +5,4 @@ d3.js
 d3.min.js
 components
 build
-.idea/.name
-.idea/c3.iml
-.idea/encodings.xml
-.idea/misc.xml
-.idea/modules.xml
-.idea/scopes/scope_settings.xml
-.idea/vcs.xml
-.idea/workspace.xml
+.idea
\ No newline at end of file
diff --git a/htdocs/samples/api_legend.html b/htdocs/samples/api_legend.html
index 8851b1e..fe41fde 100644
--- a/htdocs/samples/api_legend.html
+++ b/htdocs/samples/api_legend.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <link rel="stylesheet" type="text/css" href="../css/c3.css">
+    <link rel="stylesheet" type="text/css" href="../css/c3.css">
 </head>
 <body>
 <div id="chart"></div>
@@ -9,135 +9,135 @@
 <script src="../js/c3.js"></script>
 <script>
 
-  var columns = [];
-  for (var i = 0; i < 5; i++ ) {
-    columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
-  }
-
-  var chart = c3.generate({
-    data: {
-      columns: columns,
-    },
-    axis: {
-      x: {
-        type: 'category'
-      }
+    var columns = [];
+    for (var i = 0; i < 5; i++) {
+        columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
     }
-  });
-
-  setTimeout(function () {
-    chart.legend.hide();
-  }, 1000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      axis: {
-        x: {
-          type: 'category'
+
+    var chart = c3.generate({
+        data: {
+            columns: columns,
+        },
+        axis: {
+            x: {
+                type: 'category'
+            }
         }
-      },
-      legend: {
-        position: 'right'
-      }
-    });
-  }, 2000);
-
-  setTimeout(function () {
-    chart.legend.hide();
-  }, 3000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      axis: {
-        rotated: true
-      }
-    });
-  }, 4000);
-
-  setTimeout(function () {
-    chart.legend.hide();
-  }, 5000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      legend: {
-        position: 'right'
-      },
-      axis: {
-        rotated: true
-      }
-    });
-  }, 6000);
-
-  setTimeout(function () {
-    chart.legend.hide();
-  }, 7000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      legend: {
-        show: false
-      }
     });
-  }, 8000);
-
-  setTimeout(function () {
-    chart.legend.show();
-  }, 9000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      legend: {
-        show: false
-      },
-      axis: {
-        rotated: true
-      }
-    });
-  }, 10000);
-
-  setTimeout(function () {
-    chart.legend.show();
-  }, 11000);
-
-  setTimeout(function () {
-    chart = c3.generate({
-      data: {
-        columns: columns,
-      },
-      legend: {
-        position: 'right',
-        show: false
-      }
-    });
-  }, 12000);
-
-  setTimeout(function () {
-    chart.legend.show();
-  }, 13000);
-
-  setTimeout(function () {
-    chart.legend.position('bottom');
-  }, 14000);
 
-  setTimeout(function () {
-    chart.legend.position('right');
-  }, 15000);
+    setTimeout(function () {
+        chart.legend.hide();
+    }, 1000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            axis: {
+                x: {
+                    type: 'category'
+                }
+            },
+            legend: {
+                position: 'right'
+            }
+        });
+    }, 2000);
+
+    setTimeout(function () {
+        chart.legend.hide();
+    }, 3000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            axis: {
+                rotated: true
+            }
+        });
+    }, 4000);
+
+    setTimeout(function () {
+        chart.legend.hide();
+    }, 5000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            legend: {
+                position: 'right'
+            },
+            axis: {
+                rotated: true
+            }
+        });
+    }, 6000);
+
+    setTimeout(function () {
+        chart.legend.hide();
+    }, 7000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            legend: {
+                show: false
+            }
+        });
+    }, 8000);
+
+    setTimeout(function () {
+        chart.legend.show();
+    }, 9000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            legend: {
+                show: false
+            },
+            axis: {
+                rotated: true
+            }
+        });
+    }, 10000);
+
+    setTimeout(function () {
+        chart.legend.show();
+    }, 11000);
+
+    setTimeout(function () {
+        chart = c3.generate({
+            data: {
+                columns: columns,
+            },
+            legend: {
+                position: 'right',
+                show: false
+            }
+        });
+    }, 12000);
+
+    setTimeout(function () {
+        chart.legend.show();
+    }, 13000);
+
+    setTimeout(function () {
+        chart.legend.position('bottom');
+    }, 14000);
+
+    setTimeout(function () {
+        chart.legend.position('right');
+    }, 15000);
 
 </script>
 </body>
diff --git a/spec/api.legend-spec.js b/spec/api.legend-spec.js
new file mode 100644
index 0000000..3c7769e
--- /dev/null
+++ b/spec/api.legend-spec.js
@@ -0,0 +1,56 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 api legend', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25]
+            ]
+        },
+        legend: {
+            position: 'bottom'
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter')
+            .style('position', 'absolute')
+            .style('right', 0);
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('legend position', function () {
+
+        it('should be located at the bottom of the chart', function () {
+            expect(true).toBeTruthy();
+        });
+
+        it('should be located to the right of the chart', function () {
+            chart.legend.position('right');
+            expect(true).toBeTruthy();
+        });
+
+        it('should be located at the bottom of the chart', function () {
+            chart.legend.position('bottom');
+            expect(true).toBeTruthy();
+        });
+
+    });
+});
\ No newline at end of file
