How can pie charts implement such labels as follows?

[saint3347]

[saint3347]

This variation of a donut chart demonstrates how to add labels with lines.

[williaster]

Hey @saint3347 thanks for checking out visx! Sorry for the delayed response (holidays 🎁 )

I've not seen this approach for labels implemented yet with visx (if anyone has examples I'd love to see them!). You get part of the way there with @visx/annotations, see this modified https://airbnb.io/visx/pies codesandbox. One note is that the Connector component currently creates a 45° angle from the reference point, whereas your example has lines which are perpendicular to the tangent of the acs. We'd need to update Connector to allow override of the middle point in order to match exactly.

The trickiest part is the positioning of the labels so they don't overlap, your example is using some algorithm to do that, whereas my example doesn't render a label if the arc size is too small. If you end up implementing it, consider contributing it back to visx as I'm sure others would love to leverage it and I would happily review a PR!

[techniq]

A few d3 examples that look to be implemented similarly to @saint3347's example:

• https://observablehq.com/@stefanreifenberg/donut-chart-from-the-d3-js-graph-gallery
• https://observablehq.com/@mingzhaolin/build-pie-chart-ct-books
• http://bl.ocks.org/dbuezas/9572040