To add dotted line using annotation

17 Mar 20223 minutes to read

By using annotation, you can add dotted lines in the chart.

To add dotted lines in the chart, follow the given steps:

Step 1: Initialize the custom elements by using the annotation property.

By setting coordinateUnits value as point in annotation object, you can place dotted lines in the chart based on point x and y values.

CSHTML

@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)

  ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Annotations(an =>
  {
      an.Region(Syncfusion.EJ2.Charts.Regions.Chart).X("2014").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).
Content("#templateWrap").Add();
  }).Render()
<script id="templateWrap" type="text/x-template">
  <div style="border-top:3px dashed grey;border-top-width: 2px; width: 10000px"></div>
</script>

Dotted-annotation.cs

public IActionResult 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;
        }