Annotation
14 Mar 202219 minutes to read
Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.
You can add annotations to the chart by using the annotations option. By using the content option of annotation object, you can specify the id of the element that needs to be displayed in the chart area.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-annotations>
<e-chart-annotation content="70 Gold Medals" coordinateUnits="Point" x="France" y="50">
</e-chart-annotation>
</e-chart-annotations>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}Region
Annotations can be placed either with respect to Series or Chart. By default, it will be placed with respect to Chart.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-annotations>
<e-chart-annotation content="<div>Highest Medal Count</div>" region="Series" coordinateUnits="Point" x="Japan" y="70">
</e-chart-annotation>
</e-chart-annotations>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}Co-ordinate Units
Specified the coordinates units of the annotation either with Pixel or Point.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-annotations>
<e-chart-annotation content="<div>Annotation in Pixel</div>"
coordinateUnits="Pixel" x="250" y="100">
</e-chart-annotation>
</e-chart-annotations>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}Alignment
Annotation provides verticalAlignment and horizontalAlignment. The verticalAlignment can be customized via Top, Bottom or Middle and the horizontalAlignment can be customized via Near, Far or Center.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-annotations>
<e-chart-annotation content="<div>Medal count</div>" coordinateUnits="Point"
x="France" y="50" verticalAlignment="Top" horizontalAlignment="Near">
</e-chart-annotation>
</e-chart-annotations>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}Adding y-axis sub title through on annotation
By setting text div in the content option of annotation object, you can add sub title to chart y-axis. Specify the coordinate value as pixel and customize x and y location of the text.
<ejs-chart id="container" title="Sales History of Product X" load="load">
<e-chart-margin left="40"></e-chart-margin>
<e-chart-annotations>
<e-chart-annotation content="<div id=text><b>Rate</b></div>" coordinateUnits="Pixel" verticalAlignment="Top" x="30" y="236" region="Chart">
</e-chart-annotation>
</e-chart-annotations>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="m3/min"></e-chart-primaryyaxis>
<e-series-collection>
<e-series name="Product X" xName="xValue" yName="yValue"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
<style>
#text{
transform: rotate(-90deg);
}
</style>public ActionResult 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;
}