JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
  <body>
    <div id="chartContainer"></div>
  </body>

JavaScript

var chart = c3.generate({
  bindto: '#chartContainer',
     tooltip: {
	        grouped: false 
	    }, 
    data: {

        columns: [

            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350],
            ['data3', 30, 200, 100, 400, 150, 250],
            ['data4', 130, 340, 200, 500, 250, 350],
            ['data5', 130, 340, 200, 500, 250, 350],
            ['data6', 130, 340, 200, 500, 250, 350],
            ['data7', 130, 340, 200, 500, 250, 350],
            ['diif1', null, null, 700 ],
            ['diif2', null, null, 1200]
        ],
        types:{
         "data1" :"bar",
            "data2" :"bar",
            "data3" :"bar",
            "data4" :"bar",
            "data5" :"bar",
            "data6" :"bar",
            "data7" :"bar",
             "diff1" : "line",
            "diff2" : "line"
       
      },
         order:null,
        groups: [
            ['data1', 'data2','data3', 'data4'],
            ['data5', 'data6','data7']
        ],
         onclick: function (d, element) { 
             var name=d.name;
             drilldown(name);
         }
     
    },
       grid: {
           y: {
            lines:[{value:1400,text:1400}, 
		          {value: 1450,text: 1450}
                 ]
             }
        }

});


function drilldown(name){
 alert('Call for ' +name);   
}