Search results

To add dotted line using annotation

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