[FIXED] How do I add polylines to my simple svg donut chart? [NO LIBRARIES]

Issue

I want to build a simple svg donut chart, with labels and polylines connecting the sectors to the label text like this.

I know this is possible using d3.js like implemented here, but I am restricted to using a simple chart without any libraries.

This is the code I have now;

<div class="wrapper">
  <svg viewBox="0 0 42 42" preserveAspectRatio="xMidYMid meet" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <circle class="donut-segment" data-per="20" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#49A0CC" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="25"></circle>
    <circle class="donut-segment" data-per="30" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#254C66" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="75"></circle>   
   <!--   stroke-dashoffset formula:
     100 − All preceding segments’ total length + First segment’s offset = Current segment offset
   -->
  </svg>
</div>

Any tips on how to draw polylines and position them properly without overlap?

EDIT: I want to input dynamic data to the component so that it will draw the chart whenever the data is changed.

implementations in d3: impl1

Solution

My main doubt was calculating the points for the arcs that have to be drawn for a donut chart, which I then understood thanks to this amazing answer by enxaneta.

All I had to figure out was adding the third point for the polyline, if the text.xCoordinate was closer to either side of the svg, I moved it either left or right by a preset amount. I also had to split the labels into multiple <tspan>s as <text> elements would not break the long text and long labels would get clipped off by the SVG. It is also possible to append HTML within a <foreignObject> and position it correctly, to overcome the text wrapping issue.

Another option is to use <path> elements for generating arcs, but I am not sure how to calculate the centroid of each of the arcs.

Recommended reading:

• Medium article for <circle> donut chart kinda like enxaneta's answer, with the attributes explained.
• Codepen with another <circle> donut chart
• <path> donut chart as mentioned above, implemented beautifully by Mustapha.

Answered By - Steve Chacko

Answer Checked By - Marie Seifert (PHPFixing Admin)