I've been trying to add a data label on my bar chart using Syncfusion. However it doesn't display on the top of the data series but when I used tooltip it shows the data label. I wondered what could be the problem that blocks the data label to display in the chart. Here's my code
CSHTML FILE
<div class="box box-default">
<div class="box-body">
@Html.EJS().Chart("container").Series(
sr =>
{
sr.XName("Name").YName("Loan").Name("Loan Risk").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).DataSource(ViewBag.dataSource).Add();
sr.XName("Name").YName("Score").Name("Loan Score").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).DataSource(ViewBag.dataSource).Add();
sr.Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff")))).DataSource(ViewBag.dataSource).Name("Users").Add();
}).PrimaryYAxis(px => px.LabelFormat("p1").LabelStyle(ls => ls.Color("#21130d")).LineStyle(ls => ls.Width(0)).MajorTickLines(mg => mg.Width(0))
.MajorGridLines(mg => mg.Width(0))
).PrimaryXAxis(px => px.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hide).Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))).Tooltip(tt => tt.Enable(true)
).ChartArea(area => area.Border(br => br.Color("transparent"))
).LegendSettings(lg => lg.Visible(true)).Title("Pre - Funding Audit Report").Render()
</div>
</div>
This is the layout that I want (The Data label is at the top of the Data Series)
Since data label position is outer and font color is white, data label is not visible in white background. We request you to change the color of data label.
UG : https://ej2.syncfusion.com/aspnetmvc/documentation/chart/data-labels/