Search results

Dotted Line in ASP.NET MVC Chart control

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 placed dotted lines in the chart based on point x and y values.

razor
dotted-annotation.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)

  ).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>
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;
        }