Animations

LiveCharts smoothly animates any change automatically, we have dedicated a lot of hours building a small (and enough) framework that helps the library to animate any visual inside a chart naturally, you can customize the EasingCurve and the AnimationsSpeed of any element in our library.

Zooming and panning

The following image shows how animations behave when a user uses zooming or panning features, notice how both axes labels show and hide naturally, as the range of the axes change.

Real time

In the next gif image we are only adding and removing elements from an ObservableCollection instance, and that is all we need to build an intuitive and interactive interface for the user.

Delayed

You can also build delayed animations:

Dynamic series visibility

Charts will animate when anything changes, in this case we are toggling the Series.IsVisible property:

Natural animations everywhere

All the charts have beautiful and ready to go animations.

Animations Speed

You can control how fast animations run using the AnimationsSpeed property of any chart, this property is of type TimeSpan, in our experience, 1 second is a slow animation and 100 milliseconds is a fast animation.

All the charts have the AnimationsSpeed property, every Series and Axis inside a chart will follow this speed. But notice Series and Axis also have the AnimationsSpeed property, you can override the speed of a given series or axis using this property at the Series or Axis level, both of these properties are null by default, and it means that both will use the speed specified at the chart level.

Xaml already provider an easy way to write the TimeSpan type directly in your view, using the following format hh:mm:ss where hh is hours, mm minutes and ss seconds, notice you can use decimals to specify milliseconds in the seconds.

<!-- this chart takes 100 milliseconds to animate -->
<lvc:CartesianChart
        Series="{Binding Series}"
        AnimationsSpeed="00:00:00.100">

<!-- this chart takes 500 milliseconds to animate -->
<lvc:CartesianChart
        Series="{Binding Series}"
        AnimationsSpeed="00:00:00.500">

<!-- this chart takes 1 second to animate -->
<lvc:CartesianChart
        Series="{Binding Series}"
        AnimationsSpeed="00:00:01">

Disable animations

Settings the EasingFunction to null disables animations.

<lvc:CartesianChart
    EasingFunction="{x:Null}"> <!-- mark -->
</lvc:CartesianChart>

EasingFunction property

Easing curves are lines that define the acceleration pattern on graphics animations, here you can learn more about easing curves.

All the charts have the EasingFunction property, every Series and Axis inside a chart will follow this curve. But notice Series and Axis also have the EasingFunction property, you can override the curve of a given series or axis using this property at the Series or Axis level, both of these properties are null by default, and it means that both will use the function specified at the chart level.

The library already provides many common easing curves, you can make the chart bounce or follow any custom easing curve, the next sample creates a chart that will follow the BounceOut curve:

<Window x:Class="MyApp"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
        xmlns:vms="using:ViewModelsSamples.Bars.Basic"
        xmlns:lvcore="using:LiveChartsCore">

    <Window.DataContext>
        <vms:ViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <lvc:CartesianChart
            Series="{Binding Series}"
            EasingFunction="{Binding Source={x:Static lvcore:EasingFunctions.BounceOut}}">>
        </lvc:CartesianChart>

        <!--
        Or follow the EaseOut curve
        <lvc:CartesianChart
            Series="{Binding Series}"
            EasingFunction="{Binding Source={x:Static lvcore:EasingFunctions.EaseOut}}">
        </lvc:CartesianChart>
        -->
    </Grid>
</Window>

The library already provides multiple easing curves at the LiveChartsCore.EasingFunctions static class, this class also contains many builders to generate your custom easing curves, or you can just build your own.

var cartesianChart = new CartesianChart
{
    Series = new ISeries[] { new LineSeries<int> { Values = new[] { 2, 5, 4 } } },

    // the EasingFunction property is of type Func<float, float>
    // this means that you can pass any function.
    // these functions take the time of the animation as parameter in percentage (from 0 to 1),
    // and returns the progress of the animation in percentage also (from 0 to 1).
    EasingFunction = (time) =>
    {
        var progress = time * time; // quadratic curve

        // here are some examples to define your own curves:

        // a linear transition would be defined as follows:
        // var progress = time;

        // to use a sin out transition you could:
        // var progress = (float)Math.Sin(time * Math.PI / 2d);

        return progress;
    },

    // Or you can use the builders we provide
    // The builders LiveCharts provides are based on d3-ease library
    // you can learn more about these curves at:
    // https://github.com/d3/d3-ease
    // EasingFunction = LiveChartsCore.EasingFunctions.BuildCustomElasticOut(1.5f, 0.60f),
};

UpdaterThrottler property

All the charts have the UpdaterThrottler property, it is of type TimeSpan, it is useful to control the frequency at which the chart is drawn.

Lets build an example to explain when this property is useful:

public class ViewModel
{
    private int index = 0;
    private Random random = new Random();
    private ObservableCollection<ObservablePoint> observableValues;

    public ViewModel()
    {
        observableValues = new ObservableCollection<ObservablePoint>();

        Series = new ObservableCollection<ISeries>
        {
            new ColumnSeries<ObservablePoint> { Values = observableValues }
        };
    }

    public ObservableCollection<ISeries> Series { get; set; }

    public void AddRandomItem()
    {
        var randomValue = random.Next(1, 10);
        observableValues.Add(new ObservablePoint(index++, randomValue));
    }

    public void RemoveFirstItem()
    {
        observableValues.RemoveAt(0);
    }
}

Now imagine the case where you are adding a new point every 50 milliseconds, for that when our application starts we are calling the following code:

// where vm is an instance of the previous ViewModel class.

while (true)
{
    vm.RemoveFirstItem();
    vm.AddRandomItem();
    await Task.Delay(50);
}

Finally our chart view:

<lvc:CartesianChart
    Grid.Row="1"
    Series="{Binding Series}"
    AnimationsSpeed="00:00:00.300">

You can see the full sample at the samples folder then browse for [*your platform*] > Bars > AutoUpdate, but If you run that you will get something similar to the following image:

The chart is constantly drawing as your data changes, this makes it hard for a human eye to read the chart, using the UpdaterThrottler property we can let the chart know a speed where the user interface will be updated, this will make the chart easier to read. the data will keep changing every 50ms but now, LiveCharts will process the changes only once every time the UpdaterThrottler interval elapses, in this case every 500ms.

<lvc:CartesianChart
    Grid.Row="1"
    Series="{Binding Series}"
    UpdaterThrottler="00:00:00.500"
    AnimationsSpeed="00:00:00.300">

Now we can read the chart easier, notice you can also play with the animations speed property to get a better result according to your case.