# Animation

## Content



Almost all of the plot elements can be animated by using the built-in animation API. Using the built-in animation options simplifies creating various visual animation effects for the C1Chart control's plot elements. The properties contained in the PlotElementAnimation class are as follows:

| Property | Description |
| --- | --- |
| **IndexDelay** | An attached property that allows you to specify the animation delay depending on the element's point index. |
| Storyboard | Gets or sets the storyboard that is applied to the plot element. |
| SymbolStyle | Gets or sets the symbol style that is applied to the plot element before the storyboard starts. |

Animating the **C1Chart** control also involves the **ChartData.LoadAnimation**.

To set the animation effects using the built-in animation options, you can use the following XAML markup:

```xml
<c1chart:C1Chart Name="chart">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.LoadAnimation>
                        <!-- load animation -->
                        <c1chart:PlotElementAnimation>
                            <!-- initial style: invisible  -->
                            <c1chart:PlotElementAnimation.SymbolStyle>
                                <Style TargetType="c1chart:PlotElement">
                                    <Setter Property="Opacity" Value="0" />
                                </Style>
                            </c1chart:PlotElementAnimation.SymbolStyle>
                            <c1chart:PlotElementAnimation.Storyboard>
                                <Storyboard >
                                    <!-- display element with index delay -->
                                    <DoubleAnimation
                   Storyboard.TargetProperty="Opacity"
                   c1chart:PlotElementAnimation.IndexDelay="0.5"
                   To="1" Duration="0:0:1" />
                                </Storyboard>
                            </c1chart:PlotElementAnimation.Storyboard>
                        </c1chart:PlotElementAnimation>
                    </c1chart:ChartData.LoadAnimation>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
        </c1chart:C1Chart>
```

And then you can insert the following code directly beneath the **InitializeComponent()** method:

```csharp
var rnd = new Random();
            chart.MouseLeftButtonDown += (s, e) =>
            {
                chart.Data.Children.Clear();
                // create new data
                var vals = new double[rnd.Next(5, 10)];
                for (int i = 0; i < vals.Length; i++)
                    vals[i] = rnd.Next(0, 100);
                chart.Data.Children.Add(new DataSeries() { ValuesSource = vals });
            };
```

When you run your application, the data will load or re-load on mouse click, showing the animation effect that was set in the XAML markup.

## See Also

[Creating Custom Animations](/componentone/docs/wpf/online-chart/overview/ChartFeatures/Animation/Creating-Custom-Animations)