To add dotted line using annotation
17 Mar 20224 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.
<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;
}