how do i customise the c3.js chart to get like this

Question

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 jsfiddle link to customise.

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);

Answer 1

I think I'm pretty close to what you were wanting. The onrendered callback code is to append a circle in the middle of that; you may want to handle that another way, my implementation is pretty basic.

The key things to pay attention to are the config options under gauge:

    gauge: {
      fullCircle: true, // This makes it go all the way around
      max: 12, // This is your max unit -- 12h
      min: 0, // Min. is 0
      startingAngle: 90, // This sets the opening to the other side
      width: 25, // This is how thick the outer arc is.
      label: {
        format: function(value, ratio) {
          return value + 'HR';
        }
      }

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 10],
        ],
        type: 'gauge',
        colors: {
        	data1: '#9873FF'
        }
    },
    gauge: {
      fullCircle: true, // This makes it go all the way around
      max: 12, // This is your max unit -- 12h
      min: 0, // Min. is 0
      startingAngle: 90, // This sets the opening to the other side
      width: 25, // This is how thick the outer arc is
      label: {
        format: function(value, ratio) {
		  return value + 'HR';
        }
      }
    },
    onrendered: function() {
      setTimeout(function(){ // timeout is needed for initial render.
        var centerBBox = d3.select('.c3-arc-data1').node().getBBox();

        d3.select('.c3-arcs-data1')
        .insert('circle', '.c3-arc-data1')
        .classed('c3-arc-data1-background', true)
        .attr('cx', centerBBox.x + centerBBox.width/2)
        .attr('cy', centerBBox.y + centerBBox.height/2)
        .attr('fill', '#6C40E8')
        .attr('r', (centerBBox.height / 2 - 25)) // "25" is an arbitrary number
      }, 0);
    }
});

.c3-chart-arcs-gauge-max, 
.c3-chart-arcs-gauge-min,
.c3-chart-arcs-background{
  display: none;
  }

.c3-gauge-value {
  fill: white !important;
  font-family: "Lucida Console", Helvetica, sans-serif;
  font-size: 40px !important;
  transform: translateY(10px);
}

.c3-arc-data1 {
  stroke: transparent !important;
}

<link href="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="chart"></div>