Data Labels in ASP.NET MVC 3D Charts
Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the Visible property in the DataLabel. By default, the labels will arrange smartly without overlapping.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true)).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Position
The Position property is used to place the label either on Top, Middle, or Bottom.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.Chart3DDataLabelPosition.Middle)).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Template
Label content can be formatted by using the template option. Inside the template, the placeholder text ${point.x} and ${point.y} can be added to display corresponding data points x & y value. Using Template property, the data label template can be set.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true).Template("<div style=\"border: 1px solid black; padding: 3px 3px 3px 3px\"><div>${point.x}</div><div>${point.y}</div></div>")).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Text mapping
Text from the data source can be mapped using the Name property.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
DataLabel(dl => dl.Visible(true).Name("text")).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "Jan", y= 12, text= "January : 12°C" },
new ChartData { x= "Feb", y= 8, text= "February : 8°C" },
new ChartData { x= "Mar", y= 11, text= "March : 11°C" },
new ChartData { x= "Apr", y= 6, text= "April : 6°C" }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double y;
public string text;
}Format
Data label for the chart can be formatted using the Format property. The global formatting options can be used as ‘n’, ‘p’, and ‘c’.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true).Format("n2")).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}| Value | Format | Resultant Value | Description |
|---|---|---|---|
| 1000 | n1 | 1000.0 | The number is rounded to 1 decimal place. |
| 1000 | n2 | 1000.00 | The number is rounded to 2 decimal places. |
| 1000 | n3 | 1000.000 | The number is rounded to 3 decimal place. |
| 0.01 | p1 | 1.0% | The number is converted to percentage with 1 decimal place. |
| 0.01 | p2 | 1.00% | The number is converted to percentage with 2 decimal place. |
| 0.01 | p3 | 1.000% | The number is converted to percentage with 3 decimal place. |
| 1000 | c1 | $1000.0 | The currency symbol is appended to number and number is rounded to 1 decimal place. |
| 1000 | c2 | $1000.00 | The currency symbol is appended to number and number is rounded to 2 decimal place. |
Margin
The Margin for data label can be applied by using Left, Right, Bottom and Top properties.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true).Border(br => br.Width(1).Color("red"))
.Margin(mg => mg.Top(5).Left(5).Right(5).Bottom(5))).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Customization
The Stroke and Border of data label can be customized using Fill and Border properties.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true).Border(br => br.Width(2).Color("red"))).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Customizing specific label
A specific label can be customized by using the TextRender event. The TextRender event allows you to change the label text for the point.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("country").
YName("gold").
DataLabel(dl => dl.Visible(true)).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Title("Olympic Medals")
.TextRender("textRender")
.Render())
<script>
function textRender(args) {
if (args.point.index === 2) {
args.text = 'Label';
}
else {
args.cancel = true;
}
}
</script>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 46 },
new ChartData { country= "GBR", gold= 27 },
new ChartData { country= "CHN", gold= 26 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}Handling Overlapping Data Labels
Use the labelIntersectAction property to specify how overlapping data labels are handled.
The available options are:
-
None- Displays all data labels even when they overlap. -
RelocateVertically- Relocates overlapping data labels vertically. -
RelocateHorizontally- Relocates overlapping data labels horizontally.
The RelocateVertically and RelocateHorizontally options enable the Smart Data Label feature and are supported only for StackingColumn, and StackingBar series. These modes improve readability by relocating overlapping data labels and connecting them to their corresponding data points using connector lines. Use the smartLabelSettings property to customize relocated labels through the background, pointerShape, border, connectorLineStyle, and offset settings. The offset property is applicable only when labelIntersectAction is set to RelocateVertically.
@(
Html.EJS().Chart3D("container")
.Title("Mobile Game Market by Country")
.PrimaryXAxis(axis => axis
.Title("Years")
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(axis => axis
.Title("Sales in Billions")
.LabelFormat("{value}B")
)
.LegendSettings(legend => legend
.Visible(true)
)
.WallColor("transparent")
.EnableRotation(true)
.Rotation(7)
.Tilt(10)
.Depth(100)
.Series(series =>
{
series
.DataSource(ViewBag.dataSource)
.XName("x")
.YName("y")
.Name("UK")
.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn)
.ColumnWidth(0.5)
.Animation(animation => animation
.Enable(false)
)
.DataLabel(dataLabel => dataLabel
.Visible(true)
.LabelIntersectAction(
Syncfusion.EJ2.Charts.Chart3DDataLabelIntersectAction.RelocateVertically
)
)
.Add();
series
.DataSource(ViewBag.dataSource)
.XName("x")
.YName("y1")
.Name("Germany")
.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn)
.ColumnWidth(0.5)
.Animation(animation => animation
.Enable(false)
)
.DataLabel(dataLabel => dataLabel
.Visible(true)
.LabelIntersectAction(
Syncfusion.EJ2.Charts.Chart3DDataLabelIntersectAction.RelocateVertically
)
)
.Add();
series
.DataSource(ViewBag.dataSource)
.XName("x")
.YName("y2")
.Name("France")
.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn)
.ColumnWidth(0.5)
.Animation(animation => animation
.Enable(false)
)
.DataLabel(dataLabel => dataLabel
.Visible(true)
.LabelIntersectAction(
Syncfusion.EJ2.Charts.Chart3DDataLabelIntersectAction.RelocateVertically
)
.SmartLabelSettings(settings => settings
.Background("green")
.PointerShape(
Syncfusion.EJ2.Charts.RelocatePointerShape.Arrow
)
.Offset(0.2)
.Border(border => border
.Color("yellow")
.DashArray("2")
.Width(2)
)
.ConnectorLineStyle(line => line
.Color("RED")
.Width(2)
)
)
)
.Add();
series
.DataSource(ViewBag.dataSource)
.XName("x")
.YName("y3")
.Name("Italy")
.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn)
.ColumnWidth(0.5)
.Animation(animation => animation
.Enable(false)
)
.DataLabel(dataLabel => dataLabel
.Visible(true)
.LabelIntersectAction(
Syncfusion.EJ2.Charts.Chart3DDataLabelIntersectAction.RelocateVertically
)
.SmartLabelSettings(settings => settings
.Background("green")
.PointerShape(
Syncfusion.EJ2.Charts.RelocatePointerShape.Arrow
)
.Offset(0.8)
.Border(border => border
.Color("yellow")
.DashArray("2")
.Width(2)
)
.ConnectorLineStyle(line => line
.Color("RED")
.Width(2)
)
)
)
.Add();
})
.Render()
)using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
public class HomeController : Controller
{
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x = "2014", y = 21.1, y1 = 76.9, y2 = 66.1, y3 = 34.1 },
new ChartData { x = "2015", y = 127.3, y1 = 20.5, y2 = 19.3, y3 = 38.2 },
new ChartData { x = "2016", y = 143.4, y1 = 121.7, y2 = 91.3, y3 = 44.0 },
new ChartData { x = "2017", y = 559.9, y1 = 342.5, y2 = 62.4, y3 = 91.6 },
new ChartData { x = "2018", y = 175.4, y1 = 166.7, y2 = 112.9, y3 = 61.9 },
new ChartData { x = "2019", y = 189.0, y1 = 182.9, y2 = 122.4, y3 = 71.5 },
new ChartData { x = "2020", y = 202.7, y1 = 197.3, y2 = 120.9, y3 = 82.0 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x { get; set; }
public double y { get; set; }
public double y1 { get; set; }
public double y2 { get; set; }
public double y3 { get; set; }
}
}