Pie chart radial labels overlap

[gindulis]

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.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[suchak1]

bump

[tclarkston]

bump

[RamblinGambler]

bump

[darron1217]

same issue here

[whirledsol]

bump

Found that using the arcLinkLabelsSkipAngle might be an easy workaround if the sectors are smaller than a provided θ

[Jovells]

bump @plouc

[dev-creata]

Hi @plouc Hi I'm trying to contribute to fix this Issue Can you point me to where I can find the function that computes the path? I found the compute.ts file but making edits to it has no effect on the render (I'm using the storybook)

[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?

[whirledsol]

@davidkim10 This is beautiful. Nice workaround.

[alex20044]

Would this be added to the npm package soon?

[cameneses]

bump

[aaronovz1]

buuuuump, can we get a release with this fix?

[brian-codes]

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

I've mentioned on #143, I attemepted at implementing @davidkim10 solution, the codebase seems to have diverged a lot since then, differrent files and variable names, I think this is the equivelant but not sure

https://gist.github.com/brian-codes/2263643770146553118a52d6bdf52528

If anyone has any thoughts we could get a PR together?

[papaibsow]

@plouc can you see this fix?

[Viktoriya-D]

can you please fix this issue without needing to modify a package. There should be a variable to control spacing between labels.

[codestafa]

bump

[mtusman]

bump! Please can we get this fixed.

[MartinHutyra]

Guys can you please get this fixed?

[plouc]

@MartinHutyra, sorry but there are higher priorities at the moment, but I'll try to look into it, or if someone wants to give it a shot, please do 😅

[brian-codes]

The maintainers don't owe anyone, @MartinHutyra and others feel free to raise a PR, I've gave boilerplate above.

[alienriquebm]

Hi dear developers, there is another workaround for this problem? Or any plan to fix it soon? Thanks a lot for all the hard work!

[josephselva21]

@plouc, Is this issue is Fixed because I'm Still facing this issue of overlapping. I'm not able to get the solution for it.

[plouc]

@josephselva21, no, that's why it's still open.

[josephselva21]

@plouc , Is there any alternate way too fix this? any temporary solution which could make it work ?

[plouc]

Apart from what have been suggested in this thread in the past (which might now be obsolete due to changes in the lib), no, it's a bit complex to nicely arrange the labels towards the end, and I didn't have the opportunity to research.