Data Label in ASP.NET CORE Accumulation Chart Component
4 Jun 202421 minutes to read
Data label can be added to a chart series by enabling the visible
option in the dataLabel property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Positioning
Accumulation chart provides support for placing the data label either inside
or outside
the chart.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Smart labels
Data labels will be arranged smartly without overlapping with each other. You can enable or disable this feature using the enableSmartLabels
property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Data Label Template
Label content can be formatted by using the template option. Inside the template, you can add the placeholder text ${point.x}
and ${point.y}
to display corresponding data points x & y value. Using template
property, you can set data label template in chart.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<script id="ChartMaterial" type="text/x-template">
<div id='templateWrap' style = 'background-color:#bd18f9;border-radius: 3px; float: right;padding: 2px;line-height: 20px;text-align: center;' >
<img src = 'sun_annotation.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>
</script>
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Inside" template="#ChartMaterial">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Connector Line
Connector line will be visible when the data label is placed outside
the chart. The connector line can be customized using the type
, color
, width
, length
and dashArray
properties.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
<e-connectorstyle color="#f4429e" length="50px" width="2" type="Curve" dashArray="5,3">
</e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Text Mapping
Text from the data source can be mapped to data label using name
property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Format
Data label for the accumulation chart can be formatted using format
property. You can use the global formatting options, such as ‘n’, ‘p’, and ‘c’.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Inside"
format="n2">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
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 can be customized using the textRender
event.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" textRender="textRender">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser"
pointColorMapping="fill">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<script>
var textRender = function (args) {
if ((args.point.x).indexOf("iPhone") > -1) {
args.color = 'red';
args.border.width = 1;
}
};
</script>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Text wrap
When the data label text exceeds the container, the text can be wrapped by using textWrap
property. End user can also wrap the data label text based on maxWidth
property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { x = "Chrome", y = 100, text= "Chrome (100M)<br>40%", tooltipMappingName= "40%" },
new PieChartData { x=" UC Browser", y= 40, text= "UC Browser (40M)<br>16%", tooltipMappingName= "16%" },
new PieChartData { x= "Opera" , y= 30, text= "Opera (30M)<br>12%", tooltipMappingName= "12%" },
new PieChartData { x= "Safari", y= 30, text= "Safari (30M)<br>12%", tooltipMappingName= "12%" },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="x" yName="y" startAngle="270" endAngle="90" tooltipMappingName="tooltipMappingName">
<e-accumulationseries-datalabel name="text" visible="true" position="Inside"
maxWidth="100" textWrap="Wrap" enableRotation="true">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string x;
public double y;
public string text;
public string tooltipMappingName;
}
Show percentages in data labels of pie chart
You can show the percentages in data labels of pie chart using textRender
event and template
option.
Using textRender event
You can customize the data label of pie chart using TextRender event as follows to show percentage.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" enableSmartLabels="true" textRender="textRender">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<script>
var textRender = function (args) {
args.text = args.point.percentage + "%";
};
</script>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Using template
You can display the percentage values in data label of pie chart using template
option.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
};
}
<ejs-accumulationchart id="container" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel visible="true" template="<div id='dataLabelTemplate'>${point.percentage}%</div>">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}