I am not sure if svg is supported in the print content version of PP but I am trying to create a pie chart with svg circles. I am setting the dasharay and dashoffset to a variable. My question: How can I get labels outside of the circle (in the middle of the dasharray).
I have four payment options that I need to display, so I need four labels being dynamic outside the pie chart.
<svg class=“donut” viewBox=“0 0 42 42” width=“100%” height=“100%” >
<circle class=“donut-hole” r=“15.91549430918954” cx=“21” cy=“21” fill=“Transparent”></circle>
<circle class=“donut-ring” r=“15.91549430918954” cx=“21” cy=“21” stroke-width=“5.1” fill=“transparent” stroke=“#d2d3d4”></circle>
‘<circle id=“arc1” class=“donut-segment” r=“15.91549430918954” cx=“21” cy=“21” stroke-dasharray="’ + p + ’ ’ + ptot + ’ " stroke-dashoffset=“’ + dashoffset + '” stroke-width=“4” fill=“transparent” stroke=“#00B4D2”></circle>’ +
</svg>
I am setting the label manually: ‘<div id=“label1” >PRINCIPAL<br>’ + formatter.currency(r.SXPRIN01) + ‘</div>’
query('#label1').attr('anchor','');
query('#label1').css('position','absolute');
query('#label1').css('left', "50px");
query('#label1').css('top', "20px");
