I'm using a d3 donut chart for a project and I'm having issues centering the text inside the donut. I found a piece of code that I have modifying, but frankly I don't understand it much.
I have added the text in the center, but it's not quite centered. Is there anyone that could help me center it? I tried adding 'margin-top' to bring it down but that doesn't work, nor do a lot of css things I tried.
Here's the specific part that attaches the text:
svg.append("text")
.attr({
"text-anchor": "middle",
}).style({'fill': 'red', 'font-size': '18px'}).text(calories);
};
Codepen: http://codepen.io/anon/pen/xwwBBm
You may have noticed that two labels outside the circle are vertically centered, but the one in the middle is not.
It is missing following line:
.attr('dy', '0.35em')
This is the new codepen.
I will leave to you to discover why is that line magical.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With