How to: Animate Series Points in a 2D Chart

• Jun 07, 2019

The following example demonstrates how to animate a chart’s series points.

To accomplish this, assign an animation effect to the PointAnimation property of a series object whose points you would like to animate (e.g., to the BarSeries2DBase.PointAnimation property).

View Example

MainWindow.xaml

<Window x:Class="SeriesPointsAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:RadarDiagram2D>
                    <dxc:RadarPointSeries2D>
                        <dxc:SeriesPoint Argument="1/1/2010" Value="2"/>
                        <dxc:SeriesPoint Argument="2/1/2010" Value="2"/>
                        <dxc:SeriesPoint Argument="3/1/2010" Value="3"/>
                        <dxc:SeriesPoint Argument="4/1/2010" Value="5"/>
                        <dxc:SeriesPoint Argument="5/1/2010" Value="8"/>
                        <dxc:SeriesPoint Argument="6/1/2010" Value="11"/>
                        <dxc:SeriesPoint Argument="7/1/2010" Value="13"/>
                        <dxc:SeriesPoint Argument="8/1/2010" Value="13"/>
                        <dxc:SeriesPoint Argument="9/1/2010" Value="11"/>
                        <dxc:SeriesPoint Argument="10/1/2010" Value="8"/>
                        <dxc:SeriesPoint Argument="11/1/2010" Value="5"/>
                        <dxc:SeriesPoint Argument="12/1/2010" Value="3"/>
                        <dxc:RadarPointSeries2D.PointAnimation>
                            <dxc:CircularMarkerSlideFromTopCenterAnimation/>
                        </dxc:RadarPointSeries2D.PointAnimation>
                    </dxc:RadarPointSeries2D>
                    <dxc:RadarPointSeries2D >
                        <dxc:SeriesPoint Argument="1/1/2010" Value="6"/>
                        <dxc:SeriesPoint Argument="2/1/2010" Value="7"/>
                        <dxc:SeriesPoint Argument="3/1/2010" Value="10"/>
                        <dxc:SeriesPoint Argument="4/1/2010" Value="14"/>
                        <dxc:SeriesPoint Argument="5/1/2010" Value="18"/>
                        <dxc:SeriesPoint Argument="6/1/2010" Value="21"/>
                        <dxc:SeriesPoint Argument="7/1/2010" Value="22"/>
                        <dxc:SeriesPoint Argument="8/1/2010" Value="22"/>
                        <dxc:SeriesPoint Argument="9/1/2010" Value="19"/>
                        <dxc:SeriesPoint Argument="10/1/2010" Value="15"/>
                        <dxc:SeriesPoint Argument="11/1/2010" Value="10"/>
                        <dxc:SeriesPoint Argument="12/1/2010" Value="7"/>
                        <dxc:RadarPointSeries2D.PointAnimation>
                            <dxc:CircularMarkerWidenAnimation/>
                        </dxc:RadarPointSeries2D.PointAnimation>
                    </dxc:RadarPointSeries2D>
                </dxc:RadarDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>