We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pie chart render data is wrong after update datasource in series

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.


3 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team November 2, 2022 01:01 AM

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


Marked as answer

TT Ton That Hung November 3, 2022 09:30 PM

It works for me.
Thanks for your solution.



SB Swetha Babu Syncfusion Team November 7, 2022 12:03 AM

Hi Ton,


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


Regards,

Swetha




Loader.
Live Chat Icon For mobile
Up arrow icon