Folded donut chart in c3.js

Question

I would like to customize the donut chart from c3.js so that it has 2 layers.

This is the code for the simplest box-based c3.js donut chart.

var chart = c3.generate({ data: { columns: [ ['bulls', 30], ['lakers', 50], ], type : 'donut' }, }); 

This is an image of something similar to what I want to achieve:

I found this fiddle , but I'm not sure how to implement it in c3.js. Here is the link to my fiddle .

Answer 1

Scenario D3 actually creates three diagrams, each with a different radius. Each data set uses "d3.pie" to create an arc in which each part of the data will be stored, and then the graph is drawn along a path with a radius that differs and increases based on which data set is plotted (i = 1 ... 4 )

Take a different path: the D3 script draws several separate graphs at the same central point, so it just looks like they are connected.

I did not work directly with C3.js, but you could do something similar to this by creating two charts using the same center point with different radii and widths for each nested chart. (Essentially, one inside the other) The origin coordinate should be the same so that the percentage matches what they should look like your screenshot.

Not sure if there is a method for setting the central coordinate, but you should be able to fully position your DIVs in one place on the page, which may work.

However, I could recommend abandoning C3.js and instead use the existing script and D3 library, and then draw tags / add interactivity as needed, as it seems a bit simpler and will improve the customization options for your use case in the future. You can also consider using a library such as NVD3.js, which provides access to the main d3 methods along with their diagrams, so you can use the code from both the sample donuts and the D3 Fiddle.