Data label can be added to a chart series by enabling the visible
option in the dataLabel property.
<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="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Accumulation chart provides support for placing the data label either inside
or outside
the chart.
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Datalabels will be arranged smartly without overlapping with each other. You can enable or disable this feature using
the enableSmartLabels
property.
<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="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
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.
@section ControlsSection{
<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="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser">
<e-accumulationseries-datalabel name="text" visible="true" position="Inside"
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>">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
}
public ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
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
<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="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Text from the data source can be mapped to data label using name
property.
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}
Individual text can be customized using the textRender
event.
<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="ViewBag.dataSource" 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 ActionResult Index()
{
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"},
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
public string fill;
}