diff --git a/c3.js b/c3.js
index 846fb71..9d4c7ae 100644
--- a/c3.js
+++ b/c3.js
@@ -257,6 +257,10 @@
             .on('mouseenter', function () { return config.onmouseover.call($$); })
             .on('mouseleave', function () { return config.onmouseout.call($$); });
 
+        if ($$.config.classname) {
+            $$.svg.attr('class', $$.config.classname);
+        }
+
         // Define defs
         defs = $$.svg.append("defs");
         $$.clipChart = $$.appendClip(defs, $$.clipId);
@@ -1064,6 +1068,7 @@
     c3_chart_internal_fn.getDefaultConfig = function () {
         var config = {
             bindto: '#chart',
+            classname: undefined,
             size_width: undefined,
             size_height: undefined,
             padding_left: undefined,
diff --git a/src/config.js b/src/config.js
index 0972b12..ddeea52 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,6 +1,7 @@
 c3_chart_internal_fn.getDefaultConfig = function () {
     var config = {
         bindto: '#chart',
+        classname: undefined,
         size_width: undefined,
         size_height: undefined,
         padding_left: undefined,
diff --git a/src/core.js b/src/core.js
index 60ee0c5..14a8666 100644
--- a/src/core.js
+++ b/src/core.js
@@ -252,6 +252,10 @@ c3_chart_internal_fn.initWithData = function (data) {
         .on('mouseenter', function () { return config.onmouseover.call($$); })
         .on('mouseleave', function () { return config.onmouseout.call($$); });
 
+    if ($$.config.classname) {
+        $$.svg.attr('class', $$.config.classname);
+    }
+
     // Define defs
     defs = $$.svg.append("defs");
     $$.clipChart = $$.appendClip(defs, $$.clipId);