ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexChart / Work with FlexChart / Chart Animation
In This Topic
    Chart Animation
    In This Topic

    The ChartAnimation provides built-in animation while loading and updating the chart. The animation can be configured by the user through several properties that include duration, easing function, and animation mode. Chart Animation property is available for FlexChart, FinancialChart and FlexPie.

    MVC FlexChart animation

    The following code example demonstrates how to enable Chart Animation using several properties such as duration, easing, and animation mode. This example uses the Fruit class available in the MVCExplorer product sample at "Documents\ComponentOne Samples\ASP.NET MVC Core\CS\MvcExplorer\src\MvcExplorer\Models" location on your system.

    Controller Code

    1. Include the following reference in the code:
      using <ApplicationName>.Models;
    2. Add the following code:
      C#
      Copy Code 
      public IActionResult Index()
{
    return View(Fruit.GetFruitsSales());
}

    View Code

    Razor
    Copy Code 
    @using <ApplicationName>.Models

<c1-flex-chart id="animationChart" chart-type="Column" binding-x="Name">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-series binding="MarPrice" name="March"></c1-flex-chart-series>
    <c1-flex-chart-series binding="AprPrice" name="April"></c1-flex-chart-series>
    <c1-flex-chart-series binding="MayPrice" name="May"></c1-flex-chart-series>
    <c1-chart-animation animation-mode="All" easing="Linear" duration="1000" axis-animation="true"></c1-chart-animation>
</c1-flex-chart>

    Chart Animation Class

    You can make use of the following properties to enable animation in your charts.

    Name Type Description
    AnimationMode Animation Mode Gets or sets whether the plot points animate one at a time, series by series, or all at once. The whole animation is still completed within the duration.
    AxisAnimation Boolean Gets or sets a value indicating whether animation is applied to the axis.
    Duration Integer Gets or sets the length of entire animation in milliseconds.
    Easing Easing Gets or sets the easing function applied to the animation.

    AnimationMode Enumeration

    You can use the AnimationMode to apply the animation to the Points, Series or both.

    Name Description
    All All points and series are animated at once.
    Point Animation is performed point by point. Multiple series are animated simultaneously at the same time.
    Series Animation is performed series by series. Entire series is animated at once, following the same animation as the "All" option, but just one series at a time.