Pie label text overlapped by pie-slice

[fstrauf]

Whenever the text label of a pie slice is too long, the neighboring slice overlays the label.

Is there a way to maintain something like a z-index?

Here is a minimum example:
https://codesandbox.io/s/visx-simple-pie-chart-forked-nez7p7?file=/Example.tsx

[williaster]

@fstrauf in svg, the rendering order is based on the document order and there is no concept of z-index.

couple approaches to fix it:

• render all slices first, then do another pass to render labels
  • in addition to this you can use the @visx/text <Text /> utility and specify a width so that the text wraps to a constrained space
• sort the slices so the smallest is on top (not guaranteed to work)