Concentric arcs in C3.js <p>I am trying to implement concentric arcs in a donut chart in C3.js. So far I have created the donut chart and now would like to add another arc inside the donut that represents the % of three pointers made by a basketball player. </p> <p>I am having trouble finding any examples of this with C3.js.</p> <p>Here is what the chart looks like: <a href="http://i.stack.imgur.com/ZV4LB.png" rel="nofollow">Donut Chart</a></p> <p>And I want to add another arc that is 15px in size and covers the percentage of three pointers made. Here is the code that I have so far.</p> <pre><code>var chart = c3.generate({ data: { columns: [ ['Shots', 50], ['Threes', 50] ], type: 'donut', colors: { Shots: '#ff0000', Threes: '#E8E8EE' } }, donut: { expand: false, label: { show: false, format: function(value, ratio) { console.log("value: " + value) return value; } }, width: 15 }, legend: { hide: true }, tooltip: { show: false } }); d3.select(".c3-chart-arcs-title") .append("tspan") .attr("dy", -20) .attr("x", 0) .text("Year: 5"); d3.select(".c3-chart-arcs-title") .append("tspan") .attr("dy", 16) .attr("x", 0) .text("50% Shots Made"); d3.select(".c3-chart-arcs-title") .append("tspan") .attr("dy", 16) .attr("x", 0) .text("25% 3ptrs Made"); </code></pre>