Fix conflict

c3.js

@@ -257,6 +257,10 @@
             .on('mouseenter', function () { return config.onmouseover.call($$); })
             .on('mouseleave', function () { return config.onmouseout.call($$); });
 
+        if ($$.config.svg_classname) {
+            $$.svg.attr('class', $$.config.svg_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',
+            svg_classname: undefined,
             size_width: undefined,
             size_height: undefined,
             padding_left: undefined,

spec/core-spec.js

@@ -4,6 +4,9 @@ describe('c3 chart', function () {
     var chart;
 
     var args = {
+        svg: {
+            classname: 'customclass'
+        },
         data: {
             columns: [
                 ['data1', 30, 200, 100, 400, 150, 250],
@@ -34,6 +37,11 @@ describe('c3 chart', function () {
             expect(svg).not.toBeNull();
         });
 
+        it('should be created with a custom class', function () {
+            var svg = d3.select('#chart svg');
+            expect(svg.attr('class')).not.toBeNull();
+            expect(svg.attr('class')).toBe('customclass');
+        });
     });
 
     describe('size', function () {

src/config.js

@@ -1,6 +1,7 @@
 c3_chart_internal_fn.getDefaultConfig = function () {
     var config = {
         bindto: '#chart',
+        svg_classname: undefined,
         size_width: undefined,
         size_height: undefined,
         padding_left: undefined,

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.svg_classname) {
+        $$.svg.attr('class', $$.config.svg_classname);
+    }
+
     // Define defs
     defs = $$.svg.append("defs");
     $$.clipChart = $$.appendClip(defs, $$.clipId);