Any way to add Pie Chart Beveling

[IUMvuyo]

So I'm currently working on a project where I need to create pie charts that dynamically takes data from a JSON array. My CEO wants the pie chart to have a 3D beveling effect, similar to what you might see in PowerPoint presentations. Any advice, guidance, or even alternative approaches would be greatly appreciated. Thank you in advance for your help!

I have added an image of the pie chart for reference

[plouc]

Nivo doesn't support this by default, and that's definitely not something I plan to add, it's subjective, but I'm not a big fan of such effects 😅. You might be able to achieve this by implementing a custom layer, but this would basically mean re-implementing the arc rendering, then you could use some SVG filters, as suggested in this SO thread for example, but it's probably a lot of work and you would have to figure out things by yourself.

On your screenshot, I also see that the arrangement of the links is quite custom, that's not something you'll be able to implement with the Pie chart either.

[IUMvuyo]

Thank you for replying so quickly 😅 didn't except a response for at least another week but I was dreading applying a custom layer but it seems I have no other choice but thank you again for the advice and response

[plouc]

You could start with the default Arcs layer implementation in @nivo/pie, then look at the ArcsLayer (@nivo/arcs), which accepts a custom arc component, and then you can take inspiration from ArcShape (@nivo/arcs) to build your own. But all this would become quite fragile, if the internal implementation changes in the future, then it would most likely break.

Good luck 💪🏻

[plouc]

Actually, it might be easier to add support for a custom arc component directly in @nivo/pie, @nivo/arcs already accepts one, so maybe you could give it a try.