Why do the slices of my diy svg-path pie chart not converge in the middle?

I tried to create a dynamic pie-chart with angular and the svg path element.

I succeeded in principle, but it seems that the individual slices do not properly converge in the center. The effect gets worse when one chooses a bigger stroke-width but even with no stroke-width it is still noticeable.

Why is that the case and how can I solve it?

Run it on stackblitz

import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

@Component({
selector: 'app-root',
template: `
<div style="background-color: #dddddd; width: 1000px; height: 1000px;">
<svg viewBox="-5 -5 105 105">
<g transform="translate(50, 50)">
@for( p of paths; track $index ){
<path stroke-width="1" stroke="black" [attr.fill]="colors[$index]" [attr.d]="p"></path>
}
</g>
</svg>
</div>
`,
})
export class Playground {
paths : string[] = [];
colors : string[] = [];


constructor(){
const d = 4; // decimal places
const angles = [0, 1, 2, 2.4, 4, 5, 2*Math.PI];
const n = angles.length;
const r = 25;
for( let i = 0; i < n-1; ++i ){
this.colors.push(this.getRandomColor())
const a0 = angles;
const a1 = angles[i+1];
const dA = (a1 - a0)/Math.PI * 180;

const x0 = r * Math.cos(a0);
const y0 = -r * Math.sin(a0);
const x1 = r * Math.cos(a1);
const y1 = -r * Math.sin(a1);

const largeAngle = dA < 180 ? 0 : 1;

const path = `
M 0 0
L ${x0.toFixed(d)} ${y0.toFixed(d)}
A ${r.toFixed(d)} ${r.toFixed(d)} -${dA.toFixed(d)} ${largeAngle} 0 ${x1.toFixed(4)} ${y1.toFixed(4)}
L 0 0 z`;

console.log(path);

this.paths.push(path);
}
}

private getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

}

bootstrapApplication(Playground);





Continue reading...