Annotations in ASP.NET MVC Chart control

30 Jul 2021 / 2 minutes to read

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

You can add annotations to the chart by using the annotations option. By using the Content option of annotation object, you can specify the id of the element that needs to be displayed in the chart area.

razor

annotation.cs

@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   Annotations(an => {
           an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
           an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
    }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()

public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Region

Annotations can be placed either with respect to Series or Chart. by default, it will placed with respect to Chart.

razor

region.cs

@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   Annotations(an => {
           an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
           an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
    }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()

public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Co-ordinate Units

Specified the coordinates units of the annotation either Pixel or Point.

razor

co-ordinate.cs

@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   Annotations(an => {
           an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
           an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
    }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()

public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Alignment

Annotation provides VerticalAlignment and HorizontalAlignment. The VerticalAlignment can be customized via Top, Bottom or Middle and the horizontalAlignment can be customized via Near, Far or Center.

razor

alignment.cs

@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   Annotations(an => {
           an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
           an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
    }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()

public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Adding y-axis sub title through on annotation

By setting text div in the Content option of annotation object you can add sub title to chart y-axis. Specified the Coordinate value as Pixel and customize x and y location of the text.

razor

axis-sub.cs

@Html.EJS().Chart("container").ChartArea(area => area.Border(br => br.Color("transparent"))).Series(series =>
    {
        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue")
        .Marker(mr => mr.Visible(true).Width(10).Height(10)).YName("yValue")
        .DataSource(ViewBag.dataSource).Name("Germany").Add();
    }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)

  ).PrimaryYAxis(py => py.Title("(m3/min)")).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Annotations(an =>
  {
      an.Region(Syncfusion.EJ2.Charts.Regions.Chart).X("2").Y("220").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Pixel).
Content("#templateWrap").Add();
  }).Render()
<script id="templateWrap" type="text/x-template">
    <div id="text" style="transform: rotate(-90deg);">Speed Rate</div>
</script>

public ActionResult Index()
        {
            List<LineChartData> chartData = new List<LineChartData>
            {
                new LineChartData { xValue = "2014", yValue = 21 },
                new LineChartData { xValue = "2015", yValue = 24 },
                new LineChartData { xValue = "2016", yValue = 36 },
                new LineChartData { xValue = "2017", yValue = 38 },
                new LineChartData { xValue = "2018", yValue = 54 },
                new LineChartData { xValue = "2019", yValue = 57 },
                new LineChartData { xValue = "2020", yValue = 70 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }

        public class LineChartData
        {
            public string xValue;
            public double yValue;
            public double yValue1;
        }

Contents

Region
Co-ordinate Units
Alignment
Adding y-axis sub title through on annotation

Contents

Region
Co-ordinate Units
Alignment
Adding y-axis sub title through on annotation

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!