Waterfall in ASP.NET CORE Charts Component
17 Apr 20236 minutes to read
Waterfall
Waterfall chart helps to understand the cumulative effect of the sequentially introduced positive and negative values. To render a Waterfall series, use series Type
as Waterfall
. IntermediateSumIndexes
property of waterfall is used to represent the in between the sum values and SumIndexes
is used to represent the cumulative sum values.
@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall" intermediateSumIndexes="index"
sumIndexes="sumindex">
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.dataSource = chartData;
return View();
}
public class WaterfallChartData
{
public string xValue;
public double yValue;
}
Series customization
The negative changes of waterfall charts is represented by using NegativeFillColor
and the summary changes are represented by using SummaryFillColor
properties.
By default, the negativeFillColor as ‘#E94649’ and the summaryFillColor as ‘#4E81BC’.
@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall" intermediateSumIndexes="index" sumIndexes="sumindex"
summaryFillColor="#e56590" negativeFillColor="#f8b883">
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.dataSource = chartData;
return View();
}
public class WaterfallChartData
{
public string xValue;
public double yValue;
}