Search results

Dotted Line in ASP.NET Core 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.

tagHelper
dotted-annotation.cs
<ejs-chart id="container" title="Inflation - Consumer Price">
            <e-chart-tooltipsettings enable="true">
            </e-chart-tooltipsettings>
            <e-chart-annotations>
                <e-chart-annotation content="#templateWrap"
                                    x="2014" y="50" coordinateUnits="Point" region="Chart">
                </e-chart-annotation>
            </e-chart-annotations>
            <e-chart-primaryxaxis valueType="Category">
            </e-chart-primaryxaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="10" width="10"></e-series-marker>
                </e-series>
            </e-series-collection>
        </ejs-chart>
<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;
        }