Calculating the percentage for a SVG pie chart

Question

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:

Takes your value from array
Divide by total in array
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  and append it to the

svg {
  height: 200px;
}

user_2520800 · Answer

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

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

user_10756489 · Answer

const slices = [{color: 'red', value: 10}, {color: 'blue', value: 20}, {color: 'green', value: 30}];

const valueSum = slices.reduce((sum, slice) => sum + slice.value, 0);

const pctSlices = slices.map(slice => ({...slice, percent: slice.value / valueSum}));

The pctSlices array will contain percent value for each slice

Calculating the percentage for a SVG pie chart

2 Answers