Search results

Annotation

The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.

By using the content option of annotation property, you can specify the Id of the element that needs to be displayed in the chart area.

razor
annotation.cs
@using Syncfusion.EJ2;
@section ControlsSection{   
@(Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            . Annotations(an => {an
              .X("iPhone")
              .Y("19")
              .CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point)
              .Regions(Syncfusion.EJ2.Charts.Regions.Series)
              .Content(ViewBag.content).Add();
             }).
            .LegendSettings(ls => ls.Visible(false)).Render()
)
}
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { x = "Chrome", y = 37 },
                new PieChartData { x = "UC Browser", y = 17 },
                new PieChartData { x = "iPhone", y = 19 },
                new PieChartData { x = "Others", y = 4  },
                new PieChartData { x = "Opera", y = 11 },
                new PieChartData { x = "Android", y = 12 },
            };
            ViewBag.dataSource = chartData;
           return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Region

The annotation can be placed with respect to either Series or Chart.

razor
region.cs
@using Syncfusion.EJ2;
@section ControlsSection{   
@(Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            . Annotations(an => {an
              .X("150")
              .Y("150")
              .CoordinateUnits(Syncfusion.EJ2.Charts.Units.Pixel)
              .Regions(Syncfusion.EJ2.Charts.Regions.Chart)
              .Content(ViewBag.content).Add();
             }).
            .LegendSettings(ls => ls.Visible(false)).Render()
)
}
public ActionResult Index()
        {
             List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { x = "Chrome", y = 37 },
                new PieChartData { x = "UC Browser", y = 17 },
                new PieChartData { x = "iPhone", y = 19 },
                new PieChartData { x = "Others", y = 4  },
                new PieChartData { x = "Opera", y = 11 },
                new PieChartData { x = "Android", y = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Co-ordinate Units

Specifies the coordinate units of an annotation either in Pixel or Point.

razor
co-ordinate.cs
@using Syncfusion.EJ2;
@section ControlsSection{   
@(Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            . Annotations(an => {an
              .X("iPhone")
              .Y("19")
              .CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point)
              .Regions(Syncfusion.EJ2.Charts.Regions.Series)
              .Content(ViewBag.content).Add();
             }).
            .LegendSettings(ls => ls.Visible(false)).Render()
)
}
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { x = "Chrome", y = 37 },
                new PieChartData { x = "UC Browser", y = 17 },
                new PieChartData { x = "iPhone", y = 19 },
                new PieChartData { x = "Others", y = 4  },
                new PieChartData { x = "Opera", y = 11 },
                new PieChartData { x = "Android", y = 12 },
            };
            ViewBag.dataSource = chartData;
             return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Alignment

The annotations can be moved vertically and horizontally from its default position by using verticalAlignment or horizontalAlignment properties. The verticalAlignment property takes value as Top, Bottom or Middle and the horizontalAlignment property takes value as Near, Far or Center.

razor
alignment.cs
@using Syncfusion.EJ2;
@section ControlsSection{   
@(Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            . Annotations(an => {an
              .X("iPhone")
              .Y("19")
              .CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point)
              .Regions(Syncfusion.EJ2.Charts.Regions.Series)
              .VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top)
              .HorizontalAlignment(Syncfusion.EJ2.Charts.Position.Near)
              .Content(ViewBag.content).Add();
             }).
            .LegendSettings(ls => ls.Visible(false)).Render()
)
}
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { x = "Chrome", y = 37 },
                new PieChartData { x = "UC Browser", y = 17 },
                new PieChartData { x = "iPhone", y = 19 },
                new PieChartData { x = "Others", y = 4  },
                new PieChartData { x = "Opera", y = 11 },
                new PieChartData { x = "Android", y = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }