Pie chart radial labels overlap

To Reproduce Please see: https://codesandbox.io/s/nivopie-total-inside-donut-434-forked-eq1yi?file=/src/index.js

Expected behavior Radial labels should not overlap each other

Any way to make them not overlap? Using the radialLabelsSkipAngle is not an option they should be present at all times. All other options does not resolve the issue.

[aaronovz1]

buuuuump, can we get a release with this fix?

[davidkim10]

I wish I contributed my solution when I wrote it 2 years ago but I solved this issue by adjusting the computeRadialLabels function. By adjusting this function and using the padAngle prop I was able to fix the overlap.

Im trying to find the exact fix from a project I worked on 2 years ago but honestly cant recall my thought process at the time but i adjusted nivo-pie.esm.js. From the screenshot below I adjusted radial label offset and the radial length offset (position A and B).

// For the function computeRadialLabels I added the following:
const { angleDeg } = arc;
const absSin = Math.abs(Math.sin(angle));
const offsetReducer = angleDeg < 10 ? 1 : 2;
const baseOffset = radiansToDegrees(Math.asin(absSin)) / offsetReducer;
const linkDiagonalLengthOffset = baseOffset * absSin;

// radial label offset
var positionA = positionFromAngle(angle, radius);

// Position B = radial length (positionB.x, positionB.y)
var positionB = positionFromAngle(
  angle,
  radius + linkOffset + linkDiagonalLengthOffset + linkDiagonalLength
);

(nivo/pie v 0.61.1)

Related Issues: https://github.com/plouc/nivo/issues/143

View Updated nivo-pie.esm.js file

Hope this helps in anyway to those experiencing the same issue. If anyone has the bandwidth to properly commit this fix please do. Maybe @plouc , @wyze , or anyone else who maintains the package can take a look at the approach and refactor a better solution?