Pie chart render data is wrong after update datasource in series

[Ton That Hung]

Hi Syncfusion Team,
I'm using AccumulationChartComponent ​to build a Pie chart, but I face the issue:

After I changed dataSource, the Pie chart rendered was wrong.

Sample: https://stackblitz.com/edit/react-cmsyce?file=index.js

Steps:
1 . Click the button to change dataSource.

2. Check data=> In new dataSource, we have only one record in the data source, but in the Pie chart UI, we have 6 records.

Expect: After clicking the button, the Pie chart is shown with only 1 record.

[Swetha Babu]

Hi Ton,

Greetings from Syncfusion.

We have modified the provided sample based on your requirement. We can set the dataSource of the Pie chart by using the reference of the component. Please find the below stackblitz link for the modified sample for your reference.

Sample link: https://stackblitz.com/edit/react-hbkezw?file=index.js

Code Snippet:

clickHandler() {

        const index = Math.round(Math.random() * (data1.length - 1));

        const newData = data1.map((item) => {

            const value = Math.round(Math.random() * 100);

            return { ...item, y: value };

        });

        this.pie.series[0].dataSource = [newData[index]];

    }

Screenshot:

Initial Rendering:

After clicking on button:

Kindly, revert us if you have any concerns.

Regards,

Swetha

[Ton That Hung]

It works for me.
Thanks for your solution.

[Swetha Babu]

Hi Ton,

Your’e welcome, we are glad that the solution works for you.

Regards,

Swetha