Better label positioning on pie chart

main
Antonio De Lucreziis 2 years ago
parent 77043f731f
commit 618a2299dd

@ -66,16 +66,11 @@ export const PieChart = ({ parts, labels, total, totalLabel }) => {
g.lineTo(0, 0) g.lineTo(0, 0)
g.stroke() g.stroke()
const { width: w } = g.measureText(label)
const textRadius = Math.sqrt(w ** 2 + 16 ** 2) / 2
g.fillStyle = `hsl(${((hashCode(`${i} ${seed}`) % 0xff) * 360) / 0xff}, 80%, 15%)` g.fillStyle = `hsl(${((hashCode(`${i} ${seed}`) % 0xff) * 360) / 0xff}, 80%, 15%)`
g.fillText( g.fillText(
label, label,
Math.cos(acc + angle / 2 - 0.5 * Math.PI) * Math.cos(acc + angle / 2 - 0.5 * Math.PI) * (width * 0.5 * 0.9125),
(width * 0.5 * 0.85 + textRadius * 0.8), Math.sin(acc + angle / 2 - 0.5 * Math.PI) * (width * 0.5 * 0.9125)
Math.sin(acc + angle / 2 - 0.5 * Math.PI) *
(width * 0.5 * 0.85 + textRadius * 0.8)
) )
acc += angle acc += angle

Loading…
Cancel
Save