Nivo: feature request: fix overlapping pie radial labels

[knackjax]

if the pie is drawn with a bunch of slices that are small, the result is the radial labels are all overlapping as shown in this example

https://www.webpackbin.com/bins/-KylBOM-OLUpXZ8zOhY-

is there a way to fix this? I was thinking maybe varying the horizontal and diagonal lengths between slices might work...

thanks

[DaveyEdwards]

Did you ever come up with a solution to this? Ive just started noticing this and going to try a couple hack fixes. Your url is broken now so here is a image of the issue for others to see (It gets worse the more small % valued parts there are)

[knackjax]

Yes I went in and modified the PieRadialLabels js with an offset variable that gives greater numbers if the height calculated by sin(angle) is a large value.

It is pretty hacky so I didn't bother to contribute back.

linkBase = 5 and linkExponent = 2 seem to work best for my usage but you might have to tweak for your own use

            {data.filter(d => skipAngle === 0 || d.angleDegrees > skipAngle).map((d,i) => {
                const angle = midAngle(d) - Math.PI / 2

                const offset = Math.pow(linkBase, Math.abs(Math.sin(angle)) * linkExponent)

                const positionA = positionFromAngle(angle, radius + linkOffset)
                const positionB = positionFromAngle(
                    angle,
                    radius + linkOffset + linkDiagonalLength + offset
                )
                let positionC
                let labelPosition
                let textAnchor
                if (angle + Math.PI / 2 < Math.PI) {
                    positionC = { x: positionB.x + linkHorizontalLength + offset, y: positionB.y }
                    labelPosition = {
                        x: positionB.x + linkHorizontalLength + textXOffset + offset,
                        y: positionB.y,
                    }
                    textAnchor = 'start'
                } else {
                    positionC = { x: positionB.x - linkHorizontalLength - offset, y: positionB.y }
                    labelPosition = {
                        x: positionB.x - linkHorizontalLength - textXOffset - offset,
                        y: positionB.y,
                    }
                    textAnchor = 'end'
                }

[DaveyEdwards]

O wow thanks for the feedback, that is a interesting way to do it. Something like that could be a good thing to be built in

[plouc]

@knackjax nice trick!

[plouc]

not that hacky :)

[SuttJ]

What did you mean by "modified PieRadialLabels js"? I was unable to find that file in @nivo/pie

How would one go about adding this snippet of code to the node_module? I've had no luck trying to use npm link/yarn link to edit locally or finding where exactly to put that code

[SuttJ]

@knackjax @plouc Or how would I be able to override the computeRadialLabels() function in nivo-pie.js ?

Is there a way to extend the ResponsivePie component and alter the computeRadialLabels() function so I can include that offset hack?

[Swoodend]

Any update on this in terms of a more built in fix?

[littlecastrum]

@knackjax would you be willing to give a bit more details on your solution?

[sibelius]

I need something similar to RadarChart as well

[dkim-thomas]

@plouc @knackjax

Just wanted to circle back on the implementation provided by @knackjax. Has this solution been implemented into Nivo? Is there a way to add this workaround without altering the core files?

@knackjax would you be able to provide more info on your solution? Seems like there multiple ppl that would like to implement your fix but require a bit more info.

[SuttJ]

@dkim-thomas @littlecastrum @Swoodend

The way I ended up solving this was locally copying the entire nivo-pie.js file and importing from that rather than the dependency.

In this local file, I rewrote the computeRadialLabels function. That's what determines the label positions and can handle the overlap.

If anyone is interested, here is the entire file with that modified function (beginning at line 464)

Important to note that this was from a while ago

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

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[vdh]

Oh FFS, stale bot sucks… closing a huge defect in the pie labels out of the blue like this 😞

[plouc]

@vdh please be polite, also if you think that's a "huge defect", contributions are welcome :) automatic label placement in general is quite challenging and this simplistic approach is not uncommon.

Stale bot is actually pretty useful for maintainers to see how important an issue is for users, we cannot cope with every feature request unfortunately.

[vdh]

@plouc Apologies for my rude outburst, but Stale bot is quite an unfriendly bot. It's nastiness wrapped in a layer of saccharine.

It's one thing to _say_ contributions are welcome, but the behaviour of Stale makes for an extremely _unwelcoming_ context. It's designed to shut down and suppress issues. It requires users to write unhelpful "+1" noise comments just to shoo it away, which completely defeats the purpose of the reactions that GitHub added for the purpose of reducing noise. It feels dirty, purposefully writing noise comments (that will bother _every_ person subscribed to the issue!) just to keep the reaper bot temporarily at bay. Recreating issues causes more noise (intentionally duplicating issues, making them ripe for "closed for being a duplicate" actioning), and loses the discussion thread from the initial issue.

Stale bot creates a constant, negative pressure to dedicate lots of time and emotional energy to keep issues alive, which is enough of a disincentive to drive earnest discussion and contributors away. I completely understand that there is often never enough time and resources to dedicate towards issues, but this bot is very unwelcoming and discourages contributions.