0
370
ViewsHow do I add polylines to my simple svg donut chart? [NO LIBRARIES]
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
1 answers
Answer question0
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.