Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis.
Animations are disabled in the Ignite UI for Blazor Charts, but they can be enabled by setting the IsTransitionInEnabled property to true. From there, you can set the TransitionInDuration property to determine how long your animation should take to complete and the TransitionInMode to determine the type of animation that takes place.
Blazor Chart Animation Example
The following example depicts a Line Chart with an animation set to the default TransitionInMode - "Auto." The drop-down and slider at the top in this example will allow you to modify the TransitionInMode and TransitionInDuration, respectively, so that you can see what the different supported animations look like at different speeds.
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespaceInfragistics.Samples
{
publicclassEnergyRenewableInfo
{
publicstring Year { get; set; }
publicint Europe { get; set; }
publicint China { get; set; }
publicint USA { get; set; }
}
publicclassEnergyRenewableData : List<EnergyRenewableInfo>
{
publicEnergyRenewableData()
{
Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
}
}
}cs