No Animation when Chart DataSource is Updated

[Ricardo Martinez]

When I load the ChartSeries datasource on the OnInitializedAsync() method, the Series appears on the Chart with an animation.

Then, When I make changes the datasource ( creating a new source ), the data appears well and correctly but without the animation.

How can I update the ChartSeries AND show the animation?

<EjsChart>
                <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
                <ChartSeriesCollection>
                    <ChartSeries  DataSource="@lstItemsChart" XName="Hora" YName="Valor" Type="ChartSeriesType.Column">
                    </ChartSeries>
                </ChartSeriesCollection>
  </EjsChart>

<button @onclick="UpdateChart()">Update</button>

@code

{

public List<ItemChartDiaCanalHora> lstItemsChart { set; get; }

protected override async Task OnInitializedAsync()
{

       lstItemsChart = dal.GetChartData(1);

// The charts loads with animation OK.

 }

void UpdateChart()

{

      lstItemsChart = dal.GetChartData(1);

// The chart updates the data OK, but no animation.

}

}

[Srihari Muthukaruppan]

Hi Ricardo, 

 

We have analyzed your query. From that, we would like to let know that by default, the animation occurs only at initial rendering and it does not work while changing the datasource. To achieve your requirement, we suggest you to remove the series from chart and then add the series using “RemoveSeries()” and “Addseries()” method respectively. Based on that we have a sample for reference. Please find the sample below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartAnimation-734463826.zip  

 

Let us know, if you have any concerns. 

 

Regards 

Srihari M 

[Phil Holmes]

How does this work with current Blazor release, which doesn't use EjsChart, but rather SfChart, which doesn't seem to support adding or removing series???

[Durga Gopalakrishnan]

Hi Phil,

From version 18.1.42, we have changed the NuGet, Namespace and Component Name. Please check with below release notes for more information about breaking changes.

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/18.1.42?type=all#breaking-changes

We were able to add and remove series in latest version. We already have the documentation for adding or removing the chart series. Please check with the below sample and UG link.

Sample : https://blazorplayground.syncfusion.com/BNrpNStkzrjGsLiA

UG : https://blazor.syncfusion.com/documentation/chart/how-to/add-remove

Please let us know if you have any other concerns.

Regards,

Durga Gopalakrishnan.

[Thibaut ALEXANDRE]

Hi,

I'm trying to achive the same the same goal and it doesn't work with library Syncfusion.Blazor.Charts v28.1.39

I've added the animated part in your sample, and as you can see series are added without animation : 

Sample "Animated"

Only the first render is animated

[Durga Gopalakrishnan]

Thibaut,

By default, when a new series is added, only the series data gets updated, and the chart does not re-render. Animation is applied only when the chart is refreshed, as this triggers the chart to re-render with the updated properties. To achieve the desired behavior, we recommend calling the RefreshAsync method to apply animation to the newly added series. For your reference, we have provided a modified sample and a GIF illustrating this functionality.

<SfChart @ref="chartObj">

    <ChartSeriesCollection>

        @foreach (SeriesData series in SeriesCollection)

        {

            <ChartSeries XName[email protected] YName[email protected] DataSource[email protected]>

                <ChartSeriesAnimation Enable[email protected] Duration="1000" Delay="100"></ChartSeriesAnimation>

            </ChartSeries>

        }

    </ChartSeriesCollection>

</SfChart>

@code {

public void AddChartSeries()

{

     SeriesCollection.Add(new SeriesData

         {

             XName = nameof(LineChartData.XValue),

             YName = nameof(LineChartData.YValue),

             Data = GetChartData(),

             EnableAnimation = true // Enable animation for the new series

         });

 

     // Disable animation for the existing series

     foreach (var series in SeriesCollection.Take(SeriesCollection.Count - 1))

     {

         series.EnableAnimation = false;

     }

     chartObj.RefreshAsync();

}

}

Sample : https://blazorplayground.syncfusion.com/LNLeDshiVYMHTKmx

API Reference : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_RefreshAsync_System_Boolean_

Please let us know if you have any concerns.

[Thibaut ALEXANDRE]

Hi Durga,

I tried your solution and it works.

Thanks for your help !

[Durga Gopalakrishnan]

Thibaut,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.