[charts] How do I create a draggable Pie Chart?

[ChristianRaoulis]

The problem in depth

I'm currently trying to move from AntD to MUI Components in my Web App.

In that Web App I've managed to create a draggable Pie Chart using AntDs Graph Lib but since I'm planning to remove all AntD components from my Web App I was wondering if MUI-X Charts allows me to create something similar to the above linked pie chart.

Is something like that possible with MUI-X Charts? And if it is, how would I do something like that?

Your environment

No response

Search keywords: Pie Chart
Order ID: 85157

[JCQuintas]

Hi @ChristianRaoulis, would it be possible to provide some example of your current working code using AntD? Please provide it in an environment like stackblitz/codesandbox so we can give a better answer.

[ChristianRaoulis]

Hi @ChristianRaoulis, would it be possible to provide some example of your current working code using AntD? Please provide it in an environment like stackblitz/codesandbox so we can give a better answer.

Hi @JCQuintas,

Building a stackblitz/codesandbox might take a bit but here is an example in plain js: https://jsfiddle.net/rm9tLqw6/

[JCQuintas]

As I understand, that is not using AntDs Graph Lib nor react, but a custom canvas drawing algorithm, is that correct?

[ChristianRaoulis]

As I understand, that is not using AntDs Graph Lib nor react, but a custom canvas drawing algorithm, is that correct?

Yes. It takes a bit for me to remove the personal Information from my AntD Version but the example above in pure javascript works just as good.

:EDIT

Here is the AntD Version: https://stackblitz.com/edit/vitejs-vite-wk2ysv?file=src%2FPieChart.tsx

[alexfauquette]

It's technically feasible. But somewhat hard.

Here is a quick demo. The global idea is to control the data and create a subcomponent that based on those data will allow mouse interaction

The last slice requires modifying the startAngle too. Plus some edge cases I did not look into.

https://stackblitz.com/edit/react-kipqzp?file=Demo.tsx

If you are interested in this solution we will need to export more internals, because the SeriesContext and
SvgContext are not supposed to be exported

[ChristianRaoulis]

That demo does exactly what I was looking for. I would love to use it in my project 😄

Is there a chance that the required exports come in an update soon? Or should I use packet patches for now until the SeriesContext and SvgContext are accessible?

[alexfauquette]

Those utils should be available with #12744

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ChristianRaoulis: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.