- Positioning
- Data label template
- Connector line
- Text mapping
- Format
- Customization
- Using textRender event
- Using template
Contact Support
Data Label in EJ2 JavaScript 3D Circular Chart control
19 Mar 202424 minutes to read
A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the visible
option in the dataLabel
property. By default, the labels will arrange themselves smartly to avoid overlapping.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13 },
{ x: 'Feb', y: 13.5 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13.5 }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
To use the data label feature, inject the
CircularChartDataLabel3D
using theCircularChart3D.Inject(CircularChartDataLabel3D
method.
Positioning
Using the position
property, we can place the data label either inside
or outside
the 3D Circular Chart.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13 },
{ x: 'Feb', y: 13 },
{ x: 'Mar', y: 17 },
{ x: 'Apr', y: 13.5 }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
position: 'Outside'
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Data label template
The label content can be formatted using the template option. Inside the template, placeholder text ${point.x}
and ${point.y
can be added to display the corresponding data point’s x & y value. The data label template can be set using the template
property.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13, text: 'Jan: 13' },
{ x: 'Feb', y: 13, text: 'Feb: 13' },
{ x: 'Mar', y: 17, text: 'Mar: 17' },
{ x: 'Apr', y: 13.5, text: 'Apr: 13.5' }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
name: 'text',
template: "<div id='templateWrap' style='background-color:#bd18f9;border-radius: 3px; float: right;padding: 2px;line-height: 20px;text-align: center;'>"+ "<img src='https://ej2.syncfusion.com/demos/src/chart/images/sunny.png' />" + "<div style='color:white; font-family:Roboto; font-style: medium; fontp-size:14px;float: right;padding: 2px;line-height: 20px;text-align: center;padding-right:6px'><span>${point.y}</span></div></div>"
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Connector line
The connector line will be visible when the data label is placed outside
the chart. It can be customized using properties such as color
, width
, length
, and dashArray
within the connectorStyle
property.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13, text: 'Jan: 13' },
{ x: 'Feb', y: 13, text: 'Feb: 13' },
{ x: 'Mar', y: 17, text: 'Mar: 17' },
{ x: 'Apr', y: 13.5, text: 'Apr: 13.5' }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
name: 'text',
position: 'Outside',
connectorStyle: {
length: '50px',
width: 2,
color: '#f4429e',
dashArray: '5,3'
}
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Text mapping
Text from the data source can be mapped using the name
property within the data label.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 3, text:'January' },
{ x: 'Feb', y: 3.5, text: 'February' },
{ x: 'Mar', y: 7, text: 'March' },
{ x: 'Apr', y: 13.5, text: 'April' }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
name: 'text'
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Format
The data label for the 3D Circular Chart can be formatted using the format
property. You can utilize global formatting options such as ‘n’, ‘p’, and ‘c’.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13 },
{ x: 'Feb', y: 13 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13 }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
format: 'n2'
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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. |
Customization
Individual text for the data points in the 3D Circular Chart can be customized using the textRender
event.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13, text: 'Jan: 13' },
{ x: 'Feb', y: 13, text: 'Feb: 13' },
{ x: 'Mar', y: 17, text: 'Mar: 17' },
{ x: 'Apr', y: 13.5, text: 'Apr: 13.5' }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
name: 'text',
position: 'Outside'
}
}
],
tilt: -45,
legendSettings: {
visible: false
},
textRender: (args) => {
if (args.text.indexOf('Mar') > -1) {
args.color = 'red';
args.border.width = 1;
}
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Using textRender event
You can customize the data label of a pie chart using the textRender
event as follows to show the percentage.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13 },
{ x: 'Feb', y: 13.5 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13.5 }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true
}
}
],
tilt: -45,
legendSettings: {
visible: false
},
textRender: (args) => {
args.text = args.point.percentage + "%";
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Using template
You can display the percentage values in the data label of a pie chart using the template
option.
var circularchart = new ej.charts.CircularChart3D({
series: [
{
dataSource: [
{ x: 'Jan', y: 13 },
{ x: 'Feb', y: 13.5 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13.5 }
],
xName: 'x',
yName: 'y',
dataLabel: {
visible: true,
template: "<div id='dataLabelTemplate'>${point.percentage}%</div>"
}
}
],
tilt: -45,
legendSettings: {
visible: false
}
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>