Animation

3 Sep 2020 / 2 minutes to read

The sunburst chart provides animation on loading and whenever the item source changes. Animation can be enabled by setting the EnableAnimation property to true.

The following code shows enabling animation.

c#

 

  SfSunburstChart sunburstChart = new SfSunburstChart();

  SunburstViewModel dataModel = new SunburstViewModel();
  sunburstChart.ItemsSource = dataModel.DataSource;
  sunburstChart.ValueMemberPath = "EmployeesCount";

  sunburstChart.EnableAnimation = true;
  sunburstChart.DataLabel.ShowLabel = true;

  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });

  sunburstChart.Frame = this.View.Frame;
  View.AddSubview(sunburstChart);

Duration

Animation duration can be controlled using the AnimationDuration property.

c#

 

  SfSunburstChart sunburstChart = new SfSunburstChart();

  SunburstViewModel dataModel = new SunburstViewModel();
  sunburstChart.ItemsSource = dataModel.DataSource;
  sunburstChart.ValueMemberPath = "EmployeesCount";

  sunburstChart.EnableAnimation = true;
  sunburstChart.AnimationDuration = 2;
  sunburstChart.DataLabel.ShowLabel = true;

  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
  sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });

  sunburstChart.Frame = this.View.Frame;
  View.AddSubview(sunburstChart);

The following screenshot depicts animation of the sunburst chart with the specified duration.