Blazorise SVG Chart Animation

Animate SVG chart loading and data updates with C# and Blazor options.

SVG chart animation can be declared with SvgChartAnimation or configured with SvgChartOptions.Animation. Animation targets are grouped by SVG behavior, such as geometry and opacity, and each target can override timing, easing, and load/update behavior. Streaming animations remain configured separately with SvgChartStreamingOptions.Animation.

Examples

Declarative animation

Add SvgChartAnimation inside a chart to animate the first render and subsequent updates.
2 series, 5 categories.Animated revenueColumns animate on load and update020406080100120JanFebMarAprMayRevenueExpenses
<Div Flex="Flex.Row" Gap="Gap.Is2" Margin="Margin.Is3.FromBottom">
    <Button Color="Color.Primary" Clicked="@Randomize">Randomize</Button>
    <Button Color="Color.Light" Clicked="@Reset">Reset</Button>
</Div>

<SvgColumnChart TItem="MonthlyRevenue"
                Items="@revenue"
                Options="@options">
    <SvgChartAnimation Enabled
                       Duration="@TimeSpan.FromMilliseconds( 500 )"
                       Easing="SvgChartAnimationEasing.EaseOut"
                       Geometry="@geometryAnimation"
                       Opacity="@opacityAnimation" />
    <SvgChartTitle Title='@("Animated revenue")' Subtitle='@("Columns animate on load and update")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgColumnSeries Name="Revenue" Value="@( item => item.Revenue )" Color="Color.Primary" BorderRadius="4" />
    <SvgColumnSeries Name="Expenses" Value="@( item => item.Expenses )" Color="Color.Info" BorderRadius="4" />
</SvgColumnChart>

@code {
    private readonly Random random = new( 42 );

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly SvgChartGeometryAnimationOptions geometryAnimation = new()
    {
        Duration = TimeSpan.FromMilliseconds( 650 ),
        AnimatePosition = true,
        AnimateSize = true
    };

    private readonly SvgChartOpacityAnimationOptions opacityAnimation = new()
    {
        Duration = TimeSpan.FromMilliseconds( 800 ),
        Delay = TimeSpan.FromMilliseconds( 50 ),
        From = 0.1
    };

    private List<MonthlyRevenue> revenue = CreateRevenue();

    private void Randomize()
    {
        foreach ( var item in revenue )
        {
            item.Revenue = Math.Max( 30, item.Revenue + random.Next( -16, 17 ) );
            item.Expenses = Math.Max( 20, item.Expenses + random.Next( -12, 13 ) );
        }
    }

    private void Reset()
    {
        revenue = CreateRevenue();
    }

    private static List<MonthlyRevenue> CreateRevenue()
    {
        return
        [
            new() { Month = "Jan", Revenue = 68, Expenses = 42 },
            new() { Month = "Feb", Revenue = 74, Expenses = 46 },
            new() { Month = "Mar", Revenue = 91, Expenses = 52 },
            new() { Month = "Apr", Revenue = 86, Expenses = 49 },
            new() { Month = "May", Revenue = 103, Expenses = 61 },
        ];
    }

    private sealed class MonthlyRevenue
    {
        public string Month { get; set; }

        public double Revenue { get; set; }

        public double Expenses { get; set; }
    }
}

Options animation

Configure animation through SvgChartOptions.Animation when options are built in C#.
2 series, 6 categories.Traffic trendPath and point animation configured from options020406080100MonTueWedThuFriSatDesktopMobile
<Div Flex="Flex.Row" Gap="Gap.Is2" Margin="Margin.Is3.FromBottom">
    <Button Color="Color.Primary" Clicked="@Randomize">Randomize</Button>
    <Button Color="Color.Light" Clicked="@Reset">Reset</Button>
</Div>

<SvgLineChart TItem="TrafficSample"
              Items="@samples"
              Options="@options">
    <SvgChartTitle Title='@("Traffic trend")' Subtitle='@("Path and point animation configured from options")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Day )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="Desktop" Value="@( item => item.Desktop )" Color="Color.Primary" MarkerRadius="4" />
    <SvgLineSeries Name="Mobile" Value="@( item => item.Mobile )" Color="Color.Success" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly Random random = new( 11 );

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        Animation = new()
        {
            Enabled = true,
            Duration = TimeSpan.FromMilliseconds( 600 ),
            Easing = SvgChartAnimationEasing.EaseInOut,
            Geometry = new()
            {
                Duration = TimeSpan.FromMilliseconds( 450 ),
            },
            Opacity = new()
            {
                From = 0.15,
            },
            Path = new()
            {
                Enabled = true,
                Duration = TimeSpan.FromMilliseconds( 700 ),
            },
        },
    };

    private List<TrafficSample> samples = CreateSamples();

    private void Randomize()
    {
        foreach ( var sample in samples )
        {
            sample.Desktop = Math.Clamp( sample.Desktop + random.Next( -14, 15 ), 35, 95 );
            sample.Mobile = Math.Clamp( sample.Mobile + random.Next( -12, 13 ), 30, 90 );
        }
    }

    private void Reset()
    {
        samples = CreateSamples();
    }

    private static List<TrafficSample> CreateSamples()
    {
        return
        [
            new() { Day = "Mon", Desktop = 54, Mobile = 45 },
            new() { Day = "Tue", Desktop = 72, Mobile = 45 },
            new() { Day = "Wed", Desktop = 75, Mobile = 61 },
            new() { Day = "Thu", Desktop = 55, Mobile = 61 },
            new() { Day = "Fri", Desktop = 75, Mobile = 73 },
            new() { Day = "Sat", Desktop = 85, Mobile = 80 },
        ];
    }

    private sealed class TrafficSample
    {
        public string Day { get; set; }

        public double Desktop { get; set; }

        public double Mobile { get; set; }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page