Search code examples
javascripthtmlcsssvg

Calculating the percentage for a SVG pie chart

I know there are charting libraries out there but I wanted my hand at creating my own custom one.

I found some work from another person where he creates a pie chart from an array in javascript, except his is based off percentages.

I've been trying to rework it so that it:

  1. Takes your value from array
  2. Divide by total in array
  3. Use that percentage as area

As you can see when you run the below, it doesn't make a full circle based off the data unless you have the percentages pre-calculated.

My aim would be to replace all the percent: x with value: y so you could use the raw values:

const slices = [
  { value: 1024 },
  { value: 5684 },
  { value: 125  },
];

let sum = slices.reduce(function (a, b) {
  return a + b.value
}, 0);

Then in the loop, you'd be able to use slice.value / sum for the percentage of the pie. Only it doesn't seem to be working as the original percentage values.

// variables
const svgEl = document.querySelector('svg');
const slices = [
  { percent: 0.1, color: 'red' },
  { percent: 0.1, color: 'blue' },
  { percent: 0.1, color: 'green' },
];
let cumulativePercent = 0;

// coordinates
function getCoordinatesForPercent(percent) {
  const x = Math.cos(2 * Math.PI * percent);
  const y = Math.sin(2 * Math.PI * percent);
  return [x, y];
}

// loop
slices.forEach(slice => {
  // destructuring assignment sets the two variables at once
  const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
  
  // each slice starts where the last slice ended, so keep a cumulative percent
  cumulativePercent += slice.percent;
    
  const [endX, endY] = getCoordinatesForPercent(cumulativePercent);

  // if the slice is more than 50%, take the large arc (the long way around)
  const largeArcFlag = slice.percent > 0.5 ? 1 : 0;

    // create an array and join it just for code readability
  const pathData = [
    `M ${startX} ${startY}`, // Move
    `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
    `L 0 0`, // Line
  ].join(' ');

  // create a <path> and append it to the <svg> element
  const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  pathEl.setAttribute('d', pathData);
  pathEl.setAttribute('fill', slice.color);
  svgEl.appendChild(pathEl);
});
svg {
  height: 200px;
}
<svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg);fill:black;"></svg>

Solution

  • You don't have to calculate any percentage (unless you want the percentage value)

    Let SVG do the work with pathLength

    With slice values: blue:10 , gold:20 , red:30 that makes: pathLength="60"

    and you only have to calculate the stroke-dasharray gap (second value = 60 - value)
    and stroke-dashoffset accumulative value : 10 , 30 , 60

    To make the pie start at the top you rotate it -90deg (around the 50 50 center)

    More advanced use in: https://pie-meister.github.io

    <style>
  svg {
    width:180px;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <g transform="rotate(-90 50 50)">
  <path stroke-dasharray="10 50" stroke-dashoffset="10" stroke="blue" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
        
  <path stroke-dasharray="20 40" stroke-dashoffset="30" stroke="gold" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
        
  <path stroke-dasharray="30 30" stroke-dashoffset="60" stroke="red" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
 </g>
</svg>