Stacked Bar in ASP.NET CORE Charts Component
4 Oct 202314 minutes to read
Stacked bar
To render a stacked bar series, use series Type as StackingBar.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Stacking group
You can use the StackingGroup property to group the stacked bar and 100% stacked bar. Columns with same group name are stacked on top of each other.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" stackingGroup="a"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" stackingGroup="b"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Cylindrical stacked bar chart
To render a cylindrical stacked bar chart, set the ColumnFacet property to Cylinder in the chart series.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y1"
columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y2"
columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<CylinderChartData> chartData = new List<CylinderChartData>
{
new CylinderChartData { x= 2000, y= 0.61, y1= 0.03, y2= 0.48 },
new CylinderChartData { x= 2001, y= 0.81, y1= 0.05, y2= 0.53 },
new CylinderChartData { x= 2002, y= 0.91, y1= 0.06, y2= 0.57 },
new CylinderChartData { x= 2003, y= 1, y1= 0.09, y2= 0.61 },
new CylinderChartData { x= 2004, y= 1.19, y1= 0.14, y2= 0.63 },
new CylinderChartData { x= 2005, y= 1.47, y1= 0.20, y2= 0.64 },
new CylinderChartData { x= 2006, y= 1.74, y1= 0.29, y2= 0.66 },
new CylinderChartData { x= 2007, y= 1.98, y1= 0.46, y2= 0.76 },
new CylinderChartData { x= 2008, y= 1.99, y1= 0.64, y2= 0.77 },
new CylinderChartData { x= 2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class CylinderChartData
{
public double x;
public double y;
public double y1;
public double y2;
}Series customization
The following properties can be used to customize the Stacked Bar series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- DashArray – Specifies the dashes for series.
-
ChartSeriesBorder – Specifies the
ColorandWidthof series border.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" fill="blue" dashArray="5,5" opacity="0.7"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
<e-series-border width="2" color="black"></e-series-border>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" fill="green" dashArray="5,5" opacity="0.7"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
<e-series-border width="2" color="black"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}