<html> <head> <link href="/css/c3.css" rel="stylesheet" type="text/css"> </head> <body> <div id="chart1" style="height:300px;"></div> <div class="chart2" style="height:150px;"></div> <div class="chart3" style="height:150px;"></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', 130, 210, 120, 440, 250, 350] ] } }); var chart2 = c3.generate({ bindto: '.chart2', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250] ] } }); var chart3 = c3.generate({ bindto: document.getElementsByClassName('chart3')[0], data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250] ] } }); </script> </body> </html>