title: how do i customise the c3.js chart to get like this
body: <p><a href="https://i.stack.imgur.com/pomN1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pomN1.png" alt="donot or pie chart"></a>
  Trying to create the above using c3.js.
  We are using the same charting library across the application so would like to keep it consistent. Didn't find a way in c3.js to either customize donut or pie chart to get this. i need it to be hour, instead of percentage . and also the target value should be 12 instead of 100%. Any help or pointers are greatly appreciated.
  normal <a href="http://jsfiddle.net/yk3htaoc/1/" rel="noreferrer">jsfiddle</a> link to customise.</p>
  
  <pre><code>var chart = c3.generate({
   bindto: '#pie-chart',
  data: {
      columns: [
          ['data1', 30],
          ['data2', 120],
      ],
      type : 'donut',
      onclick: function (d, i) { console.log("onclick", d, i); },
      onmouseover: function (d, i) { console.log("onmouseover", d, i); },
      onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  },
  donut: {
      title: "Iris Petal Width"
  }
  });
  
  setTimeout(function () {
  chart.load({
      columns: [
          ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
          ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
  
      ]
  });
  }, 1500);
  
  setTimeout(function () {
  chart.unload({
      ids: 'data1'
  });
  chart.unload({
      ids: 'data2'
  });
  }, 2500);
  </code></pre>