Data labels in ASP.NET CORE 3D Chart Component
9 Jan 202419 minutes to read
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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible="true"></e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible="true"
position="@Syncfusion.EJ2.Charts.Chart3DDataLabelPosition.Middle"></e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible="true"
template='<div style=\"border: 1px solid black; padding: 3px 3px 3px 3px\"><div>${point.x}</div><div>${point.y}</div></div>'></e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible="true" name="text"></e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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’.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible="true" format="n2"></e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible=true>
<e-chart3ddatalabelsettings-border width="1" color="red"></e-chart3ddatalabelsettings-border>
<e-chart3ddatalabelsettings-margin left="5" right="5" top="5"
bottom="5"></e-chart3ddatalabelsettings-margin>
</e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible=true>
<e-chart3ddatalabelsettings-border width="2" color="red"></e-chart3ddatalabelsettings-border>
</e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>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.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100" textRender="textRender">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
<e-chart3d-series-datalabel visible=true>
</e-chart3d-series-datalabel>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
<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;
}