- Region
- Co-ordinate Units
- Alignment
- Adding y-axis sub title through on annotation
Contact Support
Annotation
28 Feb 202216 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.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
Annotations(an => {
an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
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 placed with respect to Chart
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
Annotations(an => {
an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
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 Pixel
or Point
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
Annotations(an => {
an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
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
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
Annotations(an => {
an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
an.X("GBR").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content1).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
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. Specified the Coordinate
value as Pixel
and customize x and y location of the text.
@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)
).PrimaryYAxis(py => py.Title("(m3/min)")).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Annotations(an =>
{
an.Region(Syncfusion.EJ2.Charts.Regions.Chart).X("2").Y("220").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Pixel).
Content("#templateWrap").Add();
}).Render()
<script id="templateWrap" type="text/x-template">
<div id="text" style="transform: rotate(-90deg);">Speed Rate</div>
</script>
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;
}