Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.label {
position: absolute;
text-align: center;
font-family: Arial;
font-size: 12px;
color: #222222;
}
.label > span {
font-size: 28px;
font-weight: bold;
font-family: TimesNewRomanPS-BoldMT;
}
</style>
</head>
<body>
<script>
var width = 500,
height = 300,
innerRadius = 80,
outerRadius = 100,
radius = outerRadius + 25;
var data = [
{ value: 12, label: "EJ PÅBÖRJADE", color: "#f0f0f0", sufix:'%' },
{ value: 22, label: 'GENOMFÖRDA', color: "#6f808c", sufix:'%' },
{ value: 66, label: 'EJ GENOMFÖRDA', color: "#f18163", sufix:'%' },
];
var pie = d3.pie()
.value(function(d) { return d.value; })
.sort(null);
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(d => d.startAngle)
.endAngle(d => d.endAngle);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var slice = svg.append("g")
.attr("transform", "translate(" + width/2 + "," + height / 2 + ")")
.attr("class", "field")
.selectAll(".slice")
.data(pie(data))
.enter()
.append("g")
.classed("slice", true)
slice
.append("path")
.attr("class", "slice path path--background")
.attr("d", arc )
.style("fill", d => d.data.color || '#a0a0a0');
slice.each(function(d) {
if(d.data.label) {
const label = d3.select("body").append("div");
label.html(`<span>${d.value}${d.data.sufix || ''}</span><br/>${d.data.label}`);
label.attr("class", "label");
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x*x + y*y);
const labelBcr = label.node().getBoundingClientRect()
const compensateX = (d.endAngle + d.startAngle)/2 < Math.PI
? 0
: -labelBcr.width;
const compensateY = -labelBcr.height/2;
label.attr("style", `top:${height/2 + y/h * radius + compensateY}px; left:${width/2 + x/h * radius + compensateX}px`);
}
});
</script>
</body>
https://d3js.org/d3.v4.min.js