To render a funnel series, use the series type
as Funnel
.
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}
The size of the funnel chart can be customized by using the width
and height
properties.
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel" width="60%" height="80%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}
The funnel’s neck size can be customized by using the neckWidth
and neckHeight
properties.
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel" neckWidth="15%" neckHeight="18%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}
Funnel chart provides options to customize the space between the segments by using the gapRatio
property of the
series. It ranges from 0 to 1.
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel" gapRatio="0.08">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}
Points can be exploded on mouse click by setting the explode
property to true. You can also explode the point
on load using explodeIndex
. Explode distance can be set by using explodeOffset
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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel" explodeIndex="3" explode="true" explodeOffset="10%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}
It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.
<ejs-accumulationchart id="container" title="Top Population Countries in the world 2017" load="load">
<e-accumulationchart-tooltipsettings enable="true" format="${point.x} : <b>${point.y}</b>"></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" type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel" neckWidth="15%" neckHeight="18%">
<e-accumulationseries-datalabel visible="true" name="text" position="Outside">
<e-connectorstyle length="6%"></e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelData { xValue = "China", yValue = 1409517397, text = "China" },
new FunnelData { xValue = "India", yValue = 1339180127, text = "India" },
new FunnelData { xValue = "United States", yValue = 324459463, text = "United States" },
new FunnelData { xValue = "Indonesia", yValue = 263991379, text = "Indonesia" },
new FunnelData { xValue = "Brazil", yValue = 209288278, text = "Brazil" },
new FunnelData { xValue = "Pakistan", yValue = 197015955, text = "Pakistan" },
new FunnelData { xValue = "Nigeria", yValue = 190886311, text = "Nigeria" },
new FunnelData { xValue = "Bangladesh", yValue = 164669751, text = "Bangladesh" },
new FunnelData { xValue = "Russia", yValue = 143989754, text = "Russia" },
new FunnelData { xValue = "Mexico", yValue = 129163276, text = "Mexico" },
new FunnelData { xValue = "Japan", yValue = 127484450, text = " Japan" },
new FunnelData { xValue = "Ethiopia", yValue = 104957438, text = "Ethiopia" },
new FunnelData { xValue = "Philippines", yValue = 104918090, text = "Philippines" },
new FunnelData { xValue = "Egypt", yValue = 97553151, text = "Egypt" },
new FunnelData { xValue = "Vietnam", yValue = 95540800, text = "Vietnam" },
new FunnelData { xValue = "Germany", yValue = 82114224, text = "Germany" }
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
public string text;
}
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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Funnel">
</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<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}