Creating stacked waterfall chart using ASP.NET Core bar chart
This article explains how to create stacked waterfall chart using bar chart in ASP.NETCorechart component.
You can achieve a stacked waterfall chart using stacked bar series chart by adding one additional invisible series that will push the other two series to give the look of stacked water fall chart
Step1: Create a simple stacked bar chart with additional invisible series that will push the other two series to give the look of stacked water fall chart.
Index.cshtml
<ejs-chart id="chart" title="Variacion Absoluta"> <e-chart-primaryxaxis valueType="Category"> <e-majorgridlines width="0"></e-majorgridlines> <e-majorticklines width="0"></e-majorticklines> </e-chart-primaryxaxis> <e-chart-primaryyaxis> <e-majorgridlines width="0"></e-majorgridlines> <e-majorticklines width="0"></e-majorticklines> </e-chart-primaryyaxis> <e-series-collection> <e-series dataSource="ViewBag.dataSource" xName="x" yName="baseline" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" Fill="#FFFFFF"> </e-series> <e-series dataSource="ViewBag.dataSource" xName="x" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" Fill="#fa4a00"> </e-series> <e-series dataSource="ViewBag.dataSource" xName="x" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" Fill="#000095"> </e-series> </e-series-collection> </ejs-chart>
public IActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { baseline= 0,x= "Total",y1=190, y2=12},
new ChartData { baseline= 180,x= "Otros",y1=11, y2=10},
new ChartData { baseline= 180,x= "Expert Monitoring",y1=31, y2=0},
new ChartData { baseline= 195,x= "Liquidacion Nacional",y1=16,y2=0},
new ChartData { baseline= 178,x= "Autorizacion Nacional",y1=17, y2=0},
new ChartData { baseline= 155,x= "Cuentas & Tarjetas",y1=23, y2=0},
new ChartData { baseline= 116,x= "Decision Intelligence",y1=39,y2=0},
new ChartData { baseline= 0,x= "Ventas",y1=100, y2=16},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x { get; set; }
public double baseline { get; set; }
public double y1 { get; set; }
public double y2 { get; set; }
}
Step2: Create annotation using annotations property for the number of annotations based on the series points.
<e-chart-annotations> <e-chart-annotation content="<div>202</div>" X="annotation1" Y="207" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>21</div>" X="annotation2" Y="205" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>-31</div>" X="annotation3" Y="176" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>16</div>" X="annotation4" Y="215" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>17</div>" X="annotation5" Y="198" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>23</div>" X="annotation6" Y="182" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>39</div>" X="annotation7" Y="158" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> <e-chart-annotation content="<div>116</div>" X="annotation8" Y="120" CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'> </e-chart-annotation> </e-chart-annotations>
The following screenshot illustrates the result of stacked waterfall chart achieved by using stacked bar chart.
