Animation in Blazor Accumulation Chart Component

26 Jul 20233 minutes to read

You can customize animation for a series using Animation property. You can enable or disable animation of the series using Enable property. Duration specifies the duration of an animation and Delay allows us to start the animation at desire time.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
            <AccumulationChartAnimation Enable="false"></AccumulationChartAnimation>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>

</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Disable animation on programmatic refresh

You can programmatically refrsh chart using Refresh method. You can enable or disable animation by passing boolean parameter to Refresh method.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart @ref=accumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartSeriesCollection>
       <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
      </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
   <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>
<button  @onclick="ButtonClick">Click me</button>

@code{
    SfAccumulationChart accumulationChart;
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
    
    public void ButtonClick()
    {
      accumulationChart.Refresh(false);
    }         
}