Pyramid Chart in ASP.NET CORE Accumulation Chart Component
4 Jun 20249 minutes to read
To render a pyramid series, use the series type
as Pyramid
.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 14 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PyramidChartData
{
public string xValue;
public double yValue;
}
Mode
The Pyramid chart supports linear and surface modes of rendering. The default type of the pyramidMode
is linear
.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 4 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid" pyramidMode="Surface">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PyramidChartData
{
public string xValue;
public double yValue;
}
Size
The size of the pyramid chart can be customized by using the width
and height
properties.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 4 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid" width="60%" height="80%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PyramidChartData
{
public string xValue;
public double yValue;
}
Gap Between the Segments
Pyramid chart provides options to customize the space between the segments by using the gapRatio
property of the series. It ranges from 0 to 1.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 4 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid" gapRatio="0.2">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PyramidChartData
{
public string xValue;
public double yValue;
}
Explode
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.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 4 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid" explodeIndex="2" explode="true" explodeOffset="10">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
public class PyramidChartData
{
public string xValue;
public double yValue;
}
Customization
Individual points can be customized using the pointRender
event.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 4 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<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="chartData" xName="xValue" yName="yValue" name="Browser"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid" gapRatio="0.04">
</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 class PyramidChartData
{
public string xValue;
public double yValue;
}