I currently need to create a chart as shown.

My Approach

Right now I followed the boilerplate code and created 3 donut charts inside 3 components. I plan to color each donut chart depending on my data maybe using a hook/prop change. With this approach I have the following output:

In this way I cannot remove the outer stroke on each arc.

Reading the d3 docs I think this is not the right approach to solve this problem.

• Is there a more 'd3' way of solving /creating this chart?
• If I'll continue my way of solving this, how can I remove the outer stroke?
• How can I make the outer arc labels?

Here is my code so far: Codesandbox