Example 3

Pie chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="chart1"></div>
<div id="slice-id"></div>
<div id="d-content"></div>

CSS

div{
  text-align: center;
}

JavaScript

chart = c3.generate({
  bindto: "#chart1",
  data: {
    json: {"data1": 50,"data2": 120},
    type: "pie",
    onclick: function(d, element) {

      $("#slice-id").html("you clicked on slice: " + d.id);

      $("#d-content").html(JSON.stringify(d));
    }
  },

});