title: svg pie chart with pure JS (no framework)
body: <p>I'm trying to code an svg pie chart using pure javascript and svg circle elements. I'm using the <code>stroke-dasharray</code> attribute to display the pie slices proportionally to the values stored in my array :</p>
  
  <pre><code>var percentList = [50, 35, 15];
  </code></pre>
  
  <p>This first step is working fine, but then I'm stuck trying to calculate the rotation angle of each slice according to their percent value to prevent mutual overlaying. Here is a picture reproducing the problem :</p>
  
  <p><a href="https://i.stack.imgur.com/eoEcJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eoEcJ.png" alt="enter image description here"></a></p>
  
  <p>Fiddle : <a href="https://jsfiddle.net/Lau1989/r3v3Lkqb/3/" rel="nofollow noreferrer">https://jsfiddle.net/Lau1989/r3v3Lkqb/3/</a></p>
  
  <p>One can see the green slice of the right pie is partially overlaying the blue one so it appears smaller than 50%, even though it really represents 50% of the pie. (comment/uncomment the green and yellow slices to check).</p>
  
  <p>I know the problem comes from the <code>for</code> loop i'm using to calculate the rotation angle of each slice, but everything I tried so far didn't work and I came to the point where I can't think of any other solution.</p>
  
  <pre><code>for (var c = 0; c &lt; circle_pies.length; c++) {
    sum += percentList[c]; 
    var angle = sum /100 * 360;
    svg_pies[c].style.transform = 'rotate('+(-90+angle)+'deg)';
  }
  </code></pre>
  
  <p>My latest try was to add a decrementing for loop to keep track of all previous percent values for each slice, but it just made my problem harder to solve :
  <a href="https://jsfiddle.net/Lau1989/wkbLbnac/" rel="nofollow noreferrer">https://jsfiddle.net/Lau1989/wkbLbnac/</a></p>
  
  <p>How should I adapt my code to get the right rotation angles ?</p>
  
  <p>Please tell me if you think a different approach (e.g. using paths) would give a better cross-browser/good performance solution, but whatever solution I end up using I'm really dying to know what is wrong with my current code.</p>