1. Home
  2. Forum
  3. Blazor
  4. SfAccumulationChart pie chart doesn't refresh or disappears

SfAccumulationChart pie chart doesn't refresh or disappears

With 19.1.0.67 in a Blazor WebAssembly app, I have a relatively simple pie chart:

<SfAccumulationChart @ref="ReachabilityChart" Width="300">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@ReachabilityData"
                                 XName="Category" YName="Value" PointColorMapping="Color" />
    </AccumulationChartSeriesCollection>

    <AccumulationChartTooltipSettings Enable="true" />
</SfAccumulationChart>

@foreach (var item in ReachabilityData) // this is for debug purposes; _this_ output updates immediately; the chart does not
{
    <p>@item.Category, @item.Value</p>
}

@code {
    public class ChartData
    {
        public string Category { get; set; }
        public double Value { get; set; }

        public string? Color { get; set; }
    }

    public Dictionary<string, List<ChartData>> DummyTemperatureData = new();

    public List<ChartData> ReachabilityData = new();
}

The chart data can be modified from elsewhere. At the end of that method, I call `StateHasChanged();`. This has no effect on the chart.

I've tried calling `ReachabilityChart.Refresh();` after `StateHasChanged()` (maybe I'm supposed to do it _before_?). However,

* sometimes, it will re-animate the chart, but using the _previous_ version of the data
* sometimes, the legend will update, but the chart itself will disappear

8 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team June 15, 2021 10:54 AM UTC

Hi Soeren, 

We have tested the reported scenario by changing the data source on button click and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the mentioned version 19.1.67 and latest version 19.1.69 of the chart. Please find the sample used for testing and screenshot for your reference. 
 
Screenshot: 
Before Click: 
 
 
After Click: 
 
 
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner. 
 
    1. Try to reproduce the reported scenario in the provided sample.
    2. Share more details if you have done any other customization in your project.
 
Regards, 
Srihari M 


SK Soeren Kuklau June 16, 2021 09:49 AM UTC

Hey,

thanks for the quick response. Your sample made me figure out a workaround, but I still think there's a bug here: calling `Clear()` on the collection bound to `DataSource` isn't enough; you have to call `new()` as well — even if I explicitly call `Refresh()` on the chart.

I'm attaching a modified `Index.razor` of your sample. I've written comments for the three things I changed: there's some HTML output to compare the chart against the raw data, I'm removing the call to `new()`, and finally, the new PieData each has a random amount of users so every click results in a new set of data.

There's also two screenshots showing that the chart doesn't match the underlying data. My testing suggests it always matches the previous state.

If you run this as submitted, you should be able to reproduce.

If you then comment the line `PieChartPoints = new();` back in, the chart updates correctly. However, I think that makes the `Refresh()` method kinda pointless.

Attachment: syncfusion166366_da78e1ba.zip

SK Soeren Kuklau June 16, 2021 11:16 AM UTC

(Also, calling `new()` on the data seems to break animation — even with `EnableAnimation="true"`, the chart no longer animates.)

SM Srihari Muthukaruppan Syncfusion Team June 17, 2021 12:57 PM UTC

Hi Soeren, 
 
Please find the response for the queries below. 
 
Query #1: If you then comment the line `PieChartPoints = new();` back in, the chart updates correctly. However, I think that makes the `Refresh()` method kinda pointless. 
 
Sorry for the inconvenience. We have modified the sample for your reference in which we can directly provide the data source as shown in the below code snippet to achieve your requirement. Please find the sample, code snippet and screenshot for your reference. 
 
 
Code Snippet: 
// add your additional code here 
 
private void LoadPoints() 
    { 
        var random = new Random(); 
        PieChartPoints = new List<PieData> 
        { 
            new PieData { Browser = "Chrome", Users = random.Next(1, 100) }, 
            new PieData { Browser = "UC Browse", Users = random.Next(1, 100) }, 
            new PieData { Browser = "iPhone",  Users = random.Next(1, 100) }, 
            new PieData { Browser = "Others", Users = random.Next(1, 100) }, 
            new PieData { Browser = "Opera", Users = random.Next(1, 100) }, 
            new PieData { Browser = "Android", Users = random.Next(1, 100) } 
        }; 
        StateHasChanged(); 
    } 
 
// add your additional code here 
 
 
Screenshot: 
Before Click: 
 
After Click: 
 
 
Query #2: Also, calling `new()` on the data seems to break animation — even with `EnableAnimation="true"`, the chart no longer animates 
 
As of now we don’t have support to animate series on data change. Hence can you please share the use case scenario for your requirement which will be helpful for further analysis and provide you solution sooner.  
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Marked as answer
SK Soeren Kuklau June 17, 2021 01:04 PM UTC

Hi,

As of now we don’t have support to animate series on data change. Hence can you please share the use case scenario for your requirement which will be helpful for further analysis and provide you solution sooner.  

in my Blazor app, I have a bunch of global settings, including filters. Those filters affect the data sources of various components, such as tables and charts.

For example, with your example, there would be two checkboxes:

[x] desktop browsers
[x] mobile browsers

Clicking either of those checkboxes then updates everything to match those filters. So if I disable [ ] mobile browsers, Android and iPhone no longer show up in the pie chart.

This works with your given workaround, but ideally, what I would like is for the chart to animate and show that change: the desktop browser slices of the pie should gradually become larger, and the mobile browser slices should gradually disappear.

And I imagine this can only work properly if I don't assign an entirely new list of data, but rather modify the existing list, then call `Refresh()`, and your chart control compares the changes.

SM Srihari Muthukaruppan Syncfusion Team June 18, 2021 10:33 AM UTC

Hi Soeren, 
  
Based on your request. We have considered the reported scenario as an improvement and logged a feature request for this. This feature will be available in any of our releases. We appreciate your patience until then. You can keep track of the feature request from the feedback portal below.  
  
   
The provided feedback link is private, and you need to login to view this feedback.  
   
If you have any more specifications/precise replication procedures or a scenario to be tested, you can add it as a comment in the portal.  
  
Regards, 
Srihari M 


SD Steve DeLollis June 3, 2023 03:44 AM UTC


This is still a problem. I'm on Syncfusion.Blazor.Charts 21.2.8


SfAccumulationChart does not refresh when the data changes even with a .Clear(), except, weirdly, it refreshes  in a delayed manner w/the previous data set displaying after updating the data source w/the current data set; i.e., it will keep refreshing but with the previous data set, again, strange.


I  also tried a .Refresh() along w/StateHasChanged() but no success, and I tried for a while.


Soeren's workaround does work; i.e., new() the data source.


ChartAllocations2 = new List<ChartAllocation2>();    // This works

// ChartAllocations2.Clear();    // w/subsequent population       // This does not re-render as expected.



GV Gopalakrishnan Veeraraghavan Syncfusion Team June 5, 2023 04:35 PM UTC

Hi Steve,


We have analyzed your query. we checked the accumulation chart refresh issue. Unfortunately, we are unable to reproduce the reported issue. We have attached a sample and vidoe for your reference.  Please find below sample which is used by testing.


Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/PieRefresh-1529765615.zip


Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PIEREF~1-79248166.zip


Since we are not aware of your exact problem. So Please share the following information which will be more helpful for further analysis and provide you the solution sooner.


  • Share your data source file.


  • Try to reproduce the reported scenario in the above sample.


  • Please share your sample (or) code snippet with full configurations.


  • Share the details if you have done any other customization in your sample.



Regards,

Gopalakrishnan Veeraraghavan


Loader.
Up arrow icon