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

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>