To render a pie series, use the series type
as Pie.
<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-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}By default, radius of the pie series will be 80% of the size (minimum of chart width and height).
You can customize this using radius
property of the series.
<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"
radius="100%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using center property of the series.
@{
var piecenter = new
{
x = "60%",
y = "60%"
};
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableAnimation="false" center="piecenter">
<e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser" explodeIndex="0" explode="true" explodeOffset="10%">
<e-accumulationseries-datalabel name="text" visible="true">
<e-font fontWeight="600" color="white"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieData { xValue = "Chrome", yValue = 37, text = "37%" },
new PieData { xValue = "UC Browser", yValue = 17, text = "17%" },
new PieData { xValue = "iPhone", yValue = 19, text = "19%" },
new PieData { xValue = "Others", yValue = 4, text = "4%" },
new PieData { xValue = "Opera", yValue = 11, text = "11%" },
new PieData { xValue = "Android", yValue = 12, text = "12%" },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string text;
}You can use radius mapping to render the slice with different radius pie and also use border , fill properties to customize the point. dataLabel is used to represent individual data and its value.
<ejs-accumulationchart id="container" enableAnimation="true" enableSmartLabels="true">
<e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="true">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" innerRadius="20%" radius="r">
<e-accumulationseries-datalabel name="x" 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 PieRadiusChartData { xValue = "Argentina", yValue = 505370, r = "100"},
new PieRadiusChartData { xValue = "Belgium", yValue = 551500, r = "118.7"},
new PieRadiusChartData { xValue = "Cuba", yValue = 312685 , r = "124.6"},
new PieRadiusChartData { xValue = "Dominican Republic", yValue = 350000 , r = "137.5"},
new PieRadiusChartData { xValue = "Egypt", yValue = 301000 , r = "150.8"},
new PieRadiusChartData { xValue = "Kazakhstan", yValue = 300000, r = "155.5"},
new PieRadiusChartData { xValue = "Somalia", yValue = 357022, r = "160.6"}
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
public string r;
}To achieve a doughnut in pie series, customize the innerRadius
property of the series. By setting value greater than 0%, a doughnut will appear.
The innerRadius property takes value from 0% to 100% of the pie radius.
<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" innerRadius="40%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}You can customize the start and end angle of the pie series using the
startAngle and
endAngle
properties. The default value of startAngle is 0 degree, and endAngle is 360 degrees. By customizing this,
you can achieve a semi pie series.
<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"
startAngle="270" endAngle="90">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}The fill color and the text in the data source can be mapped to the chart using pointColorMapping in series and
name in datalabel respectively.
<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"
pointColorMapping="fill">
<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;
}Individual points can be customized using the pointRender event.
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" pointRender="pointRender">
<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-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<script>
var pointRender = function (args) {
if ((args.point.x).indexOf("iPhone") > -1) {
args.fill = '#f4bc42';
}
else {
args.fill = '#597cf9';
}
};
</script>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}